blocks|key|1163977|text|响应Web设计(RWD)是一种Web设计方法，旨在制作站点以提供最佳的浏览体验|type|blockquote|depth|inlineStyleRanges|entityRanges|data|1163978|当您设计响应网站时，您应该考虑屏幕的大小，而不是设备类型。媒体查询可以帮助您做到这一点。|unstyled|1163979|如果您想为每个设备设置站点的样式，您可以使用user+agent值，但这是不建议的，因为您必须努力维护新设备、新浏览器、浏览器版本等的代码，而当使用屏幕大小时，这一切都无关紧要。|offset|length|style|CODE|1163980|您可以看到一些标准分辨率在这个链接中。|1163981|但是，在我看来，你应该先设计你的网站布局，然后再用媒体查询来调整它以适应可能的屏幕大小。|BOLD|1163982|为什么？正如我之前说过的，屏幕分辨率的变化很大，如果您要设计一个针对320+be的移动版本，您的站点将不会被优化为350+be屏幕或400+be屏幕。|1163983|TIPS|1163984|设计响应页面时，请在桌面浏览器中打开它，并更改浏览器的宽度，以查看屏幕的宽度如何影响您的布局和样式。|ordered-list-item|1163985|使用百分比而不是像素，这将使您的工作更容易。|1163986|示例|1163987|我有一张五栏的桌子。当屏幕大小大于600+is时，数据看起来很好，因此我在600+is上添加了一个断点，当屏幕大小较小时隐藏了一个不太重要的列。台式机和平板电脑等大屏幕设备将显示所有数据，而屏幕较小的移动电话将显示部分数据。|1163988|心态|1163989|不直接关系到问题，但在响应设计的重要方面。响应性设计还涉及这样一个事实，即用户在使用移动电话或桌面时有不同的心态。例如，当你在晚上打开你银行的网站，检查你的股票时，你需要屏幕上的数据。当你在午休时间打开同样的页面时，你可能希望看到一些重要的细节，而不是去年的所有图表。|1163990|entityMap|0|LINK|mutability|MUTABLE|url|http://css-tricks.com/snippets/css/media-queries-for-standard-devices/^0|0|0|M|A|0|C|6|0|0|0|2|0|0|0|4|0|0|0|0|2|0|0|0|2|0|0^^$0|@$1|2|3|4|5|6|7|1E|8|@]|9|@]|A|$]]|$1|B|3|C|5|D|7|1F|8|@]|9|@]|A|$]]|$1|E|3|F|5|D|7|1G|8|@$G|1H|H|1I|I|J]]|9|@]|A|$]]|$1|K|3|L|5|D|7|1J|8|@]|9|@$G|1K|H|1L|1|1M]]|A|$]]|$1|M|3|N|5|D|7|1N|8|@$G|1O|H|1P|I|O]]|9|@]|A|$]]|$1|P|3|Q|5|D|7|1Q|8|@]|9|@]|A|$]]|$1|R|3|S|5|D|7|1R|8|@$G|1S|H|1T|I|O]]|9|@]|A|$]]|$1|T|3|U|5|V|7|1U|8|@]|9|@]|A|$]]|$1|W|3|X|5|V|7|1V|8|@]|9|@]|A|$]]|$1|Y|3|Z|5|D|7|1W|8|@$G|1X|H|1Y|I|O]]|9|@]|A|$]]|$1|10|3|11|5|D|7|1Z|8|@]|9|@]|A|$]]|$1|12|3|13|5|D|7|20|8|@$G|21|H|22|I|O]]|9|@]|A|$]]|$1|14|3|15|5|D|7|23|8|@]|9|@]|A|$]]|$1|16|3|-4|5|D|7|24|8|@]|9|@]|A|$]]]|17|$18|$5|19|1A|1B|A|$1C|1D]]]]

<blockquote>
 Responsive Web design (RWD) is a Web design approach aimed at crafting sites to provide an optimal viewing experience
</blockquote>

When you design your responsive website you should consider the size of the screen and not the device type. The media queries helps you do that.

If you want to style your site per device, you can use the <code>user agent</code> value, but this is not recommended since you'll have to work hard to maintain your code for new devices, new browsers, browsers versions etc while when using the screen size, all of this does not matter.

