Chrome模拟器问题|媒体查询

Question

我正在测试我的自适应网站，遗憾的是，当我选择设备时，Chrome模拟器没有显示自适应视图，例如iPhone 6＆＃34;。令人讨厌的滚动条出现并且看起来很可怕但是，当我调整浏览器大小时，断点工作正常吗？

这是我定义断点的方法 - 变量$ 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)  {...}

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

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

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

3）我对Chrome的个人体验是，即使您处于正确的视口大小，它有时也无法加载媒体查询。有几次，我必须将最大宽度值增加1或2像素才能使其正常工作。试试吧！另外，不要忘记清除缓存并刷新页面。