媒体查询：如何针对台式机、平板电脑和手机？

Question

我一直在研究媒体查询，但我仍然不太了解如何针对特定尺寸的设备。

我希望能够瞄准台式机、平板电脑和手机。我知道会有一些差异，但最好有一个通用系统，可以用于针对这些设备。

我发现了一些示例：

#手机仅屏幕和（最小宽度：480px）#平板电脑仅屏幕和（最小宽度：768px）#桌面仅屏幕和（最小宽度：992px）#巨大仅屏幕和（最小宽度：1280px）

或者：

#电话仅屏幕和（最大宽度：320px）#平板电脑仅屏幕和（最小宽度：321px）以及（最大宽度：768px）#桌面仅屏幕和（最小宽度：769px）

每个设备的断点应该是什么？

Answer 1

IMO这些是最好的断点：

@媒体（最小宽度：320px）{/*智能手机、肖像iPhone、肖像480x320手机（Android）*/}@媒体（最小宽度：480px）{/*智能手机、Android手机、横向iPhone*/}@媒体（最小宽度：600px）{/*肖像平板电脑、肖像iPad、电子阅读器（Nook/Kindle）、横向800x480手机（Android）*/}@媒体（最小宽度：801px）{/*平板电脑、横向iPad、lo-res笔记本电脑和台式机*/}@媒体（最小宽度：1025px）{/*大型横向平板电脑、笔记本电脑和台式机*/}@媒体（最小宽度：1281px）{/*hi-res笔记本电脑和台式机*/}

编辑：经过优化，可以更好地使用960个网格：

@媒体（最小宽度：320px）{/*智能手机、iPhone、肖像480x320手机*/}@媒体（最小宽度：481px）{/*肖像电子阅读器（Nook/Kindle），较小的平板电脑@600或@640宽。*/}@媒体（最小宽度：641px）{/*肖像平板电脑、肖像iPad、横向电子阅读器、横向800x480或854x480手机*/}@媒体（最小宽度：961px）{/*平板电脑、横向iPad、lo-res笔记本电脑和台式电脑*/}@媒体（最小宽度：1025px）{/*大型横向平板电脑、笔记本电脑和台式机*/}@媒体（最小宽度：1281px）{/*hi-res笔记本电脑和台式机*/}

实际上，许多设计师将像素转换为相对长度单位s、 主要是因为相对长度单位我们可以提供更好的缩放效果。以标准缩放1em===16px，将像素乘以1 em/16像素得到相对长度单位s.例如，320像素===20厘米.

针对这一评论，最小宽度是“移动优先”设计的标准，从设计最小的屏幕开始，然后添加不断增加的媒体查询，在越来越大的屏幕上工作。

不管你是否喜欢最小值-,最大值-或者它们的组合，要知道规则的顺序，记住如果多个规则匹配同一个元素，后面的规则将覆盖前面的规则。

Answer 2

不要针对特定的设备或尺寸！

这个普遍智慧是不针对特定设备或尺寸，但要重新定义术语“断点”：

• 为开发网站移动优先使用百分比或ems，而不是像素，
• 然后在更大的视窗中尝试，并注意它开始失败的地方，
• 重新设计布局并添加CSS媒体查询以处理损坏的部分，
• 重复该过程，直到到达下一个断点。

你可以使用responsivepx.com网站查找“自然”断点，如马克·德拉蒙德的《断点已死》.

使用自然断点

然后，“断点”成为移动设计开始“中断”的实际点即不再可用或视觉上令人愉悦。一旦你有了一个工作良好的移动站点，在没有媒体查询的情况下，你就可以不再担心特定的大小，只需添加处理连续较大视口的媒体查询即可。

如果你不想把设计固定在精确的屏幕尺寸上，这种方法的工作原理是无需瞄准特定设备. The设计本身在每个断点的完整性确保它可以承受任何大小。换言之如果菜单/内容部分/任何东西停止以特定大小可用，为该大小设计断点,不用于特定设备大小。

请参阅Lyza Gardner在行为断点以及Zeldman关于Ethan Marcotte和响应式网页设计是如何演变的从最初的想法。

使用语义标记

