开发者社区> 问答> 正文

你对媒体查询的理解?

展开
收起
前端问答 2019-12-15 17:09:48 881 0
1 条回答
写回答
取消 提交回答
  • 前端问答小助手

    是什么

    媒体查询由⼀个可选的媒体类型和零个或多个使⽤媒体功能的限制了样式表范围的表达式组成,例如宽度、⾼度和颜⾊。媒体查询,添加⾃CSS3,允许内容的呈现针对⼀个特定范围的输出设备⽽进⾏裁剪,⽽不必改变内容本身,⾮常适合web⽹⻚应对不同型号的设备⽽做出对应的响应适配。

    如何使⽤?

    媒体查询包含⼀个可选的媒体类型和,满⾜CSS3规范的条件下,包含零个或多个表达式,这些表达式描述了媒体特征,最终会被解析为true或false。如果媒体查询中指定的媒体类型匹配展示⽂档所使⽤的设备类型,并且所有的表达式的值都是true,那么该媒体查询的结果为true.那么媒体查询内的样式将会⽣效。

    <!-- link元素中的CSS媒体查询 -->
    <link rel="stylesheet" media="(max-width: 800px)" href="example.css" />
    <!-- 样式表中的CSS媒体查询 -->
    <style>
    @media (max-width: 600px) {
    .facet_sidebar {
    display: none;
    }
    }
    </style>
    
    2019-12-15 17:10:32
    赞同 1 展开评论 打赏
问答分类:
问答地址:
问答排行榜
最热
最新

相关电子书

更多
低代码开发师(初级)实战教程 立即下载
冬季实战营第三期:MySQL数据库进阶实战 立即下载
阿里巴巴DevOps 最佳实践手册 立即下载