CSS媒体查询@media

最新推荐文章于 2024-05-13 09:49:24 发布

qq_38969618

最新推荐文章于 2024-05-13 09:49:24 发布

阅读量405

点赞数

分类专栏： CSS 文章标签： css 媒体 vue.js

本文链接：https://blog.csdn.net/qq_38969618/article/details/128220060

版权

CSS 专栏收录该内容

6 篇文章 0 订阅

订阅专栏

媒体查询语法（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;
  }
}

参考：