CSS的媒体查询

媒体查询，顾名思义就是查询将要应用样式表的媒体，满足查询的条件，就会应用该样式表。

<link rel="stylesheet" href="./red.css" media="媒体类型 and (媒体属性),媒体类型 and (媒体属性)">
<style media="媒体类型 and (媒体属性),媒体类型 and (媒体属性)"></style>

CSS中使用
1.@media 媒体类型 and (媒体属性){
CSS代码
}
2.@import url(外部引用的CSS路径) 媒体类型 and (媒体属性)

@media screen and (min-width:900px){
    body{
        background-color: aqua;
    }
} 
@import url('./blue.css') screen and (min-width:900px);

注意
媒体查询也需要注意样式的优先级（就是CSS优先级）
媒体类型
包括screen，print，all，speech，分别对应'文档的屏幕媒体'，'文档的打印预览'，'所有能呈现内容的媒体'，'语音合成器、屏幕阅读器等'。
逻辑关键字
1.and，该关键字后面添加该媒体类型的媒体属性，所有属性满足才会应用该样式表
2.not，必须放在媒体查询前面，所有属性满足，不应用该样式表。其余情况全部应用。

@import url('./blue.css')  not screen and (min-width:900px);

3.only，在不支持媒体查询的旧浏览器中隐藏样式表,必须放在媒体查询前面

@import url('./green.css') only screen and (min-width:900px);

待补充（媒体属性）

©著作权归作者所有,转载或内容合作请联系作者
【社区内容提示】社区部分内容疑似由AI辅助生成，浏览时请结合常识与多方信息审慎甄别。
平台声明：文章内容（如有图片或视频亦包括在内）由作者上传并发布，文章内容仅代表作者本人观点，简书系信息发布平台，仅提供信息存储服务。