此外DOM结构更简单、语义更丰富具有导航,收割台,主要的,部分,页脚等（避免诸如div class=“header”带有嵌套内部div公司标签）更容易设计响应性，尤其是通过使用CSS网格布局（Sarah Drasner的电网发电机是一个很好的工具）和柔性接线盒根据您的RWD设计计划安排和重新订购。

Answer 3

如果你想定位一个设备，那么只需写最小设备宽度例如：

对于iPhone

@仅媒体屏幕和（最小设备宽度：480px）{}

对于平板电脑

@仅媒体屏幕和（最小设备宽度：768px）{}

这里有一些好文章：

• 如何使您的网站适合Apple iPad
• CSS3媒体查询

Answer 4

1. 我用过这个网站找到解决方案并根据实际数字开发CSS。我的数字与上面的答案相差很大，只是我的CSS实际上击中了所需的设备。

2. 另外，在您的媒体查询之后立即使用这段调试代码例如：

   @仅媒体屏幕和（最小宽度：769px）和（最大宽度：1281px）{/*适用于10英寸平板电脑屏幕*/正文：：之前{内容：“平板电脑向一些桌面媒体查询（769>1281）已发射”；font-weight：粗体；显示：块；文本对齐：居中；背景：rgba（255255,0,0.9）；/*半透明黄色*/位置：绝对；顶部：0；左：0；右：0；z指数：99；}}

   在每个单独的媒体查询中添加此调试项，您将看到应用了什么查询。

Answer 5

推特引导推荐的最佳断点

/*定制，iPhone Retina*/@仅媒体屏幕和（最小宽度：320px）{}/*超小型设备、手机*/@仅媒体屏幕和（最小宽度：480px）{}/*小型设备、平板电脑*/@仅媒体屏幕和（最小宽度：768px）{}/*中型设备、台式机*/@仅媒体屏幕和（最小宽度：992px）{}/*大型设备、宽屏幕*/@仅媒体屏幕和（最小宽度：1200px）{}

资料来源：https://scotch.io/tutorials/default-sizes-for-twitter-bootstraps-media-queries

Answer 6

常见设备断点的媒体查询

/*智能手机（纵向和横向）----------*/@仅媒体屏幕和（最小设备宽度：320px）和（最大设备宽度：480px）{/*样式*/}/*智能手机（横向）------------*/@仅媒体屏幕和（最小宽度：321px）{/*样式*/}/*智能手机（纵向）------------*/@仅媒体屏幕和（最大宽度：320px）{/*样式*/}/*iPad（纵向和横向）----------*/@仅媒体屏幕和（最小设备宽度：768px）和（最大设备宽度：1024px）{/*样式*/}/*iPad（横向）----------*/@仅媒体屏幕和（最小设备宽度：768px）和（最大设备宽度：1024px）以及（方向：横向）{/*样式*/}/*iPad（纵向）------------*/@仅媒体屏幕和（最小设备宽度：768px）和（最大设备宽度：1024px）以及（方向：纵向）{/*样式*/}/**********iPad 3**********/@仅媒体屏幕和（最小设备宽度：768px）和（最大设备宽度：1024px）以及（方向：横向）和（-webkit-min设备像素比：2）{/*样式*/}@仅媒体屏幕和（最小设备宽度：768px）和（最大设备宽度：1024px）以及（方向：纵向）和（-webkit-min设备像素比：2）{/*样式*/}/*台式机和笔记本电脑----------------*/@仅媒体屏幕和（最小宽度：1224px）{/*样式*/}/*大屏幕---------------*/@仅媒体屏幕和（最小宽度：1824px）{/*样式*/}/*iPhone 4---------------*/@仅媒体屏幕和（最小设备宽度：320px）和（最大设备宽度：480px）以及（方向：横向）和（-webkit-min设备像素比：2）{/*样式*/}@仅媒体屏幕和（最小设备宽度：320px）和（最大设备宽度：480px）以及（方向：纵向）和（-webkit-min设备像素比：2）{/*样式*/}/*iPhone 5-----------*/@仅媒体屏幕和（最小设备宽度：320px）和（最大设备高度：568px）以及（方向：横向）和（-webkit-device-pixel-ratio:2）{/*样式*/}@仅媒体屏幕和（最小设备宽度：320px）和（最大设备高度：568px）以及（方向：纵向）和（-webkit-device-pixel-ratio:2）{/*样式*/}/*iPhone 6------------*/@仅媒体屏幕和（最小设备宽度：375px）和（最大设备高度：667px）以及（方向：横向）和（-webkit-device-pixel-ratio:2）{/*样式*/}@仅媒体屏幕和（最小设备宽度：375px）和（最大设备高度：667px）以及（方向：纵向）和（-webkit-device-pixel-ratio:2）{/*样式*/}/*iPhone 6+------------*/@仅媒体屏幕和（最小设备宽度：414px）和（最大设备高度：736px）以及（方向：横向）和（-webkit-device-pixel-ratio:2）{/*样式*/}@仅媒体屏幕和（最小设备宽度：414px）和（最大设备高度：736px）以及（方向：纵向）和（-webkit-device-pixel-ratio:2）{/*样式*/}/*三星Galaxy S3----------*/@仅媒体屏幕和（最小设备宽度：320px）和（最大设备高度：640px）以及（方向：横向）和（-webkit设备像素比：2）{/*样式*/}@仅媒体屏幕和（最小设备宽度：320px）和（最大设备高度：640px）以及（方向：纵向）和（-webkit设备像素比：2）{/*样式*/}/*三星Galaxy S4----------*/@仅媒体屏幕和（最小设备宽度：320px）和（最大设备高度：640px）以及（方向：横向）和（-webkit-device-pixel-ratio：3）{/*样式*/}@仅媒体屏幕和（最小设备宽度：320px）和（最大设备高度：640px）以及（方向：纵向）和（-webkit-device-pixel-ratio：3）{/*样式*/}/*三星Galaxy S5-----------*/@仅媒体屏幕和（最小设备宽度：360px）和（最大设备高度：640px）以及（方向：横向）和（-webkit-device-pixel-ratio：3）{/*样式*/}@仅媒体屏幕和（最小设备宽度：360px）和（最大设备高度：640px）以及（方向：纵向）和（-webkit-device-pixel-ratio：3）{/*样式*/}