You can see some standard resolutions <a href="http://css-tricks.com/snippets/css/media-queries-for-standard-devices/">in this link</a>.

BUT, in my opinion, you should first design your website layout, and only then adjust it with media queries to fit possible screen sizes.

Why? As I said before, the screen resolutions variety is big and if you'll design a mobile version that is targeted to 320px your site won't be optimized to 350px screens or 400px screens.

TIPS

<ol>
<li>When designing a responsive page, open it in your desktop browser and change the width of the browser to see how the width of the screen affects your layout and style.</li>
<li>Use percentage instead of pixels, it will make your work easier.</li>
</ol>

Example

I have a table with 5 columns. The data looks good when the screen size is bigger than 600px so I add a breakpoint at 600px and hides 1 less important column when the screen size is smaller. Devices with big screens such as desktops and tablets will display all the data, while mobile phones with small screens will display part of the data.

<hr>

State of mind

Not directly related to the question but important aspect in responsive design.
Responsive design also relate to the fact that the user have a different state of mind when using a mobile phone or a desktop. For example, when you open your bank's site in the evening and check your stocks you want as much data on the screen. When you open the same page in the your lunch break your probably want to see few important details and not all the graphs of last year.

blocks|key|884859|text|看看这个..。http://getbootstrap.com/|type|unstyled|depth|inlineStyleRanges|entityRanges|offset|length|data|884860|对于大型网站，我使用引导，有时(对于简单的网站)，我用@mediaqueries创建所有的风格。这很简单，只要想一想所有代码的百分比。|884861|.container+{
max-width:+1200px;
width:+100%25;
margin:+0+auto;
}|code-block|syntax|javascript|884862|在容器里，你的结构一定有这样的宽度.|884863|.col-1+{
width:+40%25;
float:+left;
}

.col-2+{
width:+60%25;
float:+left;
}

@media+screen+and+(max-width:+320px)+{
.col-1,+.col-2+{+width:+100%25;+}
}|884864|在一些简单的接口中，如果您以这种方式开始开发项目，您将有很大的机会拥有一个完全响应的站点，只使用断点来调整对象的流。|884865|entityMap|0|LINK|mutability|MUTABLE|url|http://getbootstrap.com/|1^0|7|O|0|0|A|2|1|0|0|0|0|0^^$0|@$1|2|3|4|5|6|7|Z|8|@]|9|@$A|10|B|11|1|12]]|C|$]]|$1|D|3|E|5|6|7|13|8|@]|9|@$A|14|B|15|1|16]]|C|$]]|$1|F|3|G|5|H|7|17|8|@]|9|@]|C|$I|J]]|$1|K|3|L|5|6|7|18|8|@]|9|@]|C|$]]|$1|M|3|N|5|H|7|19|8|@]|9|@]|C|$I|J]]|$1|O|3|P|5|6|7|1A|8|@]|9|@]|C|$]]|$1|Q|3|-4|5|6|7|1B|8|@]|9|@]|C|$]]]|R|$S|$5|T|U|V|C|$W|X]]|Y|$5|T|U|V|C|$W|X]]]]

Take a look at this...
<a href="http://getbootstrap.com/" rel="nofollow">http://getbootstrap.com/</a>

For big websites I use <a href="http://getbootstrap.com/" rel="nofollow">Bootstrap</a> and sometimes (for simple websites) I create all the style with some @mediaqueries. It's very simple, just think all the code in percentage.

<pre><code>.container {
max-width: 1200px;
width: 100%;
margin: 0 auto;
}
</code></pre>

Inside the container, your structure must have widths in percentage like this...

<pre><code>.col-1 {
width: 40%;
float: left;
}

.col-2 {
width: 60%;
float: left;
}

@media screen and (max-width: 320px) {
.col-1, .col-2 { width: 100%; }
}
</code></pre>

In some simple interfaces, if you start to develop the project in this way, you will have great chances to have a fully responsive site using break points only to adjust the flow of objects.

