CSS媒体查询@media

编程知识 更新时间:2023-04-06 07:16:49

媒体查询语法(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

本文发布于:2023-04-06 07:16:00,感谢您对本站的认可!
本文链接:https://www.elefans.com/category/jswz/921b45e40fba33db72a70073f3d5779a.html
版权声明:本站内容均来自互联网,仅供演示用,请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系,我们将在24小时内删除。
本文标签:媒体   CSS   media

发布评论

评论列表 (有 0 条评论)
草根站长

>www.elefans.com

编程频道|电子爱好者 - 技术资讯及电子产品介绍!

  • 48629文章数
  • 14阅读数
  • 0评论数