html - 媒体查询最大宽度无法正常运行

标签 html css responsive-design

大家好!我目前正在开发一个网络应用程序,我正在使用媒体查询,旨在支持移动和桌面。

我尝试使用 max-width: 414px 作为我的第一个断点,以在当前的 iPhone 和其他屏幕尺寸较小的手机上工作。然而,即使在重新阅读了各种论坛帖子、响应式网页设计教程和网页文档之后,不幸的是,它无法按照我需要的方式工作。

enter image description here

在这里看到,每当我使用 max-width 时,即使在 414px 或更低的屏幕尺寸(我试过)上,它也确实不起作用。样式不适用。

enter image description here

现在,当我使用 min-width 时,它确实有效,但是,我读到使用 max-width 是更好的 RWD 实践以获得更好的功能.

enter image description here

你有什么建议?谢谢你!

最佳答案

所以我认为您的问题是您处于缩放模式(例如 2 倍或 3 倍)。如果您处于 Safari 响应模式,请记住使用 View > Actual Size ,确保它没有以任何方式放大,因为这肯定会影响使用的媒体查询。祝你有美好的一天!

关于html - 媒体查询最大宽度无法正常运行,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/44215393/

相关文章:

html - 如何使用边框图像和线性渐变模拟基本投影?

html - 网站中的粘性页脚在一个页面而不是另一个页面上工作

html - 将鼠标悬停在 Twitter Bootstrap 中的下拉菜单上

html - 当内部图像缩放时,包装 div 不会调整大小(窗口调整大小的结果)

javascript - CSS flex 一个内容适合的图像,其标题同级的高度未知

html - 双击问题导航

javascript - 将下拉文本长度分解为下一行

javascript - 检查表格中的每个单元格是否等于上面的单元格

javascript - 如何使用 jQuery 方法从数据 URL 上传图像?

html - 无法删除 wordpress css 左侧的边距