媒体查询中使用的宽度 [英] Widths to use in media queries

问题描述

使用媒体查询在不同设备上定向纵向和横向页面方向的最佳宽度是多少？是否有任何标准？

What are the best widths to use media queries to target portrait and landscape page orientations on different devices? Are there any standards?

推荐答案

我在寻找最好的答案。

I'm looking everywhere for the best answer for this. Here what I found.

@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 */ }

认为这是更好地考虑与移动第一方法。从移动样式表开始，然后应用与其他设备相关的媒体查询。感谢@ryanve。这是链接。

I think this is better considering with mobile first approach. Start from mobile style sheet and then apply media queries relevant for other devices. Thanks for @ryanve. Here is the link.

这篇关于媒体查询中使用的宽度的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！