css - CSS 媒体查询未显示在 chrome 检查器中
问题描述
首先,我不得不说我已经检查了有关此问题的其他 SO 问题(例如this和this),并且我相信我的问题与这些问题不同,并且此问题不是这些问题的重复。
我的 CSS 文件中有一些媒体查询,如下所示:
@media only screen and (max-width: 767px) { /*css here*/}
当我检查 chrome 检查器时,我可以看到这些 CSS 角色永远不会应用于所需的元素。我尝试在检查器模式下调整屏幕大小,但这些 CSS 角色仍然不适用。关于什么可能导致这里问题的任何想法?
编辑
这是我使用的整个 CSS 块。我正在使用 SCSS 语法,我可以看到生成的 CSS 角色非常好,并且我得到了正确的filter-title-responsive
类角色。
.filter-panel-container {
@extend %select-input-fix;
@extend %date-input-fix;
width: 100%;
height: auto;
.filter-header-container {
height: 40px;
width: 100%;
border-radius: 5px 5px 0 0;
background-color: $theme_athens_gray_color;
padding-top: 10px;
padding-bottom: 11px;
padding-left: 16px;
display: flex;
flex-direction: row;
justify-content: start;
& * {
color: $theme_gulf_blue_color;
}
i {
margin-top: 2px;
}
.filter-title {
font-family: $Montserrat-font;
font-size: 16px;
font-weight: 500;
line-height: 19px;
margin-left: 5px;
}
.filter-title-responsive {
font-size: 14px;
margin-left: 0;
}
@media screen and (max-width: 1730px) {
.filter-title-responsive {
font-size: 12px;
}
}
@media screen and (max-width: 1370px) {
.filter-title-responsive {
font-size: 10px;
}
}
@media screen and (max-width: 1210px) {
.filter-title-responsive {
font-size: 7px;
}
}
&.filter-header-disable {
border: 1px solid $theme_athens_gray_color;
border-bottom: none;
background-color: white;
color: $theme_athens_gray_color;
}
}
}
解决方案
添加:<meta name="viewport" content="width=device-width, initial-scale=1.0">
视口元素向浏览器提供有关如何控制页面尺寸和缩放的说明。
width=device-width 部分设置页面的宽度以跟随设备的屏幕宽度(这将因设备而异)。
initial-scale=1.0 部分设置浏览器首次加载页面时的初始缩放级别。
推荐阅读
- python - 连接到 s3 的 put_object 的 lambda 问题,但 get_object 有效
- android - 从一个应用程序客户端向另一个应用程序客户端发送通知
- cmd - 列出(然后删除)所有没有文件的文件夹
- python - 有没有在pytorch中实现径向基函数的简单方法?
- c++ - react-native c++ 中的 ArrayBuffer 支持
- python - 在 Matplotlib 图上打印指数方程
- selenium - 试图为“查看报告”按钮找到动态 xpath
- azure-devops - 使用 Azure SQL 托管实例上的托管标识在 AzureDevOps 中进行 Dacpac 部署
- android - 在 VM 中 Dockerize android 模拟器
- java - 如何将事件数据和事件名称从 Spring Boot 发送到 Angular?