我正在创建一个响应性网页,旨在在不同的屏幕尺寸上显示。我包含了@media(最小宽度:768像素),但看来我的页面无法以某种方式正确解释窗口/屏幕尺寸。我尝试在Chrome中测试我的网页,启用调试模式后,我可以在右上角看到窗口大小(以像素为单位)。但是在控制台中运行window.innerWidth将返回不同的值。它为所有其他网站返回正确的值。
有什么提示可能是错误的吗?
最佳答案
您的媒体查询中存在语法错误。你要写
@media only screen and (min-width: 768px)
或者你可以写
@media screen and (min-width: 768px)
如果您需要了解媒体查询的工作原理,那么这里有一个小型演示:
如果浏览器窗口为600px或更小,则此CSS中的背景颜色为浅蓝色:
@media only screen and (max-width: 600px){
body{
background-color: lightblue;
}
}