html - 由于网页对窗口大小的解释不正确,媒体查询失败
问题描述
我正在创建一个响应式网页,旨在显示在不同的屏幕尺寸上。我已经包含了一个@media (min-width: 768px),但似乎我的页面无法正确解释窗口/屏幕大小。我尝试在 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;
}
}
推荐阅读
- git - 提交历史重写后如何将所有分支推送到新的远程?
- excel - “运行时错误 1004,无法获取 WorksheetFunction 类的匹配属性”
- javascript - 如何在网络中使用 javascript 将数据插入到 Firestore?
- javascript - Appcelerator 通知 createRemoteViews 点击事件监听器
- jquery - Ajax xhr.upload.onprogress 打印加载和总计的错误值
- android - 截至 2019 年,使用现代技术支持不同的屏幕尺寸
- python - sklearn。ImportError:DLL 加载失败
- c# - 为 .NET 应用程序运行 CI 作业后禁用 LARGEADDRESSAWRAE
- c# - 依赖注入:HttpClient 还是 HttpClientFactory?
- chart.js - 我如何在 Chartjs 中为 Yaxis 实现 RTL