媒体查询中使用的宽度[关闭]答案

【问题标题】：Widths to use in media queries [closed]媒体查询中使用的宽度[关闭]
【发布时间】：2013-05-18 05:47:27
【问题描述】：

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

【问题讨论】：

并非如此。这取决于你的内容。您的网站在特定分辨率下看起来不错吗？无需在那里添加媒体查询。让它更小（或更大）是否会破坏某些东西或使其次优？为该宽度添加断点。您应该首先考虑内容，而不是设备。
dstorey 感谢您的回复。是的，您是正确的“您应该首先考虑内容，而不是首先考虑设备”。但在这里我在 Stackoverflow 上发现了 @doubleJ 的想法 link。至少有什么建议我们必须关注的主要宽度是什么？谢谢..
我认为这些限制过于严格，会增加冗余或复杂性，甚至会遗漏在发展中国家仍然流行的小于 320 的设备。如果您有任何类型的流动布局，其中大多数都不需要额外的 CSS 规则。
标准设备的媒体查询css-tricks.com/snippets/css/media-queries-for-standard-devices

标签： css responsive-design media-queries fluid-layout

【解决方案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。这是link。

【讨论】：

我知道问题是关于最佳宽度的（而且这组和任何一个都一样好），但高分辨率显示器不是由宽度定义的，而是由它们的分辨率（设备像素比）定义的。也有媒体查询。

【解决方案2】：

我发现这些是很好的断点开始，但总是在你去的时候测试和调整。我还建议使用 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/) 对于那些不那么熟悉的人，包括我自己。

【讨论】：

感谢@Terri 提供的信息，我从未尝试过使用 em 进行响应式设计。如果使用 em 而不是 px 具有这些优势，那么值得一试。 em 不熟悉，但您要做的就是将 px 转换为 em。太好了！
这是一个善意但有些不完整的答案。 em 测量完全取决于当前使用的字体大小。（如果相关元素的字体大小为200px，则1em=200px）由于这在所有网站的样式中不一致，因此此答案中提供的em 值仅作为示例，可能不与您的代码配合良好。

【解决方案3】：

试试这个，包括 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 */
}

【讨论】：

这是一个适用于任何和所有媒体查询的出色工作模板。谢谢！

【解决方案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) {}

【讨论】：

【解决方案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) {}

【讨论】：