blocks|key|884876|text|以下是对常见设备断点的媒体查询。|type|unstyled|depth|inlineStyleRanges|entityRanges|data|884877|++++/*+Smartphones+(portrait+and+landscape)+-----------+*/
@media+only+screen+and+(min-device-width+:+320px)+and+(max-device-width+:+480px)+{
/*+Styles+*/
}

/*+Smartphones+(landscape)+-----------+*/
@media+only+screen+and+(min-width+:+321px)+{
/*+Styles+*/
}

/*+Smartphones+(portrait)+-----------+*/
@media+only+screen+and+(max-width+:+320px)+{
/*+Styles+*/
}

/*+iPads+(portrait+and+landscape)+-----------+*/
@media+only+screen+and+(min-device-width+:+768px)+and+(max-device-width+:+1024px)+{
/*+Styles+*/
}

/*+iPads+(landscape)+-----------+*/
@media+only+screen+and+(min-device-width+:+768px)+and+(max-device-width+:+1024px)+and+(orientation+:+landscape)+{
/*+Styles+*/
}

/*+iPads+(portrait)+-----------+*/
@media+only+screen+and+(min-device-width+:+768px)+and+(max-device-width+:+1024px)+and+(orientation+:+portrait)+{
/*+Styles+*/
}
/**********
iPad+3
**********/
@media+only+screen+and+(min-device-width+:+768px)+and+(max-device-width+:+1024px)+and+(orientation+:+landscape)+and+(-webkit-min-device-pixel-ratio+:+2)+{
/*+Styles+*/
}

@media+only+screen+and+(min-device-width+:+768px)+and+(max-device-width+:+1024px)+and+(orientation+:+portrait)+and+(-webkit-min-device-pixel-ratio+:+2)+{
/*+Styles+*/
}
/*+Desktops+and+laptops+-----------+*/
@media+only+screen++and+(min-width+:+1224px)+{
/*+Styles+*/
}

/*+Large+screens+-----------+*/
@media+only+screen++and+(min-width+:+1824px)+{
/*+Styles+*/
}

/*+iPhone+4+-----------+*/
@media+only+screen+and+(min-device-width+:+320px)+and+(max-device-width+:+480px)+and+(orientation+:+landscape)+and+(-webkit-min-device-pixel-ratio+:+2)+{
/*+Styles+*/
}

@media+only+screen+and+(min-device-width+:+320px)+and+(max-device-width+:+480px)+and+(orientation+:+portrait)+and+(-webkit-min-device-pixel-ratio+:+2)+{
/*+Styles+*/
}|code-block|syntax|javascript|884878|entityMap^0|0|0^^$0|@$1|2|3|4|5|6|7|I|8|@]|9|@]|A|$]]|$1|B|3|C|5|D|7|J|8|@]|9|@]|A|$E|F]]|$1|G|3|-4|5|6|7|K|8|@]|9|@]|A|$]]]|H|$]]

Here is media queries for common device breakpoints.

<pre><code> /* Smartphones (portrait and landscape) ----------- */
@media only screen and (min-device-width : 320px) and (max-device-width : 480px) {
/* Styles */
}

/* Smartphones (landscape) ----------- */
@media only screen and (min-width : 321px) {
/* Styles */
}

/* Smartphones (portrait) ----------- */
@media only screen and (max-width : 320px) {
/* Styles */
}

/* iPads (portrait and landscape) ----------- */
@media only screen and (min-device-width : 768px) and (max-device-width : 1024px) {
/* Styles */
}

/* iPads (landscape) ----------- */
@media only screen and (min-device-width : 768px) and (max-device-width : 1024px) and (orientation : landscape) {
/* Styles */
}

/* iPads (portrait) ----------- */
@media only screen and (min-device-width : 768px) and (max-device-width : 1024px) and (orientation : portrait) {
/* Styles */
}
/**********
iPad 3
**********/
@media only screen and (min-device-width : 768px) and (max-device-width : 1024px) and (orientation : landscape) and (-webkit-min-device-pixel-ratio : 2) {
/* Styles */
}

@media only screen and (min-device-width : 768px) and (max-device-width : 1024px) and (orientation : portrait) and (-webkit-min-device-pixel-ratio : 2) {
/* Styles */
}
/* Desktops and laptops ----------- */
@media only screen and (min-width : 1224px) {
/* Styles */
}

