媒体查询：如何定位桌面，平板电脑和移动设备？
我一直在对媒体查询进行一些研究，但我仍然不太了解如何定位某些尺寸的设备。
我希望能够瞄准桌面，平板电脑和手机。 我知道会有一些差异，但有一个可用于定位这些设备的通用系统会很好。
我发现的一些例子：
# 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)
要么：
# 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)
你认为这些“断点”应该用于每个设备？
IMO这些是最好的断点：
@media (min-width:320px) { /* smartphones, portrait iPhone, portrait 480x320 phones (Android) */ }
@media (min-width:480px) { /* smartphones, Android phones, landscape iPhone */ }
@media (min-width:600px) { /* portrait tablets, portrait iPad, e-readers (Nook/Kindle), landscape 800x480 phones (Android) */ }
@media (min-width:801px) { /* tablet, landscape iPad, lo-res laptops ands desktops */ }
@media (min-width:1025px) { /* big landscape tablets, laptops, and desktops */ }
@media (min-width:1281px) { /* hi-res laptops and desktops */ }
编辑 ：精益与960网格更好地工作：
@media (min-width:320px) { /* smartphones, iPhone, portrait 480x320 phones */ }
@media (min-width:481px) { /* portrait e-readers (Nook/Kindle), smaller tablets @ 600 or @ 640 wide. */ }
@media (min-width:641px) { /* portrait tablets, portrait iPad, landscape e-readers, landscape 800x480 or 854x480 phones */ }
@media (min-width:961px) { /* tablet, landscape iPad, lo-res laptops ands desktops */ }
@media (min-width:1025px) { /* big landscape tablets, laptops, and desktops */ }
@media (min-width:1281px) { /* hi-res laptops and desktops */ }
在实践中，许多设计师将像素转换为ems，大部分b / c ems更好地承担缩放。 在标准缩放1em === 16px 。 将像素乘以1em/16px以获得ems。 例如， 320px === 20em 。
针对评论， min-width是“移动优先”设计中的标准，其中您首先设计最小的屏幕，然后添加不断增加的媒体查询，让您在更大和更大的屏幕上工作。 无论您喜欢min- ， max-还是其组合，都要了解您的规则顺序，请记住，如果多个规则匹配相同的元素，则后面的规则将覆盖较早的规则。
如果你想瞄准一个设备，然后只写min-device-width 。 例如：
对于iPhone
@media only screen and (min-device-width: 480px){}
为平板电脑
@media only screen and (min-device-width: 768px){}
这里有一些很好的文章：
不要针对特定设备或尺寸！
普遍的看法并不是针对具体的设备或尺寸 ，而是为了重构“断点”这个术语：
您可以使用responsepx.com来查找“自然”断点，如Marc Drummond的“断点已死”。
使用自然断点
然后，“断点”成为您的移动设计开始“突破”的实际点，即停止使用或视觉愉悦。 一旦你有一个良好的工作移动网站，没有媒体查询，你可以停止关注特定的大小，并简单地添加媒体查询处理连续较大的视口。
如果您不想将设计固定在精确的屏幕尺寸上，则此方法无需针对特定设备 。 设计本身在每个断点处的完整性确保它能够保持在任何尺寸。 换句话说，如果一个菜单/内容部分/无论停止在一定的大小可用，设计一个断点为该大小， 而不是一个特定的设备大小。
请参阅Lyza Gardner关于行为断点的帖子，以及Zeldman关于Ethan Marcotte的帖子以及响应式网页设计如何从初始想法演变而来。
链接地址: http://www.djcxy.com/p/64541.html上一篇: Media Queries: How to target desktop, tablet and mobile?