阿里云 个人网站备案网络软件开发

目录

基本语法

媒体查询三种方式

直接在css文件中使用

使用import导入

使用link链接，media作为属性设置查询方式

注意点

---

基本语法

@ media[not|only] type [and][expr]{rules
}

• and、not、only：逻辑关键字，配合紧跟媒体发挥作用，如：not screen表示不检测屏幕宽度，only screen表示只检测屏幕宽度而不关心其他媒体设备属性

• type：媒体设备类型，最常用的是：all表示检测所有设备、screen表示只检测屏幕宽度而不关心是哪种设备

• expr：媒体表达式，最常用的是检测屏幕宽度属于哪个范围：（min-width：640px）and（max-width：980px）

• rules：css代码，设置的媒体查询语句生效时，会执行css语句代码如果媒体查询不符合要求，则不执行

例子：

@media only screen （min-width：640px）and（max-width：980px）{body{background-color：red}
}

含义：只检测屏幕宽度，而且当屏幕宽度大于或等于640px，小于或等于980px，媒体查询生效，执行css代码。

媒体查询三种方式

直接在css文件中使用

< style type="text/css">@media 类型 and（条件1）and（条件2）{css语句}
< /style >

使用import导入

@ import url（“css/media.css”）all and (max-media:980px);

当所有设备的宽度小于960px时，才会使用import导入css文件

使用link链接，media作为属性设置查询方式

当所有设备宽度小于980px时，才会使用link链接css文件

注意点

媒体查询优先级与普通css优先级一致，所以在使用媒体查询样式时，一定要放在默认样式之后，防止媒体查询样式被覆盖