Answer 7

1. 超小型设备（手机，高达480px）
2. 小型设备（平板电脑，768px及以上）
3. 中型设备（大型横向平板电脑、笔记本电脑和台式机，992px及以上）
4. 大型设备（大型台式机，1200px及以上）
5. 肖像电子阅读器（Nook/Kindle），较小的平板电脑-最小宽度：481px
6. 肖像平板电脑、肖像iPad、横向电子阅读器-最小宽度：641px
7. 平板电脑、横向iPad、lo-res笔记本电脑-最小宽度：961px
8. HTC One设备宽度：360px设备高度：640px网络工具包设备像素比：3
9. 三星Galaxy S2设备宽度：320px设备高度：534px-webkit-device-pixel-ratio:1.5（min--moz-device-piquel-ratio:1.5），（-o-min-device-pixel-ratio:3/2），（最小设备像素比：1.5
10. 三星Galaxy S3设备宽度：320px设备高度：640px-webkit-device-pixel-ratio:2（min--moz-device-piquel-ratio:20），-旧版Firefox浏览器（Firefox 16之前）-
11. 三星Galaxy S4设备宽度：320px设备高度：640px网络工具包设备像素比：3
12. LG Nexus 4设备宽度：384px设备高度：592px网络工具包设备像素比：2
13. 华硕Nexus 7设备-宽度：601px设备-高度：906px-webkit-min-device-pixel-ratio:1.331）和（-webkit-max-device-piquel-ratio:1.332）
14. iPad 1和2，iPad Mini设备宽度：768px设备高度：1024px网络工具包设备像素比：1
15. iPad 3和4设备宽度：768px设备高度：1024px网络设备像素比：2）
16. iPhone 3G设备宽度：320px设备高度：480px网络工具包设备像素比：1）
17. iPhone 4设备宽度：320px设备高度：480px网络工具包设备像素比：2）
18. iPhone 5设备宽度：320px设备高度：568px网络工具包设备像素比：2）

Answer 8

这只适用于那些尚未对其网站进行“手机首创”设计并寻求快速临时解决方案的人。

对于移动电话

@媒体（最大宽度：480px）{}

对于平板电脑

@媒体（最大宽度：960px）{}

适用于笔记本电脑/台式机

