如果你认为响应式设计很简单，那我真为你感到难过。我们有 99 个视口，但 iPhone 只有一个。
—Josh Brewer，2010年3月10日
响应式设计的一个主要组成部分是为合适的设备创建合适的体验。由于市场上有无数不同的设备，这可能是一项艰巨的任务。我们收集了可用于针对许多标准和流行设备设计的媒体查询，这些查询绝对值得一读。
如果您正在寻找媒体查询的完整列表，这个存储库 是一个很好的资源。
如果你对此的反应是：*你永远不应该根据设备设置断点！* 你说得对。Justin Avery 有一篇很好的文章 讲述了使用设备特定断点的潜在陷阱。根据您的设计而不是特定设备选择断点是一种明智的做法。但有时您只是需要一些帮助来控制特定情况。
手机和手持设备
iPhone
/* ----------- iPhone 4 and 4S ----------- */
/* Portrait and Landscape */
@media only screen
and (min-device-width: 320px)
and (max-device-width: 480px)
and (-webkit-min-device-pixel-ratio: 2) {
}
/* Portrait */
@media only screen
and (min-device-width: 320px)
and (max-device-width: 480px)
and (-webkit-min-device-pixel-ratio: 2)
and (orientation: portrait) {
}
/* Landscape */
@media only screen
and (min-device-width: 320px)
and (max-device-width: 480px)
and (-webkit-min-device-pixel-ratio: 2)
and (orientation: landscape) {
}
/* ----------- iPhone 5, 5S, 5C and 5SE ----------- */
/* Portrait and Landscape */
@media only screen
and (min-device-width: 320px)
and (max-device-width: 568px)
and (-webkit-min-device-pixel-ratio: 2) {
}
/* Portrait */
@media only screen
and (min-device-width: 320px)
and (max-device-width: 568px)
and (-webkit-min-device-pixel-ratio: 2)
and (orientation: portrait) {
}
/* Landscape */
@media only screen
and (min-device-width: 320px)
and (max-device-width: 568px)
and (-webkit-min-device-pixel-ratio: 2)
and (orientation: landscape) {
}
/* ----------- iPhone 6, 6S, 7 and 8 ----------- */
/* Portrait and Landscape */
@media only screen
and (min-device-width: 375px)
and (max-device-width: 667px)
and (-webkit-min-device-pixel-ratio: 2) {
}
/* Portrait */
@media only screen
and (min-device-width: 375px)
and (max-device-width: 667px)
and (-webkit-min-device-pixel-ratio: 2)
and (orientation: portrait) {
}
/* Landscape */
@media only screen
and (min-device-width: 375px)
and (max-device-width: 667px)
and (-webkit-min-device-pixel-ratio: 2)
and (orientation: landscape) {
}
/* ----------- iPhone 6+, 7+ and 8+ ----------- */
/* Portrait and Landscape */
@media only screen
and (min-device-width: 414px)
and (max-device-width: 736px)
and (-webkit-min-device-pixel-ratio: 3) {
}
/* Portrait */
@media only screen
and (min-device-width: 414px)
and (max-device-width: 736px)
and (-webkit-min-device-pixel-ratio: 3)
and (orientation: portrait) {
}
/* Landscape */
@media only screen
and (min-device-width: 414px)
and (max-device-width: 736px)
and (-webkit-min-device-pixel-ratio: 3)
and (orientation: landscape) {
}
/* ----------- iPhone X ----------- */
/* Portrait and Landscape */
@media only screen
and (min-device-width: 375px)
and (max-device-width: 812px)
and (-webkit-min-device-pixel-ratio: 3) {
}
/* Portrait */
@media only screen
and (min-device-width: 375px)
and (max-device-width: 812px)
and (-webkit-min-device-pixel-ratio: 3)
and (orientation: portrait) {
}
/* Landscape */
@media only screen
and (min-device-width: 375px)
and (max-device-width: 812px)
and (-webkit-min-device-pixel-ratio: 3)
and (orientation: landscape) {
}Galaxy 手机
/* ----------- Galaxy S3 ----------- */
/* Portrait and Landscape */
@media screen
and (device-width: 360px)
and (device-height: 640px)
and (-webkit-device-pixel-ratio: 2) {
}
/* Portrait */
@media screen
and (device-width: 320px)
and (device-height: 640px)
and (-webkit-device-pixel-ratio: 2)
and (orientation: portrait) {
}
/* Landscape */
@media screen
and (device-width: 320px)
and (device-height: 640px)
and (-webkit-device-pixel-ratio: 2)
and (orientation: landscape) {
}
/* ----------- Galaxy S4, S5 and Note 3 ----------- */
/* Portrait and Landscape */
@media screen
and (device-width: 320px)
and (device-height: 640px)
and (-webkit-device-pixel-ratio: 3) {
}
/* Portrait */
@media screen
and (device-width: 320px)
and (device-height: 640px)
and (-webkit-device-pixel-ratio: 3)
and (orientation: portrait) {
}
/* Landscape */
@media screen
and (device-width: 320px)
and (device-height: 640px)
and (-webkit-device-pixel-ratio: 3)
and (orientation: landscape) {
}
/* ----------- Galaxy S6 ----------- */
/* Portrait and Landscape */
@media screen
and (device-width: 360px)
and (device-height: 640px)
and (-webkit-device-pixel-ratio: 4) {
}
/* Portrait */
@media screen
and (device-width: 360px)
and (device-height: 640px)
and (-webkit-device-pixel-ratio: 4)
and (orientation: portrait) {
}
/* Landscape */
@media screen
and (device-width: 360px)
and (device-height: 640px)
and (-webkit-device-pixel-ratio: 4)
and (orientation: landscape) {
}HTC 手机
/* ----------- HTC One ----------- */
/* Portrait and Landscape */
@media screen
and (device-width: 360px)
and (device-height: 640px)
and (-webkit-device-pixel-ratio: 3) {
}
/* Portrait */
@media screen
and (device-width: 360px)
and (device-height: 640px)
and (-webkit-device-pixel-ratio: 3)
and (orientation: portrait) {
}
/* Landscape */
@media screen
and (device-width: 360px)
and (device-height: 640px)
and (-webkit-device-pixel-ratio: 3)
and (orientation: landscape) {
}Google Pixel
/* ----------- Google Pixel ----------- */
/* Portrait and Landscape */
@media screen
and (device-width: 360px)
and (device-height: 640px)
and (-webkit-device-pixel-ratio: 3) {
}
/* Portrait */
@media screen
and (device-width: 360px)
and (device-height: 640px)
and (-webkit-device-pixel-ratio: 3)
and (orientation: portrait) {
}
/* Landscape */
@media screen
and (device-width: 360px)
and (device-height: 640px)
and (-webkit-device-pixel-ratio: 3)
and (orientation: landscape) {
}
/* ----------- Google Pixel XL ----------- */
/* Portrait and Landscape */
@media screen
and (device-width: 360px)
and (device-height: 640px)
and (-webkit-device-pixel-ratio: 4) {
}
/* Portrait */
@media screen
and (device-width: 360px)
and (device-height: 640px)
and (-webkit-device-pixel-ratio: 4)
and (orientation: portrait) {
}
/* Landscape */
@media screen
and (device-width: 360px)
and (device-height: 640px)
and (-webkit-device-pixel-ratio: 4)
and (orientation: landscape) {
}Nexus 手机
/* ----------- Nexus 4 ----------- */
/* Portrait and Landscape */
@media screen
and (device-width: 384px)
and (device-height: 592px)
and (-webkit-device-pixel-ratio: 2) {
}
/* Portrait */
@media screen
and (device-width: 384px)
and (device-height: 592px)
and (-webkit-device-pixel-ratio: 2)
and (orientation: portrait) {
}
/* Landscape */
@media screen
and (device-width: 384px)
and (device-height: 592px)
and (-webkit-device-pixel-ratio: 2)
and (orientation: landscape) {
}
/* ----------- Nexus 5 ----------- */
/* Portrait and Landscape */
@media screen
and (device-width: 360px)
and (device-height: 592px)
and (-webkit-device-pixel-ratio: 3) {
}
/* Portrait */
@media screen
and (device-width: 360px)
and (device-height: 592px)
and (-webkit-device-pixel-ratio: 3)
and (orientation: portrait) {
}
/* Landscape */
@media screen
and (device-width: 360px)
and (device-height: 592px)
and (-webkit-device-pixel-ratio: 3)
and (orientation: landscape) {
}
/* ----------- Nexus 6 and 6P ----------- */
/* Portrait and Landscape */
@media screen
and (device-width: 360px)
and (device-height: 592px)
and (-webkit-device-pixel-ratio: 4) {
}
/* Portrait */
@media screen
and (device-width: 360px)
and (device-height: 592px)
and (-webkit-device-pixel-ratio: 4)
and (orientation: portrait) {
}
/* Landscape */
@media screen
and (device-width: 360px)
and (device-height: 592px)
and (-webkit-device-pixel-ratio: 4)
and (orientation: landscape) {
}Windows Phone
/* ----------- Windows Phone ----------- */
/* Portrait and Landscape */
@media screen
and (device-width: 480px)
and (device-height: 800px) {
}
/* Portrait */
@media screen
and (device-width: 480px)
and (device-height: 800px)
and (orientation: portrait) {
}
/* Landscape */
@media screen
and (device-width: 480px)
and (device-height: 800px)
and (orientation: landscape) {
}
笔记本电脑
笔记本电脑的媒体查询有点庞大。与其针对特定设备，不如尝试指定一个通用的屏幕尺寸范围，然后区分视网膜屏幕和非视网膜屏幕。
/* ----------- Non-Retina Screens ----------- */
@media screen
and (min-device-width: 1200px)
and (max-device-width: 1600px)
and (-webkit-min-device-pixel-ratio: 1) {
}
/* ----------- Retina Screens ----------- */
@media screen
and (min-device-width: 1200px)
and (max-device-width: 1600px)
and (-webkit-min-device-pixel-ratio: 2)
and (min-resolution: 192dpi) {
}
平板电脑
iPad
/* ----------- iPad 1, 2, Mini and Air ----------- */
/* Portrait and Landscape */
@media only screen
and (min-device-width: 768px)
and (max-device-width: 1024px)
and (-webkit-min-device-pixel-ratio: 1) {
}
/* Portrait */
@media only screen
and (min-device-width: 768px)
and (max-device-width: 1024px)
and (orientation: portrait)
and (-webkit-min-device-pixel-ratio: 1) {
}
/* Landscape */
@media only screen
and (min-device-width: 768px)
and (max-device-width: 1024px)
and (orientation: landscape)
and (-webkit-min-device-pixel-ratio: 1) {
}
/* ----------- iPad 3, 4 and Pro 9.7" ----------- */
/* Portrait and Landscape */
@media only screen
and (min-device-width: 768px)
and (max-device-width: 1024px)
and (-webkit-min-device-pixel-ratio: 2) {
}
/* Portrait */
@media only screen
and (min-device-width: 768px)
and (max-device-width: 1024px)
and (orientation: portrait)
and (-webkit-min-device-pixel-ratio: 2) {
}
/* Landscape */
@media only screen
and (min-device-width: 768px)
and (max-device-width: 1024px)
and (orientation: landscape)
and (-webkit-min-device-pixel-ratio: 2) {
}
/* ----------- iPad Pro 10.5" ----------- */
/* Portrait and Landscape */
@media only screen
and (min-device-width: 834px)
and (max-device-width: 1112px)
and (-webkit-min-device-pixel-ratio: 2) {
}
/* Portrait */
/* Declare the same value for min- and max-width to avoid colliding with desktops */
/* Source: https://medium.com/connect-the-dots/css-media-queries-for-ipad-pro-8cad10e17106*/
@media only screen
and (min-device-width: 834px)
and (max-device-width: 834px)
and (orientation: portrait)
and (-webkit-min-device-pixel-ratio: 2) {
}
/* Landscape */
/* Declare the same value for min- and max-width to avoid colliding with desktops */
/* Source: https://medium.com/connect-the-dots/css-media-queries-for-ipad-pro-8cad10e17106*/
@media only screen
and (min-device-width: 1112px)
and (max-device-width: 1112px)
and (orientation: landscape)
and (-webkit-min-device-pixel-ratio: 2) {
}
/* ----------- iPad Pro 12.9" ----------- */
/* Portrait and Landscape */
@media only screen
and (min-device-width: 1024px)
and (max-device-width: 1366px)
and (-webkit-min-device-pixel-ratio: 2) {
}
/* Portrait */
/* Declare the same value for min- and max-width to avoid colliding with desktops */
/* Source: https://medium.com/connect-the-dots/css-media-queries-for-ipad-pro-8cad10e17106*/
@media only screen
and (min-device-width: 1024px)
and (max-device-width: 1024px)
and (orientation: portrait)
and (-webkit-min-device-pixel-ratio: 2) {
}
/* Landscape */
/* Declare the same value for min- and max-width to avoid colliding with desktops */
/* Source: https://medium.com/connect-the-dots/css-media-queries-for-ipad-pro-8cad10e17106*/
@media only screen
and (min-device-width: 1366px)
and (max-device-width: 1366px)
and (orientation: landscape)
and (-webkit-min-device-pixel-ratio: 2) {
}Galaxy 平板电脑
/* ----------- Galaxy Tab 2 ----------- */
/* Portrait and Landscape */
@media
(min-device-width: 800px)
and (max-device-width: 1280px) {
}
/* Portrait */
@media
(max-device-width: 800px)
and (orientation: portrait) {
}
/* Landscape */
@media
(max-device-width: 1280px)
and (orientation: landscape) {
}
/* ----------- Galaxy Tab S ----------- */
/* Portrait and Landscape */
@media
(min-device-width: 800px)
and (max-device-width: 1280px)
and (-webkit-min-device-pixel-ratio: 2) {
}
/* Portrait */
@media
(max-device-width: 800px)
and (orientation: portrait)
and (-webkit-min-device-pixel-ratio: 2) {
}
/* Landscape */
@media
(max-device-width: 1280px)
and (orientation: landscape)
and (-webkit-min-device-pixel-ratio: 2) {
}Nexus 平板电脑
/* ----------- Nexus 7 ----------- */
/* Portrait and Landscape */
@media screen
and (device-width: 601px)
and (device-height: 906px)
and (-webkit-min-device-pixel-ratio: 1.331)
and (-webkit-max-device-pixel-ratio: 1.332) {
}
/* Portrait */
@media screen
and (device-width: 601px)
and (device-height: 906px)
and (-webkit-min-device-pixel-ratio: 1.331)
and (-webkit-max-device-pixel-ratio: 1.332)
and (orientation: portrait) {
}
/* Landscape */
@media screen
and (device-width: 601px)
and (device-height: 906px)
and (-webkit-min-device-pixel-ratio: 1.331)
and (-webkit-max-device-pixel-ratio: 1.332)
and (orientation: landscape) {
}
/* ----------- Nexus 9 ----------- */
/* Portrait and Landscape */
@media screen
and (device-width: 1536px)
and (device-height: 2048px)
and (-webkit-min-device-pixel-ratio: 1.331)
and (-webkit-max-device-pixel-ratio: 1.332) {
}
/* Portrait */
@media screen
and (device-width: 1536px)
and (device-height: 2048px)
and (-webkit-min-device-pixel-ratio: 1.331)
and (-webkit-max-device-pixel-ratio: 1.332)
and (orientation: portrait) {
}
/* Landscape */
@media screen
and (device-width: 1536px)
and (device-height: 2048px)
and (-webkit-min-device-pixel-ratio: 1.331)
and (-webkit-max-device-pixel-ratio: 1.332)
and (orientation: landscape) {
}Kindle Fire
/* ----------- Kindle Fire HD 7" ----------- */
/* Portrait and Landscape */
@media only screen
and (min-device-width: 800px)
and (max-device-width: 1280px)
and (-webkit-min-device-pixel-ratio: 1.5) {
}
/* Portrait */
@media only screen
and (min-device-width: 800px)
and (max-device-width: 1280px)
and (-webkit-min-device-pixel-ratio: 1.5)
and (orientation: portrait) {
}
/* Landscape */
@media only screen
and (min-device-width: 800px)
and (max-device-width: 1280px)
and (-webkit-min-device-pixel-ratio: 1.5)
and (orientation: landscape) {
}
/* ----------- Kindle Fire HD 8.9" ----------- */
/* Portrait and Landscape */
@media only screen
and (min-device-width: 1200px)
and (max-device-width: 1600px)
and (-webkit-min-device-pixel-ratio: 1.5) {
}
/* Portrait */
@media only screen
and (min-device-width: 1200px)
and (max-device-width: 1600px)
and (-webkit-min-device-pixel-ratio: 1.5)
and (orientation: portrait) {
}
/* Landscape */
@media only screen
and (min-device-width: 1200px)
and (max-device-width: 1600px)
and (-webkit-min-device-pixel-ratio: 1.5)
and (orientation: landscape) {
}
可穿戴设备
/* ----------- Moto 360 Watch ----------- */
@media
(max-device-width: 218px)
and (max-device-height: 281px) {
}
更多关于媒体查询
- 媒体查询 Level 3 (W3C)
- CSS 媒体查询完整指南 (CSS-Tricks)
- CSS 媒体查询：快速参考和指南 (DigitalOcean)
非常有用！我得试试看。
您在当前网站上使用什么在移动宽度和全宽度之间切换？
我在您的源代码中没有看到它。
他并没有仅仅为移动设备使用不同的宽度。他使用的是诸如
这只是说，任何时候屏幕尺寸大于 `500px`，就会应用某些样式，而当它低于该尺寸时，就会应用不同的属性。
我在您的源代码中没有看到它。
回复 ↓
您好，我是编程新手。我有一个想要发布的调查，我的受访者可能没有相同的平板电脑。我可以将不同平板电脑的所有脚本组合起来吗？
Bulma（前端框架）使用 768px 作为最大移动宽度，使用 769px 作为最小平板电脑宽度。那是正确的吗？我在其他任何地方都没有看到这种用法。在其他任何地方，移动设备和平板电脑之间的断点都是 767px 到 768px。我错过了什么吗？或者 Bulma 错过了关于这方面的说明？
刚刚阅读了您关于根据屏幕分辨率使用 CSS 为网站设置备用样式的文章。很棒的文章。
我想知道我是否可以付钱给您，让您为我制作一个简单的 HTML 电子邮件模板（看起来像文本），该模板在移动设备和桌面设备上看起来都不错。以下是规格...
如果屏幕尺寸不是移动设备，那么我需要文本区域在 350px 处换行。
如果屏幕尺寸是移动设备，那么我希望文本在屏幕上 100% 换行（对于横向或非横向），最大宽度为 350px（以防出现横向模式 iPad 之类的情况）。
我需要文本本身的样式字体大小为 +1（因此它看起来比用户的普通电子邮件略大）。
我想要避免的是使用 350px 的表格来包裹文本，然后让 iPhone 将文本缩小到比正常情况更小... 要求用户采取额外的步骤放大。
还希望避免在 350px 处使用行尾换行符，并让这些换行符最终出现在移动设备的屏幕中间（看起来很糟糕）。
对于喜欢这些东西的人来说应该很简单。如果您能做到，请告诉我多少钱。
仅供参考，如果您计划支持所有电子邮件客户端，这是不可能的。Gmail 会删除邮件的头部，因此媒体查询将不起作用。您能做的最好的事情就是构建一个流畅的布局并使用 text-size-adjust。
前往 http://htmlemailboilerplate.com/
这正是您要找的。
我刚刚开始学习如何为不同的设备使用备用样式表。按照您在其他地方的示例，我已经让它正常工作了。我正在我的 HTC Desire Android 上测试它，为了让它在这款手机上工作，我必须进行如下设置
screen and (min-device-width: 1008px) – HTC Desire 忽略
screen and (min-device-width: 1009px) – HTC Desire 使用此样式表
Desire 的分辨率为 480×800，所以我不理解其中的一部分！
您是否在元数据中使用了 device width, initial scale=1？移动设备有时会重新调整其视图...
在这里您可以找到更多媒体查询代码段。http://nmsdvid.com/snippets/
这太棒了！！！谢谢。
这个媒体查询代码段非常棒，组织得很好，而且非常清晰.. 非常感谢
Nexus S 在横向模式下报告 533 像素。因此，如果在您导航到您的网站时手机处于横向模式，则上述代码段均不起作用。另一方面，我的 iPod 在纵向和横向模式下始终报告 320px。iPhone 4 也是如此。它始终报告 320px。
这组媒体查询是否适合“移动优先”方法？
在我的测试中，“min-width: 321px” 似乎覆盖了大多数其他内容。这有必要/有帮助吗？我注意到您 (Chris) 在此站点的代码中没有使用它。看起来您只使用了
谢谢！
你说得对，但我不确定这里的解决方案是什么。Chris？
如果你使用
min-width:321px，然后max-width:500px，min width 属性会覆盖它，因为它应用了321px以上的所有样式。这种格式使用还是不使用…？
这可能太晚了。但对于任何可能觉得这有帮助的人来说……
如果你遇到这个问题，我发现最好的办法是，如果你把你的 @media (min-width: …) 放在你的 @media (max-width: …) 之前，它就不会覆盖它。
好文章，谢谢
大家好!!!!!
我有个问题
关于在安卓浏览器上工作的媒体查询。我使用Dreamweaver CS5.5。当我测试时，没有任何变化。
当我在横屏视图中测试时，它采用默认的网络浏览器屏幕宽度，而不是设备屏幕宽度。
同样的问题。安卓浏览器采用默认样式表而不是移动样式表。在Nexus S上测试。
我想我已经找到了解决办法。当我使用“(max-device-width: 800px)”时，它就能工作。我猜 @media 看到我的 Nexus 是 480×800，并把较大的数字作为宽度。
当我使用这个来请求视网膜显示器的样式表时
<link rel=’stylesheet’ type=’text/css’ href=’/css/mobile-retina.css’ media=’only screen and (-webkit-min-device-pixel-ratio: 2)’/>
我无法让W3验证器验证这个。错误是：链接元素的媒体属性的值 only screen and (-webkit-min-device-pixel-ratio: 2) 错误：媒体功能部分的开头应为字母，但看到的是 - 。
有没有办法以“有效”的方式使用这篇文章中提到的“-webkit-min-device-pixel-ratio”值？
Mike
我会把你的mobile-retina.css添加到你的主CSS文件中？
例子
由于有这么多不断发展的标准，现在已经没有人真正验证HTML了。如果你的网站能正常工作，你为什么要在意呢？
不。任何渲染引擎特有的css“扩展”都无法验证。任何以-moz开头代表Mozilla或-webkit开头的...虽然它可以工作...但技术上是无效的。
请问这个帖子过时了吗？是否有更最新的标准媒体查询指南？
我算是媒体查询的新手，所以如果我看起来不了解最新的媒体查询代码，请原谅我。然而，我只是第一次阅读这些评论，它们已经超过3年了。请问这个网站有更新的帖子吗？
(orientation : portrait) 对于 CSS3 来说是无效的.... 你忽略了这一点吗？或者你有解决方法吗？
谢谢你....
我现在正在写的是一个页面，它将为每个屏幕设备更改背景图片，因为桌面版本将会有高分辨率的照片。所以，我不想让移动用户下载这些超大的图片。我希望我的CSS文件是独立的，所以我正在写我的媒体查询，例如
所以一个快速的问题。如果我访问一个使用媒体查询的页面，浏览器会下载所有的样式表还是只下载一个被定位的样式表？在我的例子中，styles.css 应该总是加载，然后其他媒体查询的样式表将根据它们是否为真来加载。
你的问题没有100%确定的答案，然而我上周一直在研究这个问题，并得出了一种直接的解释方法。如果你使用display:none，你更有可能让浏览器不渲染该元素。而如果你使用visibility:hidden，你正在配置的元素将被你的浏览器预加载。基本上，这完全取决于你的样式表中如何发生变化以使对象隐藏或显示 - 当然还有用户从哪个浏览器/平台/设备访问。
如果你将所有css放在一个文件中（包括媒体查询），无论设备的尺寸如何，设备都会下载所有资源，所以当你可能使用display:none将元素从网站的架构中完全删除时，它的资源仍然会被下载。
你最好使用一个全局样式表，然后用它自己的css文件来定位每个断点设置，这样就只有那个文件和它的资源会被定位。
如果你在全局样式表中加载桌面图像，然后用较小的图像来定位较小的设备，覆盖较大的图像，你将加载大的和小的图像 - 即使大的图像没有被显示，它也被加载了，从而减慢了移动用户的网站加载时间。
始终最好使用单独的媒体查询文件来定位断点范围内的设备...并且始终使用最小和最大设置来定位这些设备，因为如果你只使用最小尺寸并被下一个更大的尺寸（或更小的尺寸）覆盖，你仍然在加载所有资源。
是否有可能用一个单独的媒体查询来定位iphone4+，而不是其他具有相同最小/宽度尺寸的智能手机？
我问这个问题是因为我的响应式网站（http://www.cortac.com）在iPhone4+上运行良好。然而，在旧的（2年前的）安卓手机等上，页脚没有*粘住*，我希望简单地让页脚 display: none;
然而，这样做，也扼杀了我的iphone4+样式，在那里我*确实*希望页脚显示。问题是iphone4+和普通的*智能手机*最小/最大尺寸分别定位在320和480的相同尺寸，我无法让具有相同宽度/高度比的独立设备被区别对待，而不会相互覆盖。任何谈论这个问题的在线文章都将非常感谢！
你是否尝试过检查是否存在视网膜显示器 (-webkit-min-device-pixel-ratio)？
哈哈！
“Jeremy Mansfield：耶稣爱好者……”
Jeremy，你的网站真漂亮！我真的很喜欢你用媒体查询把它分开的方式。我偶然发现了这篇文章，因为我遇到了和你一样的问题--让所有东西在不同的手机浏览器上看起来都一样。我认为这个帖子可能会帮助我。感谢你的发帖，并继续保持你的出色工作。
你不能用CSS来定位特定的设备...这就是自适应设计的用武之地，它将javascript（或jquery）和css混合在一起，以定位特定的设备，设置断点，以及其他css无法做到的事情，然后应用自适应定位的相关样式。
Amit Nagar！我真的很喜欢你用媒体查询把它分开的方式。我偶然发现了这篇文章，因为我遇到了和你一样的问题--让所有东西在不同的手机浏览器上看起来都一样。我认为这个帖子可能会帮助我。感谢你的发帖，并继续保持你的出色工作。
“german”写给“Mike”的技巧能让您定位到iPhone4吗？iPhone4和iPhone4S是带有视网膜显示器的吗？
@media only screen and (-webkit-min-device-pixel-ratio: 2) {
/* 这里来自 mobile-retina.css 的样式 */
}
这应该可以吧？把它放在你的主css文件中，你隐藏页脚的地方，然后在那里添加一个样式来显示它...
另外，我也查看了这个网站，看起来很棒。我有一个问题是，当我折叠浏览器时，我注意到你总是使用同一套图片。你打算一直这样吗？或者你会通过缩小背景来优化移动设备吗？
我已经把我的网站做成了这样，它会根据设备的类型加载不同的背景图片。我不想在我的手机上下载一个150kb-200kb的背景，如果我没有必要的话。
Robbie，感谢你的回复。除了普通的智能手机外，我确实有只针对视网膜显示器的样式，而且它似乎无法区分这两者。如果我取消普通智能手机的页脚，它就会覆盖视网膜样式，无论如何。到目前为止，似乎要么全有，要么全无。
是的，谢谢你观察到这一点。我的确计划为移动版本加载更小的背景图片。我只是还没有添加这些媒体查询，因为这对我来说是一个正在进行的响应式实验。
使用此方法来定位特定设备
(function(a){(jQuery.browser=jQuery.browser||{}).mobile=/(android|ipad|playbook|silk|bb\d+|meego).+mobile|avantgo|bada\/|blackberry|blazer|compal|elaine|fennec|hiptop|iemobile|ip(hone|od)|iris|kindle|lge |maemo|midp|mmp|netfront|opera m(ob|in)i|palm( os)?|phone|p(ixi|re)\/|plucker|pocket|psp|series(4|6)0|symbian|treo|up\.(browser|link)|vodafone|wap|windows (ce|phone)|xda|xiino/i.test(a)||/1207|6310|6590|3gso|4thp|50[1-6]i|770s|802s|a wa|abac|ac(er|oo|s\-)|ai(ko|rn)|al(av|ca|co)|amoi|an(ex|ny|yw)|aptu|ar(ch|go)|as(te|us)|attw|au(di|\-m|r |s )|avan|be(ck|ll|nq)|bi(lb|rd)|bl(ac|az)|br(e|v)w|bumb|bw\-(n|u)|c55\/|capi|ccwa|cdm\-|cell|chtm|cldc|cmd\-|co(mp|nd)|craw|da(it|ll|ng)|dbte|dc\-s|devi|dica|dmob|do(c|p)o|ds(12|\-d)|el(49|ai)|em(l2|ul)|er(ic|k0)|esl8|ez([4-7]0|os|wa|ze)|fetc|fly(\-|_)|g1 u|g560|gene|gf\-5|g\-mo|go(\.w|od)|gr(ad|un)|haie|hcit|hd\-(m|p|t)|hei\-|hi(pt|ta)|hp( i|ip)|hs\-c|ht(c(\-| |_|a|g|p|s|t)|tp)|hu(aw|tc)|i\-(20|go|ma)|i230|iac( |\-|\/)|ibro|idea|ig01|ikom|im1k|inno|ipaq|iris|ja(t|v)a|jbro|jemu|jigs|kddi|keji|kgt( |\/)|klon|kpt |kwc\-|kyo(c|k)|le(no|xi)|lg( g|\/(k|l|u)|50|54|\-[a-w])|libw|lynx|m1\-w|m3ga|m50\/|ma(te|ui|xo)|mc(01|21|ca)|m\-cr|me(rc|ri)|mi(o8|oa|ts)|mmef|mo(01|02|bi|de|do|t(\-| |o|v)|zz)|mt(50|p1|v )|mwbp|mywa|n10[0-2]|n20[2-3]|n30(0|2)|n50(0|2|5)|n7(0(0|1)|10)|ne((c|m)\-|on|tf|wf|wg|wt)|nok(6|i)|nzph|o2im|op(ti|wv)|oran|owg1|p800|pan(a|d|t)|pdxg|pg(13|\-([1-8]|c))|phil|pire|pl(ay|uc)|pn\-2|po(ck|rt|se)|prox|psio|pt\-g|qa\-a|qc(07|12|21|32|60|\-[2-7]|i\-)|qtek|r380|r600|raks|rim9|ro(ve|zo)|s55\/|sa(ge|ma|mm|ms|ny|va)|sc(01|h\-|oo|p\-)|sdk\/|se(c(\-|0|1)|47|mc|nd|ri)|sgh\-|shar|sie(\-|m)|sk\-0|sl(45|id)|sm(al|ar|b3|it|t5)|so(ft|ny)|sp(01|h\-|v\-|v )|sy(01|mb)|t2(18|50)|t6(00|10|18)|ta(gt|lk)|tcl\-|tdg\-|tel(i|m)|tim\-|t\-mo|to(pl|sh)|ts(70|m\-|m3|m5)|tx\-9|up(\.b|g1|si)|utst|v400|v750|veri|vi(rg|te)|vk(40|5[0-3]|\-v)|vm40|voda|vulc|vx(52|53|60|61|70|80|81|83|85|98)|w3c(\-| )|webc|whit|wi(g |nc|nw)|wmlb|wonu|x700|yas\-|your|zeto|zte\-/i.test(a.substr(0,4))})(navigator.userAgent||navigator.vendor||window.opera);然后调用 navigator.vendor 来确定设备
您应该在响应中看到类似的内容
Mozilla/5.0 (iPhone; U; CPU iPhone OS 3_0 like Mac OS X; en-us) AppleWebKit/528.18 (KHTML, like Gecko) Version/4.0 Mobile/7A341 Safari/528.16我的问题和 Marks 的一样。我目前正在使用 Bootstrap，看起来当页面在 iPad 上垂直显示时应该进行布局更改，但除非我将媒体查询从 768px 更改为 769px，否则布局不会更改。我确信这不是应该做到的方式...
这在我的 header.php 中
<meta name=”viewport” content=”width=device-width, initial-scale=1.0″>
使用 viewport-width 而不是 device-width 有几个原因。
在以下网址了解更多信息
http://www.quirksmode.org/blog/archives/2010/09/combining_meta.html
先生，您真是个天才。效果很好！ iphone4+ 现在显示不同的 css，我现在可以使我的桌面浏览器最小宽度为 800px，而不是最小 1136px (iphone4+)
嗨，现在我想在我的网站上放一个|Home|页面。你能告诉我怎么做吗？
@Run Raksmey
当然，通过联邦快递，每像素 1.78 美元。
你好,
我在最近的一个项目中使用了媒体查询，当我在 iPad 上从纵向模式进入横向模式时，它显示为缩放的，即它已经放大了。我希望它在纵向和横向模式下都显示在原始页面缩放比例上。
对此有什么解决方案吗？
是的，有解决这个问题的办法。最简单的方法是使用 Chrome 而不是 Safari，因为这是一个移动 Safari 的 bug。你也可以看看我在 Forrst 上关于各种解决方法的帖子 http://forrst.com/posts/Fixes_for_Mobile_Safari_Zoom_Orientation_bug-2S0，我目前使用的是基于加速度计的修复方法。
你可以用一些 Javascript 来克服这个问题。
将此添加到您的
<head>元素中。<meta name="viewport" content="width=device-width, initial-scale=1.0">然后
嘿，你能说说你的意思吗？
当你从 iPad 的纵向模式进入横向模式时，它会显示为缩放？
嗨！
难道我是唯一一个在使用媒体查询和桌面 Safari 时遇到问题的人吗？！
@media only screen and (min-device-width : 321px)
也针对桌面上的 Safari 浏览器，无论浏览器窗口的大小如何。
你不是唯一一个遇到 safari 问题的人。我在任何分辨率下都遇到了 safari 拾取 @media css 的相同问题。问题是我做了一个 @media body {overflow:hidden} 现在 safari 不能滚动了，哈哈
您还需要添加一个 max-width 断点……您在 min-width 中设置的样式从该大小开始向上增长并被继承。
这完全说得通！
您说匹配所有超过 320 像素的屏幕设备。那是除了非常旧的手机之外的所有设备，而且您要求它查看设备宽度，而不是宽度，所以它根本不关心您的浏览器窗口的大小……只关心设备的宽度。
只是为了帮助你，但我只是猜测，你说最小宽度需要是 321px，而你的 safari 至少是 321px 宽，所以它当然会在那里触发。
尝试使用 max-width。
看看上面的代码示例，你会看到对于智能手机，他使用的是 (max-width:320px;)。
是的，我知道，但我指的是例子中的这个
/* 智能手机（横向） ———– */
@media only screen
and (min-width : 321px) {
/* 样式 */
}
将其更改为 min-device-width 也没有帮助。
不要使用
@media only screen and (min-device-width: 321px) {}…使用
@media only screen and (max-device-width: 480px) {}效果很好！！！ ☺
与宽度相关的高度是多少？我担心首屏问题。
您必须研究每个要定位的设备以找出高度，或者找到分辨率最低的手机作为基准。
老实说，您应该构建您的页面，使所有重要的重要内容都放在顶部，而次要内容放在底部。
并使您的次要内容部分可见，以便他们知道可以滚动，但我认为这主要是隐含的。
看看其他移动网站并进行衡量。
页面折叠是一个神话……人们知道如何滚动。尤其是在移动网络上。
大家好,
我是媒体查询新手，所以我可能会遗漏一些东西，但我尝试在一个页面上实现 lessframework，在我的 iPhone4 上发生了一些奇怪的事情
– 当处于纵向模式时，它可以很好地调整页面大小，但是当我旋转到横向模式时，页面超出了边界
– 如果我在横向模式下刷新页面，页面看起来很好
我在他们的网站 http://www.lessframework.com 上也注意到了完全相同的事情。
有人知道如何解决这个问题吗？
谢谢,
Vic
我在 Ipad 上遇到了同样的问题。这是一个 ios 的 bug。
一个小的 javascript 解决了这个问题。
参见： http://stackoverflow.com/questions/5434656/ipad-layout-scales-up-when-rotating-from-portrait-to-landcape
嗨，克里斯，
我是一名 GUI 设计师。在为移动网站 iPhone 视网膜显示屏设计时，我传统上使用 640×960 的分辨率。在 PS 中为移动设备或 iPad 设计时，我应该补偿高分辨率显示屏还是只设计 320px (72 DPI)/768px (72 DPI)？
谢谢你的帮助。
贾里德
嗨，贾里德，
我会选择匹配当今支持的最高分辨率之一，比如 iPad mini 视网膜显示屏，它是
2048‑by‑1536 分辨率，326ppi。
然后我会根据需要导出缩小版本的图片。
大家好！
感谢您提供有用的信息。我是一个新手，渴望得到好的建议，遇到好的内容和设计让我更有灵感。
我喜欢你的输入框里面的图片！你能告诉我如何或在哪里可以找到如何使用它们吗？
谢谢，马克
我真的很喜欢为查询提供样板代码片段的想法，但在我的测试中，智能手机（更准确地说是 iPhone）的纵向和横向查询似乎坏了。
我很好奇为什么我们不利用设备方向来完成这个任务……这似乎也稍微更平台无关。检测纵向模式看起来像……
我很难理解你的方法。我最近一直在使用一个框架并开发一个响应式网格系统。也许我的理解方式不同，但我将我的响应部分设置在一个单独的样式表中，而另一个样式表我称之为“全局”或“基础”，其中包含主网格系统。在你的脚本的这一部分
/* 台式机和笔记本电脑 ———– */
@media only screen
and (min-width : 1224px) {
/* 样式 */
}
/* 大屏幕 ———– */
@media only screen
and (min-width : 1824px) {
/* 样式 */
}
你有 1824px，是的，这是可以理解的，非常大的屏幕，比我的 imac 显示器更大，因此网格系统可以扩展。但是你有 1224px，好吧，这比我的 macbook 的分辨率大，但至少 1200px 是我的 imac 的尺寸，对我来说是任何屏幕的标准尺寸。
现在我的意思是这个例子
响应式样式表
/* 台式机和笔记本电脑 ———– */
@media only screen
and (min-width : 1224px) {
/* 样式 */
#container {width:1170px}
}
全局样式表
#container {width:980px}
现在我觉得在我的（大约）1200px 尺寸的显示器中，这两种尺寸会冲突。为什么不删除 (min-width : 1224px) 并将其设置为更大的像素率。
我希望这说得通。现在这是我的做法，对我来说更有意义。现在在 768px 和 1824px 之间，我可以像往常一样创建任何尺寸的网格系统，当它低于 768px 或高于 1824px 时，它会发生变化。但它们之间没有混合。
/* 大型台式机和笔记本电脑屏幕（设备和浏览器） */
@media only screen and (min-width: 1824px) {}
/* 平板电脑设备、台式机和笔记本电脑屏幕 */
@media only screen and (max-width: 768px) {}
/* iPad（纵向和横向） */
@media only screen and (min-device-width: 768px) and (max-device-width: 1024px) {}
/* 智能手机（纵向和横向） */
@media only screen and (min-device-width: 320px) and (max-device-width: 480px) {}
/* iPhone 4 */
@media only screen and (-webkit-min-device-pixel-ratio: 1.5), only screen and (min-device-pixel-ratio: 1.5) {}
@media print {}
我想到的唯一另一个想法是，你没有在其他任何地方创建 css，而 1224px 就是它的值，但如果网格是 960 或 980px（这是典型的）怎么办。
你还有 and (min-device-width : 768px) and (max-device-width : 1024px)。我知道这是一个设备宽度，这不会影响台式机或笔记本电脑吗？
抱歉问了这么直接的问题，但我只是想理解它，而且我问了很多问题。 :)
使用你的基础/全局样式表进行“样式设置”，并使用你的媒体查询文件进行布局尺寸和文本覆盖。你永远不会遇到尺寸冲突的问题
有没有办法区分 iPhone 4 和 iPad 3……？仅使用像素比率似乎不起作用……
旧 iPad 可以区分，但新的 iPad 不行……
谢谢，
JH
我正在学习，但这可能就是你想要的？
/**********
iPad 3
**********/
@media
only screen
and (min-device-width : 768px)
and (max-device-width : 1024px)
and (orientation : landscape)
and (-webkit-min-device-pixel-ratio : 2) {
/* 样式 */
}
@media
only screen
and (min-device-width : 768px)
and (max-device-width : 1024px)
and (orientation : portrait)
and (-webkit-min-device-pixel-ratio : 2) {
/* 样式 */
}
/**********
iPhone 4+
**********/
@media
only screen
and (min-device-width : 320px)
and (max-device-width : 480px)
and (orientation : landscape)
and (-webkit-min-device-pixel-ratio : 2) {
/* 样式 */
}
@media
only screen
and (min-device-width : 320px)
and (max-device-width : 480px)
and (orientation : portrait)
and (-webkit-min-device-pixel-ratio : 2) {
/* 样式 */
}
你好…
如何为处于横向位置的 Iphone4 视网膜制作特殊样式？
我可以应用纵向.. 但是当我转动我的 iphone 时.. 它会失去样式
这样对吗？
Gazu，以下是使用媒体查询为横向设置样式的方法
@media screen and (max-width:480px) and (orientation: landscape){}
另外，为了修复 safari 错误，我把它放在了头部
<meta name=”viewport” content=”width=device-width, initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, user-scalable=no” />
你拯救了我的一天，谢谢！
非常感谢 Vic
我们最近推出了一个使用响应式设计的新网站。
但是，我们从一些用户那里听说，该网站在某些移动设备上没有响应：HTC、Window 的手机等。
当我在模拟器中测试设备突出显示的网站时，它看起来很好，但对于某些设备来说，它似乎仍然不起作用。
有什么想法吗？
http://www.zappybaby.be/nl
http://forum.zappybaby.be
我无法在 bigcommerce 模板中使用媒体查询，它不起作用，我需要任何 java 脚本吗？ 请帮忙
不用了，谢谢，现在我可以很好地使用媒体查询了
你好，
我们正在计划为我们现有的网站制作一个平板电脑版本，内容完全不同。现在，只想知道适用于所有平板电脑（即 Android、iPad、Noble Nook、Kindle 等）的 css 媒体查询。
我实际上是这个领域的新手。
当我在 iPhone 上从纵向切换到横向时，网站无法正确对齐。它溢出了。我设置了 480px 的样式，所以我还有什么做错了吗？有人可以帮我吗？
你应该在样式表中使用基于百分比的值，并为样式表的链接设置最大和最小宽度。除了断点之外，一切都应该是流动的，但高于 900/960px 的视口可以有一个固定值。
也许我知道你的问题是什么，在 iPhone 上，当你从纵向切换到横向时，有一个错误会导致用户缩放出错，因此它会溢出（如果我正确理解了你的问题）。如果是这种情况，你必须缩小以“手动修复它”，不是吗？
这里有一个很棒的脚本 http://github.com/scottjehl/iOS-Orientationchange-Fix，它可以自动为用户修复它，而且效果很好！
嘿，我一直试图做一些类似于“对于任何 device-pixel-ratio>1 的东西都使用这个”的事情。
我尝试过使用 not 运算符
@media not screen and (max-device-pixel-ratio: 1) { stuff }你认为这值得吗？
顺便说一句，我想知道是否仍然需要为此使用供应商前缀，或者只是普通的
整个事情都错了 X)
我的意思是
@media screen and (not max-device-pixel-ratio:1) {stuff }仍然，它似乎不起作用。我想一般的 min-device:1.5 好多了。
@Gruber 谢谢你提供 http://github.com/scottjehl/iOS-Orientationchange-Fix
这对我有用。干杯。 Damir
所有这些像素调整都没有意义。对于 iPad 4 来说很清楚：你必须询问物理尺寸而不是像素分辨率。即使在 640 像素宽的 iPad 上，网页的两列设计也没有意义。
我现在意识到我的响应式网页。请参阅 http://mm.ymir.de。它不仅适应小型设备，还适应小型浏览器窗口。所以只需缩小浏览器的宽度，看看页面是如何变化的。图片也是响应式的：加载页面时，它们会根据你的窗口大小加载。
http://responsive.is/www.bostonglobe.com
你是否测试过哪个尺寸 (min-width/max-width) 可以针对新的 MacBook 的视网膜显示器？
我不确定这个新的*高清笔记本电脑屏幕*分辨率是否与上述针对“大屏幕”的媒体查询
(min-width : 1824px)冲突。大家好，只是想告诉你们，如果你在 Mac 上使用 Less.app 的 Less，它不接受原始的“device-pixel-ratio”1.5 或者实际上是 opera 等效的 3/2。
所有 device-pixel-ratios 都只需要是 2。
只是想它可能会帮助到一些人！
豌豆和玉米。
另外，Chris，您对 URL 输入类型的 HTML5 表单验证严格性有何看法？我真的必须包含我的 http:// - 真的吗？这是怎么回事……
Marcy 显然是 Web 开发新手。
我爱你！
嘿 Chris，很棒的信息。关于如何使用 PHP 检查特定屏幕尺寸（在本例中为 iPhone 或最大屏幕尺寸：320px）有什么想法？
我使用了媒体查询，当我调整浏览器大小时它在浏览器中有效，但它不适用于移动设备，ipad，安卓，安卓手机屏幕尺寸宽度 320px，但它采用了 @media only screen and (min-width:768px) and (max-width:1024px) 这个查询，我该怎么办？
不要忘记 html 页面中的元标签
并且为了选择设计，请考虑使用英寸或厘米而不是像素的宽度和高度。看看我的网站
meta name=”viewport” content=”width=device-width, initial-scale=1″
请告诉我适用于 Retina 显示屏的跨浏览器兼容媒体查询
使用此网站作为参考 http://css3please.com/
大家好，当涉及到响应式设计时，有很多方法可以实现你的目标。Chris 在这里描述的方法可能是最简单和最常用的方法之一。
我学到的一个方法是使用增加最大宽度来定位一般的智能手机设备，例如三星 Galaxy 3 和其他设备。
嗯，Marcy 怎么了？现在没有人验证 HTML 了吗？看来你可能需要在其他领域工作了。
谷歌喜欢有效的 HTML，它的爬虫也是如此。如果你没有有效的 HTML，你的网站就不值得被索引。这是 HTML 5 如此伟大的原因之一。它是语义化的。仅仅因为它有效并不意味着它对您或您的客户有效。
如果您有任何问题，请参阅此内容。
Google SEO 测试 - Google 是否更喜欢 W3C 有效的 HTML 和 CSS？
听着，我在这个行业工作，我根据我的个人经验说话。我了解 Web 标准，并且我每天都手写代码。如果我遇到一个我无法轻易发现的问题，验证是一个潜在的工具，但我们机构的任何人都不会再将验证作为我们常规工作流程的一部分。这就是我的看法。
@f1ss1on：你在那里断章取义。Marcy 并不是说“伙计，只要写糟糕的、破碎的 HTML 就可以了，这很酷！她在说，你不应该太担心验证器，因为它们没有考虑到我们快速发展的生态系统的复杂性。验证器经常会在完全正常的代码上出错。
f1ss1on：但是你的代码在三星 Galaxy 4 和 iPhone 5 上会做什么？你为什么要求像素大小而不是物理尺寸？它只会节省你一遍又一遍地更改相同代码以添加每个新设备的工作量。
Marcy 还说页面折叠是一个神话。这是她又错了的一个例子。这与人们是否知道滚动无关——而是快速吸引观众的观念。将正确的内容放在首屏上方会吸引他们首先滚动。
听起来 Marcy 需要找一家新的代理商了。
我不明白你为什么需要发表这样侮辱性的个人评论。辩论想法很棒——侮辱某人并质疑他们从事某一学科的权利是不成熟和不专业的。
不如让这更多地关于媒体查询和分享知识，而不是贬低别人？每个人都会从更多的代码和更少的负面情绪中受益。
页面折叠不是一个数字术语……它来自报纸（还记得吗？）在街角出售的时代，出版商使用纸张“折叠”上方最激动人心的故事来出售它们。印刷界人士发展到数字领域，并沿用了不可互换的术语……浏览器可以滚动，所以没有首屏上方或下方这样的东西……我见过很多只能左右滚动的网站，那么这些网站的折叠在哪里呢？人们与网站互动，这就是我们构建它们的原因，所以为什么一切都应该在“折叠”之上？这样做是对设计伦理的浪费。
我认为，我所在行业中自称专家的人散布的错误信息是其最大的缺点之一。尤其是当他们像 Marcy 那样将自己的观点作为事实陈述时。初级开发人员每天都被这样的人的评论误导。
你的反应过于剧烈。我没有亲自攻击 Marcy；她试图用她所在机构的做法来证明一个误导性陈述的合理性。我对此作出了回应。
再说一次，你把你的观点说成是事实，把别人的观点说成是错误信息。
如果你认为我指出这一点是在小题大做，我没什么可补充的了。
Marcy，我为侮辱你道歉。我以后会换个说法。
大家好，小心使用媒体查询！它们不是像素精确的。
有时它们只差 20 像素，但有时它们差高达 150 像素……然而，即使是几个像素，在尝试定位某个手机屏幕时也非常糟糕。
嗨，我想知道为什么
@media only screen
and (min-device-width : 768px)
and (max-device-width : 1024px) {
/* 你的样式在这里 */
}
当我使用 ipadpeek 测试我正在工作的网站时不起作用。但是当我删除“device-”时它可以正常工作，它们之间有什么区别吗？谢谢，这是我第一次开发响应式网站，所以我有点困惑。请指教我。
今天这篇文章对我帮助很大 :) 谢谢！
Vhinmanansala，我正在阅读 Ethan Marcottes 的《响应式 Web 设计》，他提到 min-width 和 min-device-width 是两个不同的东西。我想本质上是屏幕不被认为是设备。
大家好.. 我需要你们的帮助..
当我尝试使用这段代码时..
@media only screen and (min-device-width : 768px) and (max-device-width : 1024px) and (orientation : portrait) {
}
但是.. 当我把代码改成..
@media only screen and (min-width : 768px) and (max-width : 1024px){
}
它可以正常工作.. 我很困惑为什么会这样.. 请向我解释..
顺便说一句，这是我的博客 http://idwds.blogspot.com 我正在努力改进..请查看
大家好.. 我需要你们的帮助..
当我尝试使用这段代码时.. 它不能正常工作
@media only screen and (min-device-width : 768px) and (max-device-width : 1024px) and (orientation : portrait) {
}
但是.. 当我把代码改成..
@media only screen and (min-width : 768px) and (max-width : 1024px){
}
它可以正常工作.. 我很困惑为什么会这样.. 请向我解释..
顺便说一句，这是我的博客 http://idwds.blogspot.com 我正在努力改进..请查看
亲爱的 Lil Fab，
这取决于你的代码方法。实际上，如果没有“and (orientation : portrait)”这个术语，它也能正常工作，因为在大多数设备中，这是默认视图。但在某些情况下（可能会有），当设备水平放置时，应该更改 CSS 代码。这取决于你的设计+编码方式。大多数情况下，如果你使用“百分比值”来指定宽度、边距以及填充，则不需要删除的术语。但是，如果你用“PX”（像素）来表示值，则必须分别使用“(orientation : portrait)”和“(orientation : landscape)”。
谢谢！
@media only screen
and (min-device-width : 320px)
and (max-device-width : 480px) {
/* 样式 */
}
我使用此选项为我的一个站点隐藏了一些元素。
它在 iPhone 上运行良好，但在其他安卓手机上不起作用
我一直是这样用它来使其适应网页和移动设备的。
如果我想用同一个媒体查询来定位 iPad 和桌面（最大宽度：768），而不复制代码，该怎么办？
请访问此链接
https://stackoverflow.com/questions/13076371/media-query-for-ipad-and-desktop-max-width
你自己好像在反过来做。从大屏幕到小屏幕。而不是移动优先。
我总是以这篇文章作为参考，但是新的 7 英寸设备呢？
我也用这个作为参考……但是正如 spike 所说的，新的 7 英寸 Nexus 和 iPad Mini 怎么样？最佳宽度是多少？
如果这里有人需要一种方法来快速生成有效的自定义媒体查询，或者需要查找其他特定设备的预设，我写了一个免费的媒体查询工具，叫做 Media Query Builder，你可以在这里找到 -> Media Query Builder
你似乎缺少同时定位 iPad 和 iPhone 的功能
这些信息很有用，但是有没有办法编写最小媒体查询并使其适用于所有尺寸的设备？
很棒的文章，非常方便。
我刚刚发现了一些奇怪的事情，可能会为人们在 Android 设备上使用媒体查询节省很多时间
我正在开发一个移动网站，由于某种原因，运行 Android Jellybean 的 540x960 手机只能识别 360-459px 宽的样式表。当我从标题中注释掉这个样式表时，手机完全忽略了其他的样式表，即使是专门针对其分辨率的样式表。
经过大量的研究，我发现默认的浏览器缩放设置实际上并没有放大浏览器本身，而是忽略了它的物理分辨率，并假装它有一个更小的分辨率。经过一些实验
如果用户的设置不同，似乎无法强制用户的浏览器加载正确大小的样式表。我只是想分享一下，这浪费了我很多时间，最后我可以继续了:) 希望它能有所帮助
大家好，以下是我后来了解到的关于 Android 设备的一些微妙之处
有一些 属性 可以应用于标签，这些属性会改变它们处理缩放的方式。其中之一是：
content="target-densitydpi=device-dpi"它的作用是防止设备在页面加载时缩放。这解决了我在 iPhone 4s 上突然遇到的烦人的加载时缩放问题。用户仍然可以缩放（如果你允许的话），它只是针对设备的实际 DPI 评级，而不是依赖于通常不可预测的自动缩放。我的元标签现在看起来像这样
这允许布局根据任何显示进行完全调整。唯一的障碍是操作系统。由于某种原因，我无论如何都无法让它在 HTC 7 Trophy Windows Phone 上加载而不会被放大。有什么想法吗？这似乎是唯一会导致问题的操作系统。即使是黑莓手机也工作正常。
在另一项调整中，我更新了我的媒体查询，试图忽略大多数平板电脑，同时仍然满足分辨率非常高的手机，例如 HTC Droid DNA（1920x1080，哇）。为此，我只是在主查询下方添加了另一个具有新条件的媒体查询
这样，手机会像往常一样加载，但任何大于 960px 的显示器都必须具有非常高的 DPI 显示才能访问样式，所以希望这将仅适用于手机。这并不完美，因为我没有机会在 Retina iPad 上尝试它（有人知道 DPI 吗？），但它的设计目的是快速提供清晰的划分。
与其试图猜测下一代手机的分辨率会有多高，并让网站不可避免地在未来的一些新设备上崩溃，我认为简单地不设限制，而是使用媒体查询排除我不想要的设备更有意义。让你的移动布局在 iPad 上显示为小屏幕会让你感觉像一个被勺子喂养的孩子，因为按钮现在足够大，可以用拳头砸碎而不是用手指指点。
我发现这里的一些媒体查询有点随意。例如，智能手机横屏查询是
min-width:321px，我的桌面浏览器当宽度大于 321px 时将运行用于智能手机的样式表。鉴于 iOS+Safari 不认为自己是一个手持设备，使用@media handheld and (...不起作用，所以我发现一些与其他不应该冲突的冲突了。经过许多令人沮丧的几个小时后，我开始寻找并在 Stack Overflow 上找到了这个问题，iPad 与 iPhone4 的媒体查询媒体查询正被用来专门针对设备宽度、像素密度（css 比例）和方向。这样一来，一个设备使用另一个不适合它的样式表的机会就非常小了。虽然这可能需要写更多的东西，但你可以在所有设备上获得一致性，而且自从使用这种方法以来，我从来没有遇到过任何麻烦。
我对媒体查询还很陌生。我有一个网站，我正在为它创建一个移动版本。当我在 iPhone 4s 竖屏模式下查看该网站时，320px 无法覆盖 100% 的宽度。我需要将其推送到 375px 才能使其覆盖竖屏视图的宽度。有什么建议吗？
我正在使用：在代码内部
和
html { -webkit-text-size-adjust: none; }在 css 内部我正在使用的媒体查询是
@media (-webkit-min-device-pixel-ratio: 2), (min-resolution: 192dpi)很棒的博客！！提前感谢
我在本地主机上加载的 wordpress 测试站点上尝试了相同的媒体查询。我使用了在线响应式设计工具 http://ipadpeek.com/ 。此工具无法捕获横屏和竖屏模式查询。但是当我通过在 Windows 7 的电脑上更改屏幕分辨率直接测试本地托管的 wordpress 站点时，它可以工作。
我知道这篇文章是以前写的，但是有没有人遇到过“max-device-width”和渲染问题？
我的印象是“max-device-width”只在手机、平板电脑和移动设备上渲染，而不是在桌面浏览器上渲染。
这种情况发生在设置浏览器并且加载带有 @Media 查询的 css 文件的初始加载时。
所以如果我有
桌面浏览器或桌面的屏幕分辨率设置为 1280px，它实际上将渲染 1280px 样式的移动样式，而不是桌面样式。浏览器制造商是否将“max-device-width”纳入了他们的浏览器构建中？任何指针或见解都会很棒。
谢谢。
嗨！
你已经为 iPhone 4 使用了比例，但是什么比例适用于 iPhone 5？
我构建了我的第一个真正的响应式网站，并得到了 CSS Tricks 的大量帮助。我使用 SCSS 构建了它，并使用了 Chris C. 概述的断点的大量媒体查询。我的问题是 - 我只使用了 min-width 和 max-width（没有 min-device-width 或 max-device-width）。这是不正确的吗？据我所知，我的网站在所有设备上都能正常工作，尽管测试 UserAgents 是一件很痛苦的事情。我的大部分测试来自在 Chrome、IE 和 FF 中调整浏览器大小，然后使用 Chrome Dev Tools 在 Galaxy Nexus 和我妻子的 iPhone 上进行测试。以下是我的断点示例。
我完全是这个话题的新手。但这看起来很有趣。你能举个例子说明 @content 是什么意思吗？以及/或者应该在其中声明什么？
非常感谢。
Martin- 当然可以！使用上面的代码，我可以使用 SCSS 和 mixins 轻松地使我的网站具有移动响应能力。我没有在我的样式表的底部创建一个巨大的 CSS 块并将我所有的移动 CSS 放在那里，而是在我设计我的普通 CSS 时添加了我的移动 CSS。然后我使用一个 gem 将所有内容移动到最后进行生产。继续使用上面的断点，我的 CSS 可能会像这样
如你所见，当 SCSS 编译我的样式表时，它将产生以下 CSS
我上面的例子很简单……但是当你将它用于整个站点时，它就会变得非常强大。当我只需要在 640px 的移动设备上返回并编辑一个 div 的屏幕宽度时，我只需在我的 CSS 中转到该类并进行更改 - 我不需要滚动浏览一页移动 CSS 来进行更改。
正如 Chris Coyer 所说，上述方法（使用 mixins 和 SCSS）是你的大脑想要连接点的方式，所以为什么要以不同的方式组织事物呢？自从我开始这样做以来，我可以一边进行移动端编码。我可以将网站的 CSS 和响应式设计同时完成，而不是分成两个单独的项目。
谢谢，它在没有框架的情况下对我有用 :)
嗨，Chris。很棒的文章。我经常参考它。我只是在想，自从你在 2010 年 10 月写这篇文章以来，手机和平板电脑已经发生了很大的变化。更小的平板电脑已经发布，一些手机的分辨率也变得更大。这是否在某种程度上模糊了你建议的不同设备的媒体查询的界限？或者你会说它基本上没有改变？
我一直在对此进行一些测试，使用索尼 Xperia S，它似乎认为设备宽度会随着方向改变（720px 然后 1280px）。
这将使人们使用类似这样的东西来定位 Android
问题是它与 iPad 重叠，并且使用
min-device-pixel-ratio不足以在 iPad 3 上区分它们，因为它们都将其设置为 2有人知道如何让 Android 表现良好，并且不让我的移动网站出现在 iPad 上吗？
阅读这篇文章 http://stackoverflow.com/questions/12061127/css-media-queries-on-nexus-7-display-resolution-not-working-in-code 让人觉得 Android 实际上会很麻烦！
谢谢
Chris
@media screen and (orientation: landscape) 是一个有效的选项，可以与你的媒体查询结合使用。
如果非触控 = 标准桌面
因为浏览器供应商不支持 W3C 的“NOT”选择器，我不得不依赖 JavaScript / jQuery 来隔离我不想在 iOS 和 Android 设备上显示的 CSS。
这篇文章太棒了。我要用它。
Peter-Paul Koch 提供的这个详细的 viewport 浏览器兼容性表格（以及一些相关项目）将帮助任何对这个主题感兴趣的人将事实与乌托邦区分开来。
感谢分享这篇很棒的文章…
但是我们如何使用 pixel-ratio 媒体查询？
我有一个网站 Noobpost 我正在尝试弄清楚我应该使用多少个媒体查询最大宽度大小，现在我有四个，但它似乎在横向视图中不能正常工作。看来我还需要以百分比定位所有内容以使其更流畅。
对于大屏幕，有什么建议吗？
我特别担心行长会变得难以阅读。
你始终可以将内容以正常宽度（例如 960 或 1024px）居中（或左对齐）在页面上，这样就可以使其易于阅读。要填充侧面的额外空间，你可以使用渐变、巧妙的阴影或一些图像来“填充”空白空间。我的网站最大宽度为 960px，因此在 1600 宽的显示器、1900 宽的显示器以及更大的显示器上看起来都一样。一句忠告——在为大屏幕设计时，在大屏幕上进行测试或实际设计真的很有帮助——在 13 英寸的笔记本电脑上很难想象大屏幕。
你好，我有一些问题，在 iPad 竖屏模式下…
你指定了 min-device-width:768px 和 max-device-width:1024px 以及方向为竖屏，并且你也为横屏模式指定了相同的值。实际上，在 iPad 上以竖屏模式查看时，max-device-width 将是 768px，对吗？max-device-width 怎么会是 1024px。
是否有正确的 meta 标签可以与此配合使用？我试图定位 iPhone4 及以下屏幕宽度（而不是 iPad2 及以上屏幕宽度）。但这甚至不适用于 iPhone4。
这是一篇内容丰富的文章，但是我会像我们目前对完全流体布局所做的那样来处理响应式设计。我的个人方法本质上是半流体的，响应式设计只是为了增强内容。
例如，如果我们在容器上应用固定宽度（div 作为最语义化的选择器），那么我们可以通过简单地应用最大宽度、最小宽度和 auto 来实现向后兼容性。当然，这适用于半现代浏览器，我认为这是最佳选择。我们可以根据百分比放大或缩小它，并更改宽度限制，然后我们就有了一个完整的流体和响应式设计。
当然，其他元素需要使用媒体查询进行特定样式设置、重新排列或有时隐藏（我不推荐）。
你好，
我正在开发一个网站，使其具有响应能力。
1) 包括 iPhone 系列在内的手机使用一个 css 文件（包括带有 @media 的竖屏和横屏布局），
2) 平板电脑和 iPad 使用一个 css 文件（包括带有 @media 的竖屏和横屏布局），
3) 以及桌面版本 css（针对大型、中型和小型断点使用 @media 进行分离。）
是否有办法完成像这样的完整解决方法
我知道我可能在这里错了，因为我是新手。请帮帮我。
提前致谢
Chris
CSS-tricks 再次拯救了我的一天！谢谢你！
对于 IE8 或更低版本的浏览器支持媒体查询的最佳解决方案是什么？
你的链接文本在这里… – 是一个用于在 IE 8 以下版本中使用媒体查询的 polyfill。
你好，那么像索尼 Xperia Z 这样的高分辨率新智能手机呢？
它的分辨率是 1920 × 1080，这会是一个问题，不是吗？
@media only screen and (-webkit-min-device-pixel-ratio: 3) and (max-device-width:1920px) and (orientation : landscape) { }
@media only screen and (-webkit-min-device-pixel-ratio: 3) and (max-device-width:1080px) and (orientation : portrait) { }
这是关于响应式网页设计的有用信息！
W3schools.com 错过了关于真实媒体查询的内容！
感谢这份指南。我试图弄清楚你为什么为 iPad 指定方向，而不是为智能手机指定方向。
智能手机媒体查询不应该像这样吗
而不是
你似乎从这些智能手机媒体查询中省略了方向，但为 iPad 指定了方向？手机是否需要方向，还是只有平板电脑需要？
谢谢,
John
http://thesassway.com/intermediate/responsive-web-design-in-sass-using-media-queries-in-sass-32
很棒的文章，伙计，是的，这篇文章已经写了 3 年了，但我仍然觉得它很有用 :)
我已经多次使用这些媒体查询，所以非常感谢有这个很棒的资源可用。
我想分享一下，它帮助我解决了一些样式问题，交换了竖屏和横屏智能手机媒体查询，以便智能手机媒体查询如下
智能手机（竖屏和横屏）....
智能手机（竖屏）....
智能手机（横屏）....
这有助于防止某些样式在某些手机上被覆盖。
iPad 和其他所有东西似乎都运行良好。
好的，忽略我上面关于交换媒体查询的评论。我刚刚注意到缺少了一个 }，这导致缺少 } 之后的样式无法工作。唉！应该看到那个！
偶然发现这是一个非常好的资源！
再次感谢 CSS-Tricks，你们继续创作出我每天都在使用的高质量作品！
嗨，我刚刚尝试了这个代码片段，不知何故它对我不起作用。它没有根据设备或我在浏览器中调整屏幕大小时设置正确的 CSS。所以下面是对我有用的。它允许我在手机和桌面的小/调整大小的屏幕尺寸上应用 css
使用 device-width 时，可以在浏览器中测试吗？
艾尔，
我知道这可能不是你想要的答案，但你为什么需要 device-width？你是否有特定的理由使用它？我通常使用 Min/Max 宽度构建我的网站，我使用 SASS 断点进行编码，当我投入生产时，我会保留它们。我能看到自己使用 device-width 标签的唯一方法是基于 HTML 的某种移动应用程序。
使用 Min/Max 宽度，你还可以允许新设备出现，无论设备尺寸如何。我喜欢开发所有尺寸 - 这意味着当我使用断点时，我希望我的网站在每个宽度上看起来都达到 99-100%，即使它介于正常设备宽度之间。使用 Min/Max 宽度，你可以通过拖动浏览器来测试这一点。
换句话说 - 除非你能说出使用 device width 的理由，否则坚持使用 Min/Max width。
你好，我在媒体查询方面有问题
我使用了两个媒体查询
1
@media only screen
and (min-width : 768px)
and (max-width : 1024px)
and (orientation : portrait) {}
2.
@media only screen
and (min-device-width : 768px)
and (max-device-width : 1024px)
and (orientation : landscape) {
}
=> 我已经正确地使用了这个条件，但是当我将设备从横向旋转到纵向或从纵向旋转到横向时，在没有页面刷新的情况下不会采用该条件...
在 head 中添加
<meta name="viewport" content="width=device-width">特定查询的特定样式为什么在没有 !important 的情况下不起作用
例如
@media only screen and (max-width: 320px) {.class1 { width:100%;} }
@media only screen and (max-width: 480px) {.class1 { width:60%;} }
@media only screen and (max-width: 768px) {.class1 { width:80%;} }
我还没有尝试过这段代码，但有人知道它是否有效吗？
嗨，帕特里克和弗兰克 - 鉴于移动平台不断发展的性质，固定宽度不如百分比设置灵活 - 因此现在描述一个设定的尺寸很可能会在未来损害 A N 其他平台。并为你创造更多工作。
因此，% 尺寸比 px 设置更好。
祝你好运！
大家好，
请告知 Nook Color 设备的屏幕宽度
提前致谢，
K. 纳加拉詹
这对 5 年前的手机也有效吗？
虽然以前我曾为响应式 Web 应用程序调整过现成的解决方案，但对我来说，2013/2014 年是为 SharePoint 2010 和 2013 从头开始构建响应式标记的年份。我使用了这些 @media 查询，效果很好。它们几乎适用于任何移动设备，前提是设备的视口分辨率符合这些参数。使用这些查询，你可以隐藏/显示内容容器（div 等），根据用户用来访问你的 Web 应用程序的设备，为你的用户创建独特的体验。
我对这个网站的响应式设计印象非常深刻，不仅是内容如何改变宽度，还有你们对 UI 的每一部分的关注，尤其是导航和横幅广告。真的令人印象深刻，CSS-Tricks，我订阅了，并期待着收获很多。做得好。
本教程非常好，但为什么这些媒体查询在 ie9 中不起作用，是否有任何特殊代码可以使其生效………
在 IE9 中完美运行。尝试将其添加到 head 部分。
那么新的更大的智能手机呢，我们还使用 max-width: 480px 吗？但现在它们的分辨率要大得多，iphone 4S 有 960px，最新的 Nexus 还要高 - 这是否意味着在这些设备上用户会看到网站的桌面版本？我有点困惑
一个非常翔实的页面，我将继续参考，谢谢！
min-width、min-device-width、max-width、max-device-width、min-height、min-device-height、max-height、max-device-height 都是不同的。
如果使用 min-device-width 或 max-device-width，请确保还定义了 min-width 和 max-width（如果目标是高度，也是如此，是的，目标高度的人确实有效）。
此外，至少在你的 head 部分使用这个
但最好使用这个如果你只使用 @media only screen and (min-width: NNNpx) 并且没有 max，预计会出现问题，但它们是可以解决的……尝试将你的代码分解成架构（尺寸和大小）和设计（颜色和图像），并拥有单独的文件……架构文件应该有 min/max 定义开始和结束点，而 min- 可以向上（或向下，取决于你是从移动优先开始还是不）携带设计元素转换。
min-width、min-device-width、max-width、max-device-width、min-height、min-device-height、max-height、max-device-height 都是不同的。
如果使用 min-device-width 或 max-device-width，请确保还定义了 min-width 和 max-width（如果目标是高度，也是如此，是的，目标高度的人确实有效）。
此外，至少在你的 head 部分使用这个，但最好使用这个
如果你只使用 @media only screen and (min-width: NNNpx) 并且没有 max，预计会出现问题，但它们是可以解决的……尝试将你的代码分解成架构（尺寸和大小）和设计（颜色和图像），并拥有单独的文件……架构文件应该有 min/max 定义开始和结束点，而 min- 可以向上（或向下，取决于你是从移动优先开始还是不）携带设计元素转换。
接受代码似乎有问题……
此外，至少在你的 head 部分使用这个 **<meta name=”viewport” content=”width=device-width, initial-scale=1.0″>** 但最好使用这个 **<meta name=”viewport” content=”width=device-width, initial-scale=1.0, maximum-scale=1, user-scalable=no, target-densitydpi=device-dpi”>**
你好,
我只需要在我的样式中添加这个 css 就可以了？
是的，当然还要添加样式。以防万一你不知道，你还需要在 html 文件的 中添加一个 View Port 元标记。
你的网站非常有帮助。当我在网页设计中遇到任何问题时，我会参考你的想法，它们几乎是完美的。
谢谢你，伙计。
感谢上帝，因为我们有像你这样的人。
你好，我的网站没有响应。我使用的是 joomla 3.3.0，如何使其具有响应性，当在移动设备中打开时，它将适合其屏幕大小，并且不会更改或改组任何图像，它应该看起来与桌面浏览器中的完全一样。有人可以帮助我吗？
我找到了，我只是删除了 index.php 中 meta 标签中的 width=device-width，瞧！我的网站适合屏幕，没有任何 @media 标签！
正是我在寻找的，非常感谢！开发一个时髦的日历，它在手机上无法使用……好吧，至少现在还没有！ ;)
手机的时髦日历只需添加 This 即可阻止键盘打开
你好,
iPad（纵向）查询是否仅针对纵向？
或者它应该是
@media only screen
and (min-device-width : 768px)
and (max-device-height : 1024px) {
/* 样式 */
}
我把它做成了一个快速网站，所以想分享给大家。非常基础，当屏幕大小调整时，颜色和内容会发生变化。 http://demo.slickdesign.com.au/responsive-template/
让我分享一下我的 @media 查询。我在我自己的 WordPress 主题中使用了这个方案，目前它运行良好。您怎么看？
@media only screen
and (max-width : 1024px) { }
@media only screen
and (min-width : 769px)
and (max-width : 1024px) { }
@media only screen
and (max-width : 768px) { }
@media only screen
and (min-width : 481px)
and (max-width : 768px) { }
@media only screen
and (max-width : 480px) { }
@media only screen
and (min-width : 321px)
and (max-width : 480px) { }
@media only screen
and (max-width : 320px) { }
重要的是要记住，max-width 和 min-width 包括引用的像素。例如，min-width: 768px 包含 768px 位置，max-width: 768px 也是如此。它被使用了两次，我们对它的控制较少。在这种情况下，最好将 min-width 增加一个像素；例如，min-width: 769px。
方案
= 769, <= 1024
= 481, <= 768
= 321, <= 480
<= 320
非常感谢 Gerard！这真的很有帮助。
感谢 Gerad 分享代码。它很方便。
是的，如果您使用 css 显示和隐藏某些元素，这一点至关重要。我不会使用“-device-”，否则当您调整浏览器大小时，它会看起来很糟糕。仅供参考。我从不使用“-device-”，我认为没有必要，因为所有设备都将属于 Gerard 发布的上述 @media 查询。请将这些文件保存好，并感谢分享。
您好……您是否已将此内容发布到我可以将其添加书签以便快速找到的在线位置？我正在寻找一个可以在当前和未来项目中用作参考的在线指南，因为这个指南似乎已经过时了。感谢您提前回复。
你好，
我想知道为什么存在这么多不同的媒体查询像素集来以某种方式覆盖每个潜在的屏幕分辨率。如果可能在一年后由于新硬件而需要完全不同的分辨率，会发生什么？有没有一种方法可以更灵活地使用基于实际字体大小的屏幕比例……例如使用属性“em”？
我在我的 css 文件中使用 @media only screen and (max-width: 768px) 等，但我想根据屏幕大小显示或不显示我的主 html 页面中的图像。我如何控制它？你以前做过吗？如果屏幕尺寸小于 1024px，我只想弹出不同的图像。
大家好，
在这里，您可以对设备使用以下内容
@media query only screen and (max-device-width: 480px){
/*480px 设备的样式*/
}
嗨
我的问题是，当我使用 @media (max-width: 320px) 时，页面工作正常。但在那之下。当我为 @media (max-width: 800px) 编写代码时，320 不起作用，只是 @media (max-width: 800px) 工作正常，,,,简而言之，两者不能同时工作
谁能回答？
会等待 :)
嘿，Chris，感谢你的有用工作！
你会在不久的将来升级这篇文章吗？
再见
Muhammad，
在不同条件之间使用 and 关键字
例子
@media (min-width: 321px) and (max-width: 800px) {}
@media (max-width:320px) {}
你能告诉我 iPad mini 的媒体查询吗？iPad 的媒体查询不适用于 iPad mini。请帮我解决这个问题
@media screen and (device-width: 768px) and (device-height: 1024px) and (-webkit-device-pixel-ratio: 1){
}
你是对的，但我的问题是使用你的媒体查询时，平板电脑和 iPhone 的响应式媒体概述不智能。
你好，
我尝试了许多媒体查询，但我的网站在 Samsung Galaxy S3 中没有转换为响应式风格，在所有设备上网站都以响应式风格打开。
任何人都可以告诉我 Samsung Galaxy S3 的正确方法和正确的媒体查询。
这有效吗？
http://nmsdvid.com/snippets/#
响应式设计代码编写者如何处理宽度比旧手机多的像素的手机。例如，我的手机 (ZTE Warp Sync) 的尺寸为 1280 x 720 像素（而不是我在教程和示例代码中看到的微小 340px），像素密度为 293.72。1280（横向）或 720（纵向）都不被认为是我见过的任何媒体查询中的手机尺寸。我制作的某些代码会将网站呈现为桌面，而不是手机，除非我遗漏了一些东西。
如何逐步编写响应式模板教程
嗨
我的代码不起作用 @media (max-width:320px) {}
大家好。
我想使用特定浏览器定位特定设备。
现在我该如何实现？我是否嵌套媒体查询？
例子
该设备嵌套在屏幕参数中。
请原谅代码，但你明白我的意思。
或者我使用
到目前为止，我对两者都没有运气。
任何帮助将不胜感激。
谢谢,
Michael
所以，在我看来，我一直都在错误地设置断点
@media(max-width:768px)
@media(min-width:768px)
我以为那是正确的方法。我在 768px 宽的设备上遇到了很多问题。现在我知道为什么了 :|
保持简单
http://bradfrost.com/blog/post/7-habits-of-highly-effective-media-queries/
回复 John Gerome 的帖子：保持简单。
http://bradfrost.com/blog/post/7-habits-of-highly-effective-media-queries/
我喜欢这种方法 - 谢谢。
问题：如果我将所有内容都放在 em 中（即所有元素、文本等）并将布局放在 % 中（或者这也应该是 em？）- 你能否分享一个关于使用最小数量的媒体查询和 em 值的简单建议。
你好，
我有一个小问题。我在我的 HTML 代码中写了这个
这只是一个例子。我的问题是，当我使用与我在此评论中编写的代码相同的代码编写另一个替代样式表时，当我更改浏览器宽度或高度时，样式表不会覆盖其他样式表。这是错误吗：...(min-width: 0px, max-width: 800px)” ?
我必须像这样编写代码吗：...(min-width: 0px) and (max-width: 800px) ?
希望我的英语足够好，能让我理解。
如果能得到答复，我会很幸运。
谢谢
嗨，我正在使用（横向和纵向）的屏幕尺寸 (1024×768)。但是当我再次将此方法用于屏幕尺寸 (736×414) 时，它不起作用。有什么建议吗？并且还请告诉我这个方法可以在桌面浏览器中看到吗？
您好！此代码是否适用于 mini iPad
/* iPads (portrait) ———– */
@media only screen
and (min-device-width : 768px)
and (max-device-width : 1024px)
and (orientation : portrait) {
/* Styles */
}
如果不是，请告诉我，谢谢。
非常感谢，工作正常。
我正在使用响应式主题。如果我想在桌面上*隐藏*我的子菜单项，但在移动设备上*显示*它们怎么办？我在移动设备上使用“响应式菜单”插件，它为那里的菜单提供了一个漂亮的滑块展开/折叠外观。但是，在桌面上，我不希望显示子菜单。主菜单项（例如，关于）将带您到网站的该部分/页面，从那时起，侧边栏导航将用于所有关联的页面。
谢谢你。真的很有帮助。:)
为什么没有 Windows phone 设备？
Chris 是一位 CSS 超级巨星，而且人非常好。我给他发了幾封郵件，他总是回复我。我和 Paul Irish 都非常感谢你。
在本文的先前版本中，Chris 将所有内容都放在一个大的章节中。这非常有帮助。我在下面做了同样的事情……
http://codepen.io/anon/pen/LEoRNz.css
感谢更新的查询，它们运行良好。
为什么没有 Windows phone 设备？
你好，
我有一个关于媒体查询的通用问题。
是否可以定位单个屏幕尺寸，而不是使用 min-width 和 max-width 等……
我想从笔记本电脑的尺寸开始
1024 x 768
到
1920 x 1080
然后最终会在移动设备上工作，但我发现以这种方式定位特别困难。我尝试了很多方法，但似乎如果我使用 min-width、max-width 例如，我通常最终会只使用一个媒体查询来更改多个分辨率的样式。对此有什么解决方案吗？我知道你们很多人都会经历这个（刚开始的时候），但是你们是如何解决这个问题的？有什么技巧和/或建议吗？
谢谢
Brian
你好。
我有两个用于食品菜单项的 div 容器。一个是名为 menu-container 的类，另一个是名为 mobile-menu 的 id。我想在桌面上只显示 .menu-container，在手机和平板电脑上只显示 #mobile-menu。我将 max-width 设置为 1047，将 min-width 设置为 1048。当我在移动设备上查看它时，一切看起来都很好，并且工作正常，但是当我在桌面上查看它时，两个菜单都会显示。
这让我很抓狂，我不知道如何解决这个问题。
谢谢,
Carlie
这些媒体查询似乎在 iOS 8.3 上不起作用（尚未在较旧的操作系统上测试）。除非我遗漏了某些东西。例如，这里有一个简单的测试。对于 iPhone4/4s，背景应该是红色的。对于任何更大的屏幕，它应该是蓝色的。
但它最终在 iPhone5/5s、iPhone6、iPhone6Plus 上是红色的。在 iPadAir、iPad Retina、桌面电脑上是蓝色的。
我如何让它只在 iPhone4/4S 上工作？（基本上是较短的屏幕）
我用 bootstrap 编写了 4 个标准媒体查询。没问题。
但是由于我使用了 padding 或 margin，所以在媒体查询之间的像素中它不正常。
我该如何解决这个问题，还有很多其他媒体查询吗？
你好，我想知道横向和纵向宽度和高度的媒体查询
这真的很好！！
感谢您的撰写。这是一个很棒的资源！
是否可以定位特定的屏幕宽度和高度？例如，我们开发了一个触摸屏信息亭/网络应用程序，它只是一个响应式网站，专为特定的触摸屏显示器宽度和常用的移动设备尺寸量身定制。问题在于通过最小宽度和最大宽度导致目标尺寸“溢出”，导致触摸屏上的布局修复破坏了移动设备上的布局。如果有一种方法可以将特定宽度与特定高度定位，那可能会解决我们的问题。
任何帮助将不胜感激！
似乎最好的主意是选择手机最宽的纵向模式，并简单地让所有纵向尺寸的移动设备设计都从该尺寸开始。由于 iPhone 6 的原因，您将在 736px 宽度而不是 480px 宽度处折叠列和其他内容。
这是最简单的。
但是，Zurb Foundation 正在做的事情不是更简单吗？那么 device-aspect-ratio 而不是像素呢？
伙计，我在这个媒体查询方面遇到了麻烦。我按照一个关于如何构建导航栏的教程进行操作。我根据教程构建了我的导航栏。它有点不同。我只是从教程中借鉴了基本思想。无论如何，这是我的问题，当屏幕较小时，导航栏会发生变化。您可以单击导航栏。它会打开一个垂直导航栏（我称之为迷你菜单）。当迷你菜单打开时，如果您调整浏览器窗口大小并使其大于 840 像素，则旧导航栏将错位。您可以在我的网站上看到我在说什么。 http://JetBBS.com/test2.html。您对如何解决此问题有任何想法吗？我已经尝试了几乎所有我能想到的方法！我认为我需要在 jQuery 代码 (http://JetBBS.com/js/click.js) 中做些什么，但我不确定是什么。jQuery 不是我的强项。谢谢！
我想知道媒体查询和断点之间的区别，它们之间有什么区别吗？
如果有，请回复…
谢谢。
有什么特殊原因导致目标是 screen 而不是 all，如
@media all and (min-width: 768px) {}
对不起，有人可以解释这篇文章何时以及如何有用吗？
例子
iPhone 4 和 4S 部分中的查询（复制/粘贴如下）将影响比 iPhone 4 和 4S 更多的设备。
/* ———– iPhone 4 和 4S ———– */
/* 纵向和横向 */
@media only screen
and (min-device-width: 320px)
and (max-device-width: 480px)
and (-webkit-min-device-pixel-ratio: 2) {}
它将影响例如
iPhone 5
iPod Touch
LG Optimus G
Samsung Galaxy Note
Samsung Galaxy Note 2
Samsung Galaxy S5
Samsung Galaxy S3
Samsung Galaxy Nexus
LG Nexus 4
Microsoft Lumia 830
Sony Xperia S
……以及更多设备。那么将其指定为“iPhone 4 和 4S”有什么用呢？
另一件事。在查询中 - (max-device-width: 480px) 如何与 iPhone 4 和 4S 相关联，即使这两个设备的 device-width 是 320px？
我认为开发者展示的是各种 iPhone 设备的媒体查询。是的，它适用于其他设备，但它肯定适用于 iPhone 4 和 4S。我相信这就是为什么他将它归入 iPhone 部分的原因。他们基本上是在说，嘿，这是 iPhone 4 和 4S 的媒体查询。使用相同分辨率的其他手机也将包括在内，但如果您正在寻找支持 iPhone 4 和 4S 的代码，那就是了。
对于 iphone 4 和 4s，最大设备宽度为 480px，这是横向模式的宽度。
对于 iphone 4 和 4s，在横向模式下，device-width 可能为 480px——但前提是这两款设备是安卓手机。
Device-width 在 IOS 和 Android 上的工作方式不同。对于 Android，它（通常/并非总是）是两个 (2) device-width。一个用于纵向方向的短边，另一个用于横向模式的长边。
然而，在 IOS 中，只有一个 (1) device-width。它是较短的一边，无论是什么方向。所以实际上，对于 iphone 4 和 4s，device-width 是 320px——即使在横向方向也是如此。
另一个问题是不同的浏览器对 device-width 的响应不同。例如：Android 默认浏览器和 Dolphin（但不是 Chrome、Opera、Firefox）使用物理值而不是通常的 CSS 像素。
所有这些加在一起意味着使用 device-width 进行页面布局与使用随机数相差不远 :|
很酷的东西，
那么超过 1244px 的更大屏幕呢，比如 1824px……
我们可以使用
@media screen
and (min-device-width: 1800px)
and (max-device-width: 2200px)
and (-webkit-min-device-pixel-ratio: 1) {
}
太棒了！ :-D
我非常高兴。谢谢你。
我根本不是开发人员，但我正在尝试——感谢所有在这里发帖的人。它帮助了我。有人可以告诉我为什么我在此代码中返回了两个广告吗？或者我需要如何更正它？非常感谢。
.adslot_1 { width: 300px; height: 250px; }
@media (min-width:300px) { .adslot_1 { width: 320px; height: 50px; } }
@media (min-width:500px) { .adslot_1 { width: 320px; height: 50px; } }
@media (min-width:600px) { .adslot_1 { width: 320px; height: 50px; } }
@media (min-width:800px) { .adslot_1 { width: 320px; height: 50px; } }
@media (min-width:900px) { .adslot_1 { width: 300px; height: 250px; } }
@media (min-width:1024px) { .adslot_1 { width: 300px; height: 250px; } }
<script async src=”https://#/pagead/js/adsbygoogle.js””>
(adsbygoogle = window.adsbygoogle || []).push({});
var resizeTimer;
function resizer() {
googletag.pubads().refresh([window.Leaderslot]);
}
window.addEventListener(“resize”, function(){
clearTimeout(resizeTimer);
resizeTimer = setTimeout(resizer, 250);
});
我认为这是发布我之前问题的更好方式。抱歉。
我根本不是开发人员，而是在尝试 - 感谢所有在此发帖的人。它帮助了我。谁能告诉我为什么我的代码中返回了两个广告？或者我需要如何更正它？非常感谢。你可以在这里看到代码
http://codepen.io/anon/pen/EVPaZJ
我把所有这些都变成了 LESS mixins – 享受吧：https://github.com/aliencreations/responsiveless
如果任何人对窗口大小等有疑问……请放置此 JavaScript 警报以了解有关窗口大小（宽度和高度）和设备像素比的所有信息，以帮助您更好地开发媒体查询。谢谢
JavaScript 代码
alert(
“设备像素比：” + window.devicePixelRatio +
“\n设备宽度：” + window.innerWidth +
“\n设备高度：” + window.innerHeight
);
*注意：“\n” 等于换行，顺便说一句 :)
ipad mini 和 ipad 1-2 的查询重复，这有点令人困惑。
我正在制作一个网站，但不知道在我的 CSS 中应该放哪些像素值。您建议三个最基本的宽度范围是什么？
例如
嘿，奇普
避免很多麻烦——不要使用设备宽度。这是浪费时间。为什么？因为不同的设备“报告”的方式不同。这意味着结果将是随机的，因此无用。
我已经用很多设备进行了多次测试。如果人们只使用 iPad 和 iPhone——它会起作用。然而，在 Android 方面，它是不一致的。所以，你无法控制你想控制的东西。
（您可以阅读更多关于此的详细信息，大约 7 个帖子）
干杯
使用特定于设备的视口并不是很有远见。我同意这篇文章中的观点
https://responsivedesign.is/articles/why-you-dont-need-device-specific-breakpoints
我只想知道如何设置媒体查询以使其与大多数设备兼容。特定于设备的不是我想要走的路线，因为有数量惊人的设备，但我仍然想知道我应该使用的基本媒体查询断点以及这样做的最佳实践。有什么建议吗？
太棒了……这正是我一直在寻找的。
最小宽度和最小设备宽度有什么区别？
网页设计培训
我需要针对 Microsoft/Nokia lumia 520 及更高版本的 Windows 的媒体查询。
请帮帮我。
查询更新了吗？
帖子说它自 2010 年以来就没有更新过……
太棒了！这对我帮助很大。
哇，你的教程很棒，可以更好地理解手机媒体这个词，这是我为我的两个网站提供的响应式
/* 菜单 */
@media (max-width: 820px) {
#tel-mobile {
font-size:30px;
line-height:20px;
font-weight: bold;
color : white;
width:110%;
margin-top:20px;
}
#title-header-mobile{
font-size:20px;
line-height:40px;
font-weight: bold;
color : white;
}
}
.menu-responsive-titre li{
font-size:17px;
font-family:’font-h2′;
text-align:center;
}
@media (min-width: 820px)
{
.haut_bloc_responsive {
display:none;
}
}
http://plombier-sos.com/ 和 http://serrurier-paris-urgent.com/
如果你有什么可以改进我的代码 CCS 的地方，请告诉我，谢谢，请随时帮助改进此代码
你列出每一个设备，这很酷。虽然它非常有用，但它可能非常令人生畏和不知所措。
我通常在我的网站上使用 4 个范围，那就是……
1) 可穿戴设备的最小尺寸，
2) 手机的较小尺寸，
3) 平板电脑的中等尺寸，以及
4) 笔记本电脑和台式机的最大尺寸。
再次感谢您提供的详细列表。这是一项很大的工作，我向你鞠躬，先生。再次感谢您在这个网站上的出色工作。我从这个网站学到了很多东西。
http://eighttech.com/projects/8com/vpage.html
请提供此 URL 中的问题
我在 iphone 中遇到了一些问题，而且我没有 iPhone 设备
请帮忙…
你好，
你的 Nexus 7 的设备宽度错误，它是 960px 而不是 906px。
你能解释一下你为什么使用这样的媒体查询吗？@media (max-width: 48.75em)
你好，
我想知道有多少种媒体屏幕尺寸。
请帮帮我 !!!!!!!!
我写了一个关于它的小型库，我希望我能更多地开发它，看看 这里
在上面的帖子中，我看到了 Iphone 4 到 Iphone 6/6 Plus 的 CSS 脚本。期待 IPHONE 7 和 7 plus 的分辨率（最小和最大尺寸）。你能分享一下细节吗？
/* ———– iPhone 6+ ———– */
/* 纵向和横向 */
@media only screen
and (min-device-width: 414px)
and (max-device-width: 736px)
and (-webkit-min-device-pixel-ratio: 3) {
}
/* 纵向 */
@media only screen
and (min-device-width: 414px)
and (max-device-width: 736px)
and (-webkit-min-device-pixel-ratio: 3)
and (orientation: portrait) {
}
/* 横向 */
@media only screen
and (min-device-width: 414px)
and (max-device-width: 736px)
and (-webkit-min-device-pixel-ratio: 3)
and (orientation: landscape) {
}
“如果你认为响应式很简单，我为你感到难过，孩子。我们有 99 个视口，但 iPhone 只有一个。
——乔希·布鲁尔，2010 年 3 月 10 日”
喜欢那句话，介意我在我的网站上使用它吗？
根据 MDN https://mdn.org.cn/en-US/docs/Web/CSS/Media_Queries/Using_media_queries，分别使用
device-height和device-width、min/max-device-height和min/max-device-width已被弃用，不应再使用。现在看来，您真正要做的就是使用台式计算机和 Chrome Web 检查器工具，将您的网站设计为在任何看起来不错的地方进行断开。
视网膜和其他高像素密度显示器到底发生了什么似乎并不重要，因为显然它们使更高数量的像素显示得就像与常规显示器相同数量的像素一样。
基于此，768px 对于平板电脑来说仍然是一个合理的断点，而 480px 和 320px 对于手机来说似乎是一个合理的断点。就媒体查询而言，这些尺寸在类视网膜显示器上实际上是 1.5 倍、2 倍、3 倍还是更高似乎并不重要。
不幸的是，chrome web 检查器工具对于评估 Safari 的 iPhone 媒体查询并非完全可靠。
当然，这里只是个人意见，但你的网站真的不应该关心它运行在什么设备上。CSS 媒体查询应该用于调整网站布局，可能还有视觉样式，以针对设备屏幕分辨率（视口大小）提供最佳的用户体验。如果这是你的事情，断点可以根据运行时视口的高度（100% HTML 元素高度，或从中派生的 calc() 等）来确定。
如果你真的需要提供特定于设备的内容，使用 JavaScript 或服务器端脚本查询用户代理字符串是一种解决方案，但由于用户代理字符串可以很容易地更改，因此它并不是超级可靠。
针对视口进行设计，而不是针对设备 :)
你说不要使用特定设备的媒体查询，然后又给我们提供了一堆特定设备的媒体查询。这让我有点困惑。
我正在使用LESS，我想知道如何将媒体查询合并到一个变量中，以创建一个通用的“移动设备”媒体查询（范围从市场上最小的流行视口到最大的流行视口大小）？有什么想法吗？
大家好
你们好吗
我最近开了一个博客。我对CSS不太了解。这就是为什么我的网站速度很慢。请给我建议，以便我的网站速度提升，并且Google开始收录。请提供适用于手机、平板电脑、台式机和笔记本电脑的CSS代码。我真诚地希望你能帮助我。
请帮忙
我的网站
http://www.ohknowledge.com/
嗨 Suil,
听起来你需要一些建议。这篇文章中的代码片段将帮助你调整特定设备的布局，但速度最终取决于你编写的CSS、设计的复杂性和许多其他因素。如果你有具体问题，请在我们的论坛中发布——那里有很多很棒的帮助。 :)
干杯!
我看到这篇文章最后更新时间是2017年10月9日。不好意思贪心，但你有更新包含三星Galaxy S7和S8吗？
我也是刚刚开始接触响应式设计的这一部分（我已经使用了flex布局和rem单位）。我非常感谢这个页面及其特定于设备的内容。对我来说，它就像我走进这个设备雷区时腰间的手枪。我希望我永远不必使用它，但我很高兴它在那里。
这也是了解流行设备，然后通过更通用的媒体查询将它们分组的好方法。这是有用的数据。
感谢大家帮助我找到适合所有设备的尺寸。
建议：如果你仍然犹豫不决，无法确定合适的屏幕尺寸，首先请使用谷歌分析检查你的访客主要使用哪种智能手机或平板电脑。之后，你可以指定一些适合你网站的屏幕尺寸。
很棒的文章，谢谢。我想问一件事，如果我想针对特定尺寸/设备，是使用一个包含各种断点的样式表更好，还是调用特定于该设备的单独样式表更好？
你好，
你的文章非常好，也很有帮助。我是根据我项目的建议来到这里的。
我的代码中有这些媒体查询，我不确定如何改进它
伙计，为什么不使用min-device-width + min-device-height？我尝试了媒体查询，但在使用iPhoneX时卡住了。花了几个小时，我意识到我可以通过min-device-height获得更好的结果。
干杯
这篇文章不应该更新为使用
min-resolution和max-resolution吗？那27英寸的5K iMac Retina呢？
我想让页面响应，我应该先从手机尺寸开始吗？
嘿
我注意到iPad Pro 10.5的min-device-width和max-device-width相同。这是正确的吗？
@media only screen
and (min-device-width: 834px)
and (max-device-width: 834px)
and (orientation: portrait)
and (-webkit-min-device-pixel-ratio: 2) {
}
/* 横屏 /
/ 声明min-width和max-width相同的值，避免与桌面设备冲突 /
/ 来源: https://medium.com/connect-the-dots/css-media-queries-for-ipad-pro-8cad10e17106*/
@media only screen
and (min-device-width: 1112px)
and (max-device-width: 1112px)
and (orientation: landscape)
and (-webkit-min-device-pixel-ratio: 2) {
}
能否提供针对11英寸iPad Pro的媒体查询？
嘿 sai！它就在那里，在表格/iPad下，作为10.5英寸的型号
如何在移动浏览器（除Chrome之外，例如vivo浏览器）上使网站响应？
这些查询算作移动优先查询吗？
不完全是。虽然移动优先是一种包含很多内容的策略，但在CSS媒体查询中，这意味着基本样式是为移动设备编写的，然后，从那里开始，使用媒体查询将样式应用于更大的屏幕。这里的媒体查询是针对特定设备的，而不是从移动设备开始，然后向上扩展。
移动优先方法如下所示
注意“min-width”是如何使用的。它相当于说“从这一点开始应用这些样式”，它覆盖了前面较小设备的样式集。这就是移动优先：从小处开始，然后向上扩展。
你可能想在这里的某个地方注明device-width和device-pixel-ratio现在已被弃用：https://mdn.org.cn/en-US/docs/Web/CSS/Media_Queries/Using_media_queries#Media_features
即使这篇文章很有趣，我也在寻找与设备尺寸/css相关的信息，我设法在这里找到了这些信息！非常感谢！
但是……显示器呢？你们会有一个包含所有/大多数显示器尺寸的列表吗？例如 21" 27" 32" 等等？
谁能告诉我如何实现10.5和12.9版本iPad的css，因为上面提到的css不起作用
我遇到了同样的问题。
你能告诉我，为了使页面响应，我是否应该先从手机尺寸开始？
你好！我建议你编写所有样式，就好像它们是移动样式一样。然后，当你需要为更大的屏幕添加额外的样式时，使用媒体查询来定位这些样式。
这里有一个过于概括的例子
你能折叠评论吗？这样滚动就不会“稍微一动就跳过我想要看到的手机”。我注意到你已经更新了布局，这有很大的帮助，但是如果能用我的wacom笔滚动而不用哭泣那就太棒了。
我们最近推出了一个使用响应式设计的新网站。
但是，我们从一些用户那里听说，该网站在某些移动设备上没有响应：HTC、Window 的手机等。
当我在模拟器中测试设备突出显示的网站时，它看起来很好，但对于某些设备来说，它似乎仍然不起作用。
有什么想法吗？
https://www.servertrafficweb.com/offshore-dedicated-server.html
检查他们正在使用的浏览器 - 你很可能是在Chrome中进行测试。
感谢这篇文章和所有评论。信息量很大。
我有两个问题。
建议在媒体查询中使用rem单位作为字体大小吗？或者其他单位类型（如px）在媒体查询中更好吗？
将媒体查询从已经很长的样式表卸载到它们自己的外部样式表有什么“陷阱”（如果有的话）？
再次感谢!
有什么方法可以知道设备的物理尺寸（以英寸或厘米为单位）？例如，2532×1170 的分辨率可以存在于 5" x 2.5" 的智能手机上，也可以存在于 7" x 3.5" 的迷你平板电脑上，这也可以是大型智能手机的尺寸。或者 10" x 5" 的平板电脑。知道设备的物理尺寸将有助于确定要显示的图像的大小。对于智能手机，你可能希望使用屏幕的一半来显示图像，但对于平板电脑，你可能希望使用屏幕的四分之一。
有没有一种方法可以根据设备类型（例如平板电脑）而不是像素来设置媒体查询，只是它识别出它是平板电脑并会显示小屏幕设计？
我的例子是，一台拥有 1200px 屏幕的 iPad，我不希望它显示桌面设计，但同时 1200px 的桌面屏幕仍然应该使用桌面外观。
我有一个问题，我想在移动预览中将表格内容显示为单个表格，因为我已经使表格根据后端的数据量重复显示，但是当我打开移动预览甚至在移动设备上时，它显示的数据与桌面视图中的数据相同。如何根据设备区分这一点？谢谢
大家好,
请问,
如何在 Windows 10 的桌面窗口上查看 Mac 视图？
对于平板电脑，还可以参考
pointer: coarse。此讨论很有帮助：https://bugs.webkit.org/show_bug.cgi?id=209292
抱歉，我的意思是 any-pointer
你好，如何让我的文本适应不同的设备？如果我这样做
它在我的笔记本电脑上看起来不错，但在我的手机上不行。
有没有办法让它根据所使用设备的大小进行调整？
谢谢