媒体查询中使用的宽度[关闭]
Posted
技术标签:
【中文标题】媒体查询中使用的宽度[关闭]【英文标题】：Widths to use in media queries [closed] 【发布时间】：2013-05-18 05:47:27 【问题描述】：对于台式机、平板电脑、笔记本电脑/Ipad、Iphone 和智能手机等所有设备，最重要的媒体查询宽度是多少？ 这些设备是否有任何标准宽度？
【问题讨论】：
并非如此。这取决于你的内容。您的网站在特定分辨率下看起来不错吗？无需在那里添加媒体查询。让它更小（或更大）是否会破坏某些东西或使其次优？为该宽度添加断点。您应该首先考虑内容，而不是设备。 dstorey 感谢您的回复。是的，您是正确的“您应该首先考虑内容，而不是首先考虑设备”。但在这里我在 *** 上发现了 @doubleJ 的想法 link。至少有什么建议我们必须关注的主要宽度是什么？谢谢.. 我认为这些限制过于严格，会增加冗余或复杂性，甚至会遗漏在发展中国家仍然流行的小于 320 的设备。如果您有任何类型的流动布局，其中大多数都不需要额外的 CSS 规则。 标准设备的媒体查询css-tricks.com/snippets/css/media-queries-for-standard-devices 【参考方案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)
【讨论】：
以上是关于媒体查询中使用的宽度[关闭]的主要内容，如果未能解决你的问题，请参考以下文章