媒体查询语法(2种):
@media not|only mediatype and (expressions) {
CSS 代码...;
}
@media (max-width: 480px) { 相应css语句 } // 设备类型可不写,默认为screen
具体使用如:
// 设置el-dialog小屏适配:当屏幕宽度小于768px时,el-dialog宽度变大。
@media (max-width: 768px) {
.el-dialog { width: 90% !important; }
.el-date-range-picker { // 解决:手机移动端时间筛选下拉选框左侧被覆盖,显示不全问题
width: 100% !important;
overflow: auto !important;
}
}
参考:
- @media的用法 - 简书
- CSS媒体查询_叶子yes的博客-CSDN博客_css 媒体查询
- CSS3媒体查询media_queries响应式布局入门指南知识点总结 - 知乎
- CSS3 多媒体查询 | 菜鸟教程
更多推荐
CSS媒体查询@media
发布评论