@媒体（最小宽度：1025px）{}

适用于Hi-Res笔记本电脑

@媒体（最大宽度：1280px）{}

Answer 9

漂亮又简单

/*移动设备*/@媒体（最大宽度：480px）{foo>栏{}}/*低分辨率平板电脑和iPad*/@媒体（最小宽度：481px）和（最大宽度：767px）{foo>栏{}}/*平板电脑iPad（纵向）*/@媒体（最小宽度：768px）和（最大宽度：1024px）{foo>栏{}}/*笔记本电脑和台式机*/@介质（最小宽度：1025px）和（最大宽度：1280px）{foo>栏{}}/*Big boi监视器*/@介质（最小宽度：1281px）{foo>栏{}}

Answer 10

现在最常见的是观看视网膜屏幕设备，换句话说：具有高分辨率和极高像素密度（但通常小于6英寸物理尺寸）的设备。这就是为什么您需要在CSS上使用视网膜显示专门的媒体查询。这是我能找到的最完整的例子：

@仅媒体屏幕和（最小宽度：320px）{/*小屏幕，非视网膜*/}@媒体仅屏幕和（-webkit-min-device-pixel-ratio:2）和（最小宽度：320px），仅屏幕和（最小--最大设备像素比：2）和（最小宽度：320px），仅屏幕和（-o-min-device-pixel-ratio:2/1）和（min-width:320px），仅屏幕和（最小设备像素比：2）和（最小宽度：320px），仅屏幕和（最小分辨率：192dpi）和（最小宽度：320px），仅屏幕和（最小分辨率：2dppx）和（最小宽度：320px）{/*小屏幕、视网膜、覆盖上述媒体查询的内容*/}@仅媒体屏幕和（最小宽度：700px）{/*中屏幕，非视网膜*/}@媒体仅屏幕和（-webkit-min-device-pixel-ratio:2）和（最小宽度：700px），仅屏幕和（最小--最大设备像素比：2）和（最小宽度：700px），仅屏幕和（-o-min-device-pixel-ratio:2/1）和（min-width:700px），仅屏幕和（最小设备像素比：2）和（最小宽度：700px），仅屏幕和（最小分辨率：192dpi）和（最小宽度：700px），仅屏幕和（最小分辨率：2dppx）和（最小宽度：700px）{/*中等屏幕，视网膜，要覆盖媒体查询的内容*/}@仅媒体屏幕和（最小宽度：1300px）{/*大屏幕，非视网膜*/}@媒体仅屏幕和（-webkit最小设备像素比：2）以及（最小宽度：1300px），仅屏幕和（最小--最大设备像素比：2）和（最小宽度：1300px），仅屏幕和（-o-min-device-pixel-ratio:2/1）和（min-width:1300px），仅屏幕和（最小设备像素比：2）和（最小宽度：1300px），仅屏幕和（最小分辨率：192dpi）和（最小宽度：1300px），仅屏幕和（最小分辨率：2dppx）和（最小宽度：1300px）{/*大屏幕、视网膜、覆盖上述媒体查询的内容*/}

资料来源：CSS-Tricks网站

Answer 11

由于有许多不同的屏幕尺寸总是在变化，而且最有可能总是在改变，所以最好的方法是根据断点和媒体 查询在您的设计上。

最简单的方法是抓取完成的桌面设计并在web浏览器中打开它。收缩屏幕缓慢地使它更窄。观察设计何时开始，“中断”或者看起来很可怕很局促。此时需要一个带有媒体查询的断点。

通常为桌面、平板电脑和手机创建三组媒体查询。但是，如果你的设计在这三个方面都很好，为什么还要为添加三个不必要的不同媒体查询的复杂性而烦恼呢。按需操作！

Answer 12

一个额外的功能是，您还可以在媒体的属性<链接>标签。

<link href=“style.css”rel=“stylesheet”><link href=“justForFrint.css”rel=“stylesheet”media=“print”><link href=“deviceSizeDepending.css”rel=“stylesheet”media=“（最小宽度：40em）”>

这样，浏览器将下载所有CSS资源，无论媒体属性。区别在于，如果媒体属性的media-query的计算结果为假那么.css文件和他的内容将不会被渲染阻塞。

因此，建议使用媒体中的属性<链接>标签，因为它保证了更好的用户体验。

