媒体查询基础

粉色的猫

已于 2023-11-23 14:11:35 修改

阅读量730

点赞数 3

分类专栏： CSS 文章标签：媒体 css html

于 2023-03-24 10:45:43 首次发布

本文链接：https://blog.csdn.net/weixin_45713650/article/details/129746152

版权

3 篇文章 0 订阅

订阅专栏

基本语法

@ 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代码。

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

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

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

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

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

关注