/* Large screens ----------- */
@media only screen and (min-width : 1824px) {
/* Styles */
}

/* iPhone 4 ----------- */
@media only screen and (min-device-width : 320px) and (max-device-width : 480px) and (orientation : landscape) and (-webkit-min-device-pixel-ratio : 2) {
/* Styles */
}

@media only screen and (min-device-width : 320px) and (max-device-width : 480px) and (orientation : portrait) and (-webkit-min-device-pixel-ratio : 2) {
/* Styles */
}
</code></pre>

blocks|key|162481|text|引导程序v3.x使用的屏幕宽度如下：|type|unstyled|depth|inlineStyleRanges|offset|length|style|BOLD|entityRanges|data|162482|Extra+small+devices电话(<768px)+/+.col-xs-|unordered-list-item|CODE|162483|Small+devices片(≥768px)+/+.col-sm-|162484|Medium+devices台式机(≥992px)+/+.col-md-|162485|Large+devices台式机(≥1200px)+/+.col-lg-|162486|因此，这些都是很好的使用和工作在实践中。|162487|entityMap^0|0|8|0|0|J|L|8|W|8|0|0|D|E|8|P|8|0|0|E|H|8|S|8|0|0|D|G|9|S|8|0|0^^$0|@$1|2|3|4|5|6|7|T|8|@$9|U|A|V|B|C]]|D|@]|E|$]]|$1|F|3|G|5|H|7|W|8|@$9|X|A|Y|B|I]|$9|Z|A|10|B|I]|$9|11|A|12|B|I]]|D|@]|E|$]]|$1|J|3|K|5|H|7|13|8|@$9|14|A|15|B|I]|$9|16|A|17|B|I]|$9|18|A|19|B|I]]|D|@]|E|$]]|$1|L|3|M|5|H|7|1A|8|@$9|1B|A|1C|B|I]|$9|1D|A|1E|B|I]|$9|1F|A|1G|B|I]]|D|@]|E|$]]|$1|N|3|O|5|H|7|1H|8|@$9|1I|A|1J|B|I]|$9|1K|A|1L|B|I]|$9|1M|A|1N|B|I]]|D|@]|E|$]]|$1|P|3|Q|5|6|7|1O|8|@]|D|@]|E|$]]|$1|R|3|-4|5|6|7|1P|8|@]|D|@]|E|$]]]|S|$]]

The screen widths Bootstrap v3.x uses are as follows:

<ul>
<li><code>Extra small devices</code> Phones <code>(&lt;768px)</code> / <code>.col-xs-</code></li>
<li><code>Small devices</code> Tablets <code>(≥768px)</code> / <code>.col-sm-</code></li>
<li><code>Medium devices</code> Desktops <code>(≥992px)</code> / <code>.col-md-</code></li>
<li><code>Large devices</code> Desktops <code>(≥1200px)</code> / <code>.col-lg-</code></li>
</ul>

So, these are good to use and work well in practice.

blocks|key|1164131|text|我会提供我的解决方案，因为@muni的解决方案对我来说有点过分。|type|unstyled|depth|inlineStyleRanges|entityRanges|data|1164132|注意:如果要为多个决议添加自定义定义，请如下所示：|1164133|//mobile+generally+++
+@media+screen+and+(max-width:+1199)++{

++++++.irns-desktop{
++++++++display:+none;
++++++}

++++++.irns-mobile{
++++++++display:+initial;
++++++}

++++}|code-block|syntax|javascript|1164134|一定要在精确定义的基础上添加这些定义，这样它就正确地级联了(例如，“智能手机肖像”必须赢，而不是“移动一般”)|1164135|//here+all+definitions+to+apply+globally


//desktop
@media+only+screen
and+(min-width+:+1200)+{


}

//tablet+landscape
@media+screen+and+(min-width:+1024px)+and+(max-width:+1600px)++{

}+//+end+media+query

//tablet+portrait
@media+screen+and+(min-width:+768px)+and+(max-width:+1023px)++{

}//end+media+definition


//smartphone+landscape
@media+screen+and+(min-width:+480px)+and+(max-width:+767px)++{

}//end+media+query



