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

问题描述

对于台式机、平板电脑、笔记本电脑/Ipad、Iphone 和智能手机等所有设备来说，最重要的媒体查询宽度是多少?这些设备有标准宽度吗?

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?

推荐答案

我到处寻找最佳答案.这是我发现的.

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屋！