CSS 带有媒体查询的响应式设计：屏幕尺寸？

Responsive design with media query : screen size?

提问by oOnez

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

我正在使用媒体查询开发响应式设计的网站。但我不知道如何设置一个好的宽度。

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 屏幕和 (min-width:720px) => Phablet

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

@media 屏幕和 (min-width:768px) => 平板电脑

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

@media 屏幕和 (min-width:1024px) => 桌面

Thank you for any advice or recomendations !

感谢您的任何建议或推荐！

回答by Itay Gal

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

响应式网页设计 (RWD) 是一种网页设计方法，旨在打造网站以提供最佳观看体验

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 user agentvalue, 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.

如果您想为每个设备设置网站样式，您可以使用该user agent值，但不建议这样做，因为在使用屏幕尺寸时，您必须努力维护新设备、新浏览器、浏览器版本等的代码，这一切都无关紧要。

You can see some standard resolutions in this link.

您可以在此链接中看到一些标准分辨率。

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.

为什么？正如我之前所说，屏幕分辨率的变化很大，如果您要设计一个以 320 像素为目标的移动版本，您的网站将不会针对 350 像素或 400 像素屏幕进行优化。

TIPS

提示

1. 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.
2. Use percentage instead of pixels, it will make your work easier.

1. 设计响应式页面时，在桌面浏览器中打开它并更改浏览器的宽度，以查看屏幕的宽度如何影响您的布局和样式。
2. 使用百分比而不是像素，它会让你的工作更轻松。

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.

我有一个有 5 列的表。当屏幕尺寸大于 600 像素时，数据看起来不错，所以我在 600 像素处添加一个断点，并在屏幕尺寸较小时隐藏 1 个不太重要的列。台式机、平板等大屏设备会显示所有数据，而小屏手机会显示部分数据。

---

---

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.

与问题没有直接关系，但在响应式设计中很重要。响应式设计还与用户在使用手机或台式机时具有不同的心态有关。例如，当您在晚上打开银行网站并查看您的股票时，您希望屏幕上显示尽可能多的数据。当您在午休时间打开同一页面时，您可能希望看到一些重要的细节，而不是去年的所有图表。

回答by muni

Here is media queries for common device breakpoints.

这是常见设备断点的媒体查询。

    /* 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 */
}

回答by Atrix

The screen widths Bootstrap v3.xuses are as follows:

Bootstrap v3.x使用的屏幕宽度如下：

• Extra small devicesPhones(<768px)/ .col-xs-
• Small devicesTablets(≥768px)/ .col-sm-
• Medium devicesDesktops(≥992px)/ .col-md-
• Large devicesDesktops(≥1200px)/ .col-lg-

• Extra small devices电话(<768px)/.col-xs-
• Small devices片剂(≥768px)/.col-sm-
• Medium devices台式机(≥992px)/.col-md-
• Large devices台式机(≥1200px)/.col-lg-

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

因此，这些很好用并且在实践中运行良好。

回答by Ico Portela

Take a look at this... http://getbootstrap.com/

看看这个... http://getbootstrap.com/

For big websites I use Bootstrapand sometimes (for simple websites) I create all the style with some @mediaqueries. It's very simple, just think all the code in percentage.

对于大型网站，我使用Bootstrap，有时（对于简单网站）我使用一些 @mediaqueries 创建所有样式。很简单，只要把所有的代码都想成百分比。

.container {
max-width: 1200px;
width: 100%;
margin: 0 auto;
}

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

在容器内部，您的结构必须具有像这样的百分比宽度...

.col-1 {
width: 40%;
float: left;
}

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

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

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.

在一些简单的界面中，如果您以这种方式开始开发项目，您将有很大的机会拥有一个完全响应的站点，仅使用断点来调整对象的流动。

回答by Toskan

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

我会提供我的，因为@muni 的解决方案对我来说有点矫枉过正

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

注意：如果您想为多个分辨率添加自定义定义，请这样说：

//mobile generally   
 @media screen and (max-width: 1199)  {

      .irns-desktop{
        display: none;
      }

      .irns-mobile{
        display: initial;
      }

    }

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')

请务必在准确定义之上添加这些定义，以便正确级联（例如，“智能手机肖像”必须胜过“一般移动”）

//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