我一直在做一些关于媒体查询的研究，但我仍然不太明白如何针对特定尺寸的设备。
我希望能够瞄准台式机、平板电脑和手机。我知道会有一些差异，但如果有一个通用的系统可以用来针对这些设备就好了。
我找到了一些例子:
# Mobile
only screen and (min-width: 480px)
# Tablet
only screen and (min-width: 768px)
# Desktop
only screen and (min-width: 992px)
# Huge
only screen and (min-width: 1280px)
Or:
# Phone
only screen and (max-width:320px)
# Tablet
only screen and (min-width:321px) and (max-width:768px)
# Desktop
only screen and (min-width:769px)
每个设备的断点应该是什么?
当前回答
Twitter Bootstrap推荐的最佳断点
/* Custom, iPhone Retina */
@media only screen and (min-width : 320px) {
}
/* Extra Small Devices, Phones */
@media only screen and (min-width : 480px) {
}
/* Small Devices, Tablets */
@media only screen and (min-width : 768px) {
}
/* Medium Devices, Desktops */
@media only screen and (min-width : 992px) {
}
/* Large Devices, Wide Screens */
@media only screen and (min-width : 1200px) {
}
来源:https://scotch.io/tutorials/default-sizes-for-twitter-bootstraps-media-queries
其他回答
不要针对特定的设备或尺寸!
一般的智慧不是针对特定的设备或大小，而是重新定义术语“断点”:
首先使用百分比或ems开发移动网站，而不是像素， 然后在一个更大的视口中尝试，注意它开始失败的地方， 重新设计布局，并添加CSS媒体查询，只是为了处理破碎的部分， 重复此过程，直到到达下一个断点。
您可以使用responsivepx.com找到“自然的”断点，如Marc Drummond所写的“断点已死”。
使用自然断点
“断点”将成为你的手机设计开始“崩溃”的实际点，即不再可用或在视觉上令人愉悦。一旦你有了一个运行良好的移动网站，没有媒体查询，你就可以不再关心具体的大小，只需添加媒体查询来处理连续较大的视口。
如果你不打算将设计固定在精确的屏幕尺寸上，这种方法就不需要针对特定的设备。设计本身在每个断点上的完整性确保了它在任何大小下都能保持不变。换句话说，如果一个菜单/内容部分或任何东西在某个大小时停止可用，为该大小设计一个断点，而不是为特定的设备大小设计一个断点。
请参阅Lyza Gardner关于行为断点的帖子，以及Zeldman关于Ethan Marcotte以及响应式网页设计如何从最初的想法演变而来的帖子。
使用语义标记
此外，DOM结构的nav, header, main, section, footer等语义越简单(避免像div class="header"嵌套内部div标签)，就越容易设计响应性，特别是通过使用CSS Grid Layout避免浮动(Sarah Drasner的网格生成器是一个很好的工具)和flexbox根据您的RWD设计计划安排和重新排序。
如果你想瞄准一个设备，那么只需要写min-device-width。例如:
为iPhone
@media only screen and (min-device-width: 480px){}
为平板电脑
@media only screen and (min-device-width: 768px){}
这里有一些不错的文章:
如何使你的网站适合苹果iPad CSS3媒体查询
这不是像素数的问题，而是屏幕上字符的实际大小(以毫米或英寸为单位)的问题，这取决于像素密度。 因此，“min-width:”和“max-width:”是无用的。 关于这个问题的完整解释如下: 设备像素比到底是什么?
“@media”查询会考虑像素数和设备像素比，从而产生“虚拟分辨率”，这是你在设计页面时必须考虑的问题:如果你的字体固定宽度为10px，“虚拟水平分辨率”为300 px，那么一行就需要30个字符。
对我来说最好的解决方案，检测设备是否移动:
@media (pointer:none), (pointer:coarse) {
}
现在最常见的是视网膜屏幕设备，换句话说:设备具有高分辨率和非常高的像素密度(但通常小于6英寸物理尺寸)。这就是为什么你需要在CSS上使用视网膜显示专门的媒体查询。这是我能找到的最完整的例子:
@media only screen and (min-width: 320px) {
/* Small screen, non-retina */
}
@media
only screen and (-webkit-min-device-pixel-ratio: 2) and (min-width: 320px),
only screen and ( min--moz-device-pixel-ratio: 2) and (min-width: 320px),
only screen and ( -o-min-device-pixel-ratio: 2/1) and (min-width: 320px),
only screen and ( min-device-pixel-ratio: 2) and (min-width: 320px),
only screen and ( min-resolution: 192dpi) and (min-width: 320px),
only screen and ( min-resolution: 2dppx) and (min-width: 320px) {
/* Small screen, retina, stuff to override above media query */
}
@media only screen and (min-width: 700px) {
/* Medium screen, non-retina */
}
@media
only screen and (-webkit-min-device-pixel-ratio: 2) and (min-width: 700px),
only screen and ( min--moz-device-pixel-ratio: 2) and (min-width: 700px),
only screen and ( -o-min-device-pixel-ratio: 2/1) and (min-width: 700px),
only screen and ( min-device-pixel-ratio: 2) and (min-width: 700px),
only screen and ( min-resolution: 192dpi) and (min-width: 700px),
only screen and ( min-resolution: 2dppx) and (min-width: 700px) {
/* Medium screen, retina, stuff to override above media query */
}
@media only screen and (min-width: 1300px) {
/* Large screen, non-retina */
}
@media
only screen and (-webkit-min-device-pixel-ratio: 2) and (min-width: 1300px),
only screen and ( min--moz-device-pixel-ratio: 2) and (min-width: 1300px),
only screen and ( -o-min-device-pixel-ratio: 2/1) and (min-width: 1300px),
only screen and ( min-device-pixel-ratio: 2) and (min-width: 1300px),
only screen and ( min-resolution: 192dpi) and (min-width: 1300px),
only screen and ( min-resolution: 2dppx) and (min-width: 1300px) {
/* Large screen, retina, stuff to override above media query */
}
来源:CSS-Tricks网站
