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,主要是b / c em可以更好地进行缩放。在标准变焦下1em === 16px
。将像素乘以1em/16px
得到em。例如,320px === 20em
。
为了回应评论,这min-width
是“移动优先”设计的标准,其中您从设计最小的屏幕开始,然后添加越来越多的媒体查询,然后在越来越大的屏幕上工作。无论您是偏爱min-
,max-
还是它们的组合,都应了解规则的顺序,请记住,如果多个规则与同一元素匹配,则后面的规则将覆盖前面的规则。