在这里你可以阅读谷歌关于这个问题的文章https://developers.google.com/web/fundationals/performance/critical-rendering-path/render-blocking-css

一些工具可以帮助您根据媒体查询自动分离不同文件中的css代码

网络包https://www.npmjs.com/package/media-query-plugin网址 https://www.npmjs.com/package/media-querysplitting-plugin网站

发布CSShttps://www.npmjs.com/package/postss-extract-media-query

Answer 13

这不是像素数的问题，而是屏幕上字符的实际大小（以毫米或英寸为单位）的问题，这取决于像素密度。因此，“最小宽度：”和“最大宽度：”是无用的。关于这个问题的完整解释如下：设备像素比到底是多少？

“@media”查询会考虑像素数和设备像素比率，从而产生“虚拟分辨率”，这是您在设计页面时必须考虑的：如果您的字体是10px固定宽度，“虚拟水平分辨率”是300px，则需要30个字符来填充一行。

Answer 14

对我来说，检测设备是否为移动设备的最佳解决方案：

@媒体（指针：无），（指针：粗略）{}

Answer 15

如果你想创建更具体的媒体查询，这里是从这个链接复制的IPhone示例https://css-tricks.com/snippets/css/media-queries-for-standard-devices网站/您可以通过此链接找到更多设备的媒体查询）

/*-------------iPhone 4和4S-------------*//*纵向和横向*/@仅媒体屏幕和（最小设备宽度：320px）和（最大设备宽度：480px）和（-webkit-min-device-pixel-ratio:2）{}/*纵向*/@仅媒体屏幕和（最小设备宽度：320px）和（最大设备宽度：480px）和（-webkit-min-device-pixel-ratio:2）和（方向：纵向）{}/*景观*/@仅媒体屏幕和（最小设备宽度：320px）和（最大设备宽度：480px）和（-webkit-min-device-pixel-ratio:2）和（方向：横向）{}/*------------iPhone 5、5S、5C和5SE------------*//*纵向和横向*/@仅媒体屏幕和（最小设备宽度：320px）和（最大设备宽度：568px）和（-webkit-min-device-pixel-ratio:2）{}/*纵向*/@仅媒体屏幕和（最小设备宽度：320px）和（最大设备宽度：568px）和（-webkit-min-device-pixel-ratio:2）和（方向：纵向）{}/*横向*/@仅媒体屏幕和（最小设备宽度：320px）和（最大设备宽度：568px）和（-webkit-min-device-pixel-ratio:2）和（方向：横向）{}/*------------iPhone 6、6S、7和8------------*//*纵向和横向*/@仅媒体屏幕和（最小设备宽度：375px）和（最大设备宽度：667px）和（-webkit-min-device-pixel-ratio:2）{}/*纵向*/@仅媒体屏幕和（最小设备宽度：375px）和（最大设备宽度：667px）和（-webkit-min-device-pixel-ratio:2）和（方向：纵向）{}/*横向*/@仅媒体屏幕和（最小设备宽度：375px）和（最大设备宽度：667px）和（-webkit-min-device-pixel-ratio:2）和（方向：横向）{}/*------------iPhone 6+、7+和8+------------*//*纵向和横向*/@仅媒体屏幕和（最小设备宽度：414px）和（最大设备宽度：736px）和（-webkit-min-device-pixel-ratio:3）{}/*纵向*/@仅媒体屏幕和（最小设备宽度：414px）和（最大设备宽度：736px）和（-webkit-min-device-pixel-ratio:3）和（方向：纵向）{}/*横向*/@仅媒体屏幕和（最小设备宽度：414px）和（最大设备宽度：736px）和（-webkit-min-device-pixel-ratio:3）和（方向：横向）{}/*------------iPhone X------------*//*纵向和横向*/@仅媒体屏幕和（最小设备宽度：375px）和（最大设备宽度：812px）和（-webkit-min-device-pixel-ratio:3）{}/*纵向*/@仅媒体屏幕和（最小设备宽度：375px）和（最大设备宽度：812px）和（-webkit-min-device-pixel-ratio:3）和（方向：纵向）{}/*横向*/@仅媒体屏幕和（最小设备宽度：375px）和（最大设备宽度：812px）和（-webkit-min-device-pixel-ratio:3）和（方向：横向）{}

