CSS媒体查询@media

CSS媒体查询@media

媒体查询语法（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 多媒体查询 | 菜鸟教程