//smartphone+portrait
@media+screen+/*and+(min-width:+320px)*/
and+(max-width:+479px)+{

}

//end+media+query|1164136|entityMap^0|0|0|0|0|0^^$0|@$1|2|3|4|5|6|7|O|8|@]|9|@]|A|$]]|$1|B|3|C|5|6|7|P|8|@]|9|@]|A|$]]|$1|D|3|E|5|F|7|Q|8|@]|9|@]|A|$G|H]]|$1|I|3|J|5|6|7|R|8|@]|9|@]|A|$]]|$1|K|3|L|5|F|7|S|8|@]|9|@]|A|$G|H]]|$1|M|3|-4|5|6|7|T|8|@]|9|@]|A|$]]]|N|$]]

i will provide mine because @muni s solution was a bit overkill for me

note: if you want to add custom definitions for several resolutions together, say something like this:

<pre><code>//mobile generally 
 @media screen and (max-width: 1199) {

 .irns-desktop{
 display: none;
 }

 .irns-mobile{
 display: initial;
 }

 }
</code></pre>

Be sure to add those definitions on top of the accurate definitions, so it cascades correctly (e.g. 'smartphone portrait' must win versus 'mobile generally')

<pre><code>//here all definitions to apply globally


//desktop
@media only screen
and (min-width : 1200) {


}

//tablet landscape
@media screen and (min-width: 1024px) and (max-width: 1600px) {

} // end media query

//tablet portrait
@media screen and (min-width: 768px) and (max-width: 1023px) {

}//end media definition


//smartphone landscape
@media screen and (min-width: 480px) and (max-width: 767px) {

}//end media query



//smartphone portrait
@media screen /*and (min-width: 320px)*/
and (max-width: 479px) {

}

//end media query
</code></pre>

I'm working on responsive designed web site using media queries. But i do not know how to take a good width set. 

<img src="https://i.stack.imgur.com/glnqW.png" alt="device resolution table">

As you can see on this table, there is a lot of different resolution even for a single type of device. And as resolution is coming bigger and bigger on mobile device, it is hard to know what design to apply for a specific resolution. 

For now, I'm using this :

Mobile First

@media screen and (min-width:720px) => Phablet

@media screen and (min-width:768px) => Tablet

@media screen and (min-width:1024px) => Desktop

Thank you for any advice or recomendations !

Responsive design with media query : screen size?

翻译质量差，导致语言生硬或混乱。

没有提供实际的解决方法或示例。

解答不清晰，无法理解或解决问题。

页面排版不美观，阅读体验差。

文章

问答

视频

学习中心

腾讯云实验室

直播

竞赛

腾讯云代码分析专区

腾讯iOA零信任安全管理系统专区

腾讯云架构师技术同盟交流圈

腾讯云数据库专区

腾讯云顾问专区

腾讯云原生专区

腾讯混元专区

腾讯云TCE专区

腾讯云Lighthouse专区

腾讯云HAI专区

腾讯云Edgeone专区

腾讯云存储专区

腾讯云智能专区

腾讯轻联专区 

腾讯云开发专区

TAPD专区

腾讯轻量云游戏服专区

腾讯云最具价值专家

腾讯云架构师技术同盟

腾讯云创作之星

腾讯云开发者先锋

腾讯云代码助手

云原生构建

TAPD 敏捷项目管理

Cloud Studio

SDK中心

API中心

命令行工具

涵盖代码开发、场景应用、自动测试全流程，助你从零构建专属AI助手

一站式MCP教程库，解锁AI应用新玩法

我正在致力于响应设计的网站使用媒体查询。但是，我不知道如何采取一个好的宽度设置。​​正如您在这张表上所看到的，即使对于单一类型的设备，也有许多不同的分辨率。而且，随着移动设备的分辨率越来越大，很难知道具体的解决方案是什么设计。现在，我用的是：移动第一@媒体屏幕和(最小宽度:720 and ) => Phablet@媒体...

问媒体查询响应设计:屏幕大小？
EN

Stack Overflow用户

社区

活动

圈层

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问媒体查询响应设计:屏幕大小？EN