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

Question

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

正如您在此表中看到的那样，即使是单一类型的设备，也有很多不同的分辨率。而且随着移动设备上的分辨率越来越大，很难知道要为特定分辨率应用什么设计。

目前，我正在使用这个：

移动优先

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

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

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

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

Answer 1

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

在设计响应式网站时，您应该考虑屏幕大小而不是设备类型。媒体查询可以帮助您做到这一点。

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

你可以看到一些标准分辨率in this link。

但是，在我看来，您应该首先设计您的网站布局，然后才使用媒体查询对其进行调整以适应可能的屏幕尺寸。

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

提示

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

示例

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

---

心态

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

Answer 2

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

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

Answer 3

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

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

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

Answer 4

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

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

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

在容器内，你的结构必须有这样的百分比宽度...

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

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

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

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

Answer 5

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

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

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

      .irns-desktop{
        display: none;
      }

      .irns-mobile{
        display: initial;
      }

    }

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

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