在媒体查询中使用的宽度

什么是使用媒体查询来定位不同设备上的纵向和横向页面方向的最佳宽度？ 有没有什么标准？

Answer 1

我到处寻找最好的答案。 在这里，我发现。

@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。 这是链接 。

Answer 2

我发现这些都是很好的开始，但是随时随地testing和调整。 我也build议使用ems而不是px来获得尺寸不同的设备尺寸和分辨率（这里描述的原因（ http://blog.cloudfour.com/the-ems-have-it-proportional-media-queries-ftw/ ） ）

所以上面的查询看起来像这样：

 @media (min-width:20em) { /* smartphones, iPhone, portrait 480x320 phones */ } @media (min-width:30.063em) { /* portrait e-readers (Nook/Kindle), smaller tablets @ 600 or @ 640 wide. */ } @media (min-width:40.063em) { /* portrait tablets, portrait iPad, landscape e-readers, landscape 800x480 or 854x480 phones */ } @media (min-width:60.063em) { /* tablet, landscape iPad, lo-res laptops ands desktops */ } @media (min-width:64.063em) { /* big landscape tablets, laptops, and desktops */ } @media (min-width:80.063em) { /* hi-res laptops and desktops */ } 

在这里也有一个漂亮的像素到在线计算器（ http://pxtoem.com/ ）对于那些你不熟悉，包括我自己。

Answer 3

试试这包括视网膜

 /* Smartphones (portrait and landscape) ----------- */ @media only screen and (min-device-width : 320px) and (max-device-width : 480px) { /* Styles */ } /* Smartphones (landscape) ----------- */ @media only screen and (min-width : 321px) { /* Styles */ } /* Smartphones (portrait) ----------- */ @media only screen and (max-width : 320px) { /* Styles */ } /* iPads (portrait and landscape) ----------- */ @media only screen and (min-device-width : 768px) and (max-device-width : 1024px) { /* Styles */ } /* iPads (landscape) ----------- */ @media only screen and (min-device-width : 768px) and (max-device-width : 1024px) and (orientation : landscape) { /* Styles */ } /* iPads (portrait) ----------- */ @media only screen and (min-device-width : 768px) and (max-device-width : 1024px) and (orientation : portrait) { /* Styles */ } /* Desktops and laptops ----------- */ @media only screen and (min-width : 1224px) { /* Styles */ } /* Large screens ----------- */ @media only screen and (min-width : 1824px) { /* Styles */ } /* iPhone 4 ----------- */ @media only screen and (-webkit-min-device-pixel-ratio : 1.5), only screen and (min-device-pixel-ratio : 1.5) { /* Styles */ } 

Answer 4

试试这个媒体查询，它会帮助你

 @media only screen and (min-width:1280px) {} @media (min-width:1024px) and (max-width:1279px) {} @media (min-width:768px) and (max-width:1023px) {} @media (min-width:480px) and (max-width:767px) {} @media screen and (max-width:479px) {} @media only screen and (max-width:320px) {} @media only screen and (max-width:767px) {} 

Answer 5

完美的媒体查询

  @media (max-width:400px) {} @media (min-width:401px) and (max-width:599px) {} @media (min-width:600px) and (max-width:767px) {} @media (min-width:768px) and (max-width:950px) {} @media (min-width:951px) and (max-width:1050px) {} @media (min-width:1051px) {} 

Answer 6

iPhone的屏幕尺寸

• iPhone第一代，3G和3GS = 320 x 480

• iPhone 4和4S = 640 x 960

• iPhone 5c和5S = 640 x 1136

• iPhone 6 = 750 x 1334

• iPhone 6 Plus = 1080 x 1920（从原来的1242 x 2208降级）