html - Windows 的媒体查询在 1023px 宽度处失败
问题描述
我正在尝试设置媒体查询,以便网页响应并在宽度小于 1024 像素时切换视图。但是当 Google chrome DevTools 中的宽度设置为 1023px 时,不会应用媒体查询。以下面的类为例:
.test {
@media screen and (min-width: 1024px) {
border: 2px solid green;
}
@media screen and (max-width: 1023px) {
border: 2px solid red;
}
}
如果宽度为 1023 或更小,我想将边框设置为红色,如果宽度大于或等于 1024,我想将边框设置为绿色。但恰好在 1023 处看不到边框。它适用于其他宽度。
重现步骤:
- 打开 Stackblitz:https ://stackblitz.com/edit/angular-wzw4fp?file=src%2Fapp%2Fapp.component.html
- 在 Stackblitz 中,单击在新窗口中打开(右上角),然后按 F12
- 单击切换设备工具栏
- 将宽度设置为 1023
实际:在 1023px 宽度处看不到边框
预期:红色边框的宽度为 1023 像素
在所有浏览器上的 Windows 10 上都存在问题:Firefox、Google chrome、IE 等。我正在编写一个 Angular 应用程序,但我希望这与 Angular 无关。
知道这是一个错误还是有什么问题?
PS:无法在 Linux 和 MacOS 上重现!它按预期工作。
解决方案
无法在我的两台 Windows 10 机器上重现(一台是高 ppi 显示器)。
em
但是,在 CSS 中定义媒体查询时使用它更理想。这是因为一个像素可能不等于所有设备上的一个像素。当人们可能会更改浏览器或操作系统中的默认 UI/文本大小时,这一点越来越真实。
最后,不要为每个屏幕范围声明样式,而是尝试将您的移动(最小屏幕)样式声明为默认样式,然后随着屏幕变宽添加修改样式。
请尝试以下操作,看看您是否仍然遇到此问题:
.test {
border: 2px solid red;
@media screen and (min-width: 64em) {
border: 2px solid green;
}
}
编辑:添加屏幕截图以供确认
推荐阅读
- .htaccess - .htaccess 删除查询参数
- python - Python 语音识别无法识别我的声音
- javascript - 从 facebook messenger 获取 FB Access 令牌/OAuth 数据
- javascript - Uncaught (in promise) TypeError: this is undefined
- c# - 忽略插入字符串 C#、SQL Server 中的引号
- python - 模板中未显示 Django 消息
- python - Discord Bot 在“on_member_join”和“on_member_remove”事件中不起作用
- typescript - 如何在打字稿中添加验证以标记超出范围/低于范围的值
- kdb - 在不指定列名的情况下,用多列的前面值填充空值
- javascript - 如何查找未知的 Firebase 文档?