css - Chrome 模拟器问题 |媒体查询

Question

我正在测试我的响应式网站，遗憾的是，当我选择设备(例如“iPhone 6”)时，Chrome 模拟器没有显示响应式 View 。令人讨厌的滚动条出现并且看起来很糟糕，但是，当我调整浏览器大小时，断点是否正常工作？

这就是我定义断点的方式 - 变量 $screen-md 设置在一个变量中。我正在使用 SASS。

@media screen and (min-width: $screen-md) { }

这是 Chrome 模拟器中发生的事情的屏幕截图。

Answer 1

1) 检查 $screen-md 是否存储 375px 因为 Iphone6 是 375px 宽

2) 将您的最小宽度更改为最大宽度。

举例说明:

@media only screen and (min-width: 375px)  {...}

以上代码表示“如果[设备宽度]大于或等于[375px]，则执行{...}”

@media only screen and (max-width: 375px)  {...}

以上代码表示“如果[设备宽度]小于或等于[375px]，则执行{...}”

3) 我个人使用 Chrome 的经验是，即使您的视口(viewport)大小正确，它有时也不会加载媒体查询。有几次，我不得不将 max-width 值增加 1 或 2 个像素才能使其正常工作。也试试看!另外，不要忘记清除缓存并刷新页面。