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 */ }
在实践中,许多设计人员将像素转换为em
s,主要是因为em
s 可以提供更好的缩放。在标准缩放1em === 16px
下,将像素乘以1em/16px
得到em
s。例如,320px === 20em
。
作为对评论的回应,这min-width
是“移动优先”设计的标准,您首先针对最小的屏幕进行设计,然后添加不断增加的媒体查询,以您的方式在越来越大的屏幕上工作。
无论您更喜欢min-
、max-
还是它们的组合,请注意规则的顺序,请记住,如果多个规则匹配同一个元素,则后面的规则将覆盖前面的规则。