CSS 在媒体查询中使用的宽度
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/16704243/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
Widths to use in media queries
提问by Nishantha
What are the most important media query widths for all devices like desktops, tablets, laptops/Ipads, Iphones and Smartphones? Are there any standard widths for these devices?
对于台式机、平板电脑、笔记本电脑/Ipad、Iphone 和智能手机等所有设备，最重要的媒体查询宽度是多少？这些设备有标准宽度吗？
回答by Nishantha
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 */ }
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.
我认为考虑使用移动优先方法会更好。从移动样式表开始，然后应用与其他设备相关的媒体查询。感谢@ryanve。这是链接。
回答by Terri Swiatek
I find these are good breakpoints to start from but always test and tweak as you go. I'd also suggest using ems instead of px for dimensions for varied device dimensions and resolutions (reasons described here (http://blog.cloudfour.com/the-ems-have-it-proportional-media-queries-ftw/))
我发现这些是很好的断点，但始终在进行时进行测试和调整。我还建议使用 ems 而不是 px 作为不同设备尺寸和分辨率的尺寸（此处描述的原因（http://blog.cloudfour.com/the-ems-have-it-proportional-media-queries-ftw/） )
So the above queries would look like this:
所以上面的查询看起来像这样：
@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 */ }
There is also a nifty pixel to em calculator online here (http://pxtoem.com/) For those of you not as familiar, including myself.
还有一个漂亮的像素到 em 计算器在线这里 ( http://pxtoem.com/) 对于那些不熟悉的人，包括我自己。
回答by Mo.
Try this including retina
试试这个，包括视网膜
/* 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 */
}
回答by Amaresh Tiwari
Try this Media Query it will help you
试试这个媒体查询它会帮助你
@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) {}
回答by shammidevd
perfect media query
完美的媒体查询
@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) {}