Answer 16

• 超小型设备~手机（<768px）
• 小型设备~平板电脑（>=768px）
• 中型设备~桌面（>=992px）
• 大型设备~台式机（>=1200像素）

Answer 17

我用下面的一个来做我的工作。

/*智能手机（纵向和横向）----------*/@仅媒体屏幕和（最小设备宽度：320px）和（最大设备宽度：480px）{/*样式*/}/*智能手机（横向）------------*/@仅媒体屏幕和（最小宽度：321px）{/*样式*/}/*智能手机（纵向）------------*/@仅媒体屏幕和（最大宽度：320px）{/*样式*/}/*iPad（纵向和横向）----------*/@仅媒体屏幕和（最小设备宽度：768px）和（最大设备宽度：1024px）{/*样式*/}/*iPad（横向）----------*/@仅媒体屏幕和（最小设备宽度：768px）和（最大设备宽度：1024px）以及（方向：横向）{/*样式*/}/*iPad（人像）---------------*/@仅媒体屏幕和（最小设备宽度：768px）和（最大设备宽度：1024px）以及（方向：纵向）{/*样式*/}/**********iPad 3**********/@仅媒体屏幕和（最小设备宽度：768px）和（最大设备宽度：1024px）以及（方向：横向）和（-webkit最小设备像素比：2）{/*样式*/}@仅媒体屏幕和（最小设备宽度：768px）和（最大设备宽度：1024px）以及（方向：纵向）和（-webkit-min设备像素比：2）{/*样式*/}/*台式机和笔记本电脑------------*/@仅媒体屏幕和（最小宽度：1224px）{/*样式*/}/*大屏幕----------*/@仅媒体屏幕和（最小宽度：1824px）{/*样式*/}/*iPhone 4-----------*/@仅媒体屏幕和（最小设备宽度：320px）和（最大设备宽度：480px）以及（方向：横向）和（-webkit-min设备像素比：2）{/*样式*/}@仅媒体屏幕和（最小设备宽度：320px）和（最大设备宽度：480px）以及（方向：纵向）和（-webkit-min设备像素比：2）{/*样式*/}/*iPhone 5-----------*/@仅媒体屏幕和（最小设备宽度：320px）和（最大设备高度：568px）以及（方向：横向）和（-webkit-device-pixel-ratio:2）{/*样式*/}@仅媒体屏幕和（最小设备宽度：320px）和（最大设备高度：568px）以及（方向：纵向）和（-webkit-device-pixel-ratio:2）{/*样式*/}/*iPhone 6、7、8*/@仅媒体屏幕和（最小设备宽度：375px）和（最大设备高度：667px）以及（方向：横向）和（-webkit-device-pixel-ratio:2）{/*样式*/}@仅媒体屏幕和（最小设备宽度：375px）和（最大设备高度：667px）以及（方向：纵向）和（-webkit-device-pixel-ratio:2）{/*样式*/}/*iPhone 6+、7+、8+-----------*/@仅媒体屏幕和（最小设备宽度：414px）和（最大设备高度：736px）以及（方向：横向）和（-webkit-device-pixel-ratio:2）{/*样式*/}@仅媒体屏幕和（最小设备宽度：414px）和（最大设备高度：736px）以及（方向：纵向）和（-webkit-device-pixel-ratio:2）{/*样式*/}/*iPhone X-----------*/@仅媒体屏幕和（最小设备宽度：375px）和（最大设备高度：812px）以及（方向：横向）和（-webkit-device-pixel-ratio：3）{/*样式*/}@仅媒体屏幕和（最小设备宽度：375px）和（最大设备高度：812px）以及（方向：纵向）和（-webkit-device-pixel-ratio：3）{/*样式*/}/*iPhone XS Max，XR---------------*/@仅媒体屏幕和（最小设备宽度：414px）和（最大设备高度：896px）以及（方向：横向）和（-webkit-device-pixel-ratio：3）{/*样式*/}@仅媒体屏幕和（最小设备宽度：414px）和（最大设备高度：896px）以及（方向：纵向）和（-webkit设备像素比：3）{/*样式*/}/*三星Galaxy S3----------*/@仅媒体屏幕和（最小设备宽度：320px）和（最大设备高度：640px）以及（方向：横向）和（-webkit设备像素比：2）{/*样式*/}@仅媒体屏幕和（最小设备宽度：320px）和（最大设备高度：640px）以及（方向：纵向）和（-webkit设备像素比：2）{/*样式*/}/*三星Galaxy S4----------*/@仅媒体屏幕和（最小设备宽度：320px）和（最大设备高度：640px）以及（方向：横向）和（-webkit-device-pixel-ratio：3）{/*样式*/}@仅媒体屏幕和（最小设备宽度：320px）和（最大设备高度：640px）以及（方向：纵向）和（-webkit-device-pixel-ratio：3）{/*样式*/}/*三星Galaxy S5-----------*/@仅媒体屏幕和（最小设备宽度：360px）和（最大设备高度：640px）以及（方向：横向）和（-webkit-device-pixel-ratio：3）{/*样式*/}@仅媒体屏幕和（最小设备宽度：360px）和（最大设备高度：640px）以及（方向：纵向）和（-webkit-device-pixel-ratio：3）{/*样式*/}

Answer 18

有一种方法可以简化这一切：

<500px:“s”垂直电话

>500px:“l”水平模式下的台式机、电视、平板电脑和手机

注意：我选择500的原因是因为你能改变桌面窗口宽度的最小值是500，因此任何较大的都是桌面，较小的都是垂直移动的。

你可以只使用这些断点来设计你的网站，因为桌面、电视、平板电脑和水平电话之间总是会有重叠。如果你的设计在小桌面上看起来不错（例如：600px），那么它在其他设备上也会看起来不错。

可以再添加1个断点，以便小桌面和平板电脑具有更好的设计和更大的空间：

<500px:“s”立式电话

500像素-1200像素：“m”小型桌面、平板电脑、卧式电话

>1200像素：“l”大型桌面，水平平板电脑

媒体询问：

/*小于500像素*/@仅媒体屏幕和（最大宽度：499px）{}/*500-1200万*/@仅媒体屏幕和（最小宽度：500px）和（最大宽度：1199px）{}/*>1200像素L*/@仅媒体屏幕和（最小宽度：1200px）{}

Answer 19

桌面上的行为不会更改。但在平板电脑和手机上，我扩展了导航栏以覆盖大的徽标图像。注：使用页边距（顶部和底部）与您的徽标高度所需的一样多。

在我的案例中，60px的顶部和底部工作得很好！

@媒体（最大宽度：768px）{.navbar-toggle{边距：60px 0；}}

检查导航栏在这里.

Answer 20

$xs：“超小型”；$s：“小”；$m：“中等”；$l：“大”；$xl：“超大”；@mixin响应（$breakpoint）{@if（$breakpoint==$xs）{@仅媒体屏幕和（最小宽度：320px）和（最大宽度：479px）{@content；}}@if（$breakpoint==$s）{@仅媒体屏幕和（最小宽度：480px）和（最大宽度：767px）{@content；}}@if（$breakpoint==$m）{@仅媒体屏幕和（最小宽度：768px）和（最大宽度：991px）{@content；}}@if（$breakpoint==$l）{@仅媒体屏幕和（最小宽度：992px）和（最大宽度：1199px）{@content；}}@if（$breakpoint==$xl）{@仅媒体屏幕和（最小宽度：1200px）{@content；}}}

你也可以像Galaxy fold一样，为小于320px的sceen再添加一个

Answer 21

这不仅与分辨率有关，还需要找到设备的DPR：
什么是我的屏幕解决方案“设备像素比率（DPR）是设备制造商给出的数字，用于HiDPI（每英寸高点数）或Retina（苹果商标）显示器”

媒体查询示例：（最小分辨率：3.0dppx）

Answer 22

@媒体（最大宽度：767px）{.container{width:100%}*{color:green；}-移动}@媒体（最小宽度：768px）{.container{width:100%}*{color:pink}-桌面}@媒体（最小宽度：768px）和（方向：纵向）{.container{width:100%}*{color:yellow}-移动}@媒体（最小宽度：1024px）{.容器｛宽度：100%｝*｛颜色：粉红色｝-桌面}@媒体（最小宽度：1200px）{.container{width:1180px}*{color:pink}-桌面}