CSS3@media查询的使用

欢迎转载，请注明作者和出处。

本文链接： https://blog.csdn.net/weixin_43217942/article/details/100089936

Media Queries能元素在不同的条件下使用不同的样式，使页面在不同的终端设备下达到不同的渲染效果。@media查询是CSS3新增的，比之前的media查询使时方便多了，使响应式网页设计更加方便。优点：不用创建另外的CSS文件、语法简单使用方便。缺点：浏览器支持较晚，详细支持情况请看下方表格。

注意：使用Media Queries必须要使用“@media”开头，然后指定媒体类型（也可以称为设备类型），随后是指定媒体特性（也可以称之为设备特性）。媒体特性的书写方式和样式的书写方式非常相似，主要分为两个部分，第一个部分指的是媒体特性，第二部分为媒体特性所指定的值，而且这两个部分之间使用冒号分隔。例如：(max-width: 480px)。

主要有十种媒体类型和13种媒体特性，将其组合就类似于不同的CSS集合，最常用的是screen。

值	描述
all	用于所有设备
aural	已废弃。用于语音和声音合成器
braille	已废弃。应用于盲文触摸式反馈设备
embossed	已废弃。用于打印的盲人印刷设备
handheld	已废弃。用于掌上设备或更小的装置，如PDA和小型电话
print	用于打印机和打印预览
projection	已废弃。用于投影设备
screen	用于电脑屏幕，平板电脑，智能手机等。目前最常用。
speech	应用于屏幕阅读器等发声设备
tty	已废弃。用于固定的字符网格，如电报、终端设备和对字符有限制的便携设备
tv	已废弃。用于电视和网络电视

但与CSS属性不同的是，媒体特性是通过min/max来表示大于等于或小于做为逻辑判断，而不是使用小于（<）和大于（>）这样的符号来判断。接下来一起来看看Media Queries在实际项目中常用的方式。

效果展示：

Media Queries的基本格式

@media screen and (max-width:480px){
  .ads {
       display:none;
  }
}

@media  屏幕适配类型  and  (限制属性){
   //CSS代码
   ...
   ...
}

注意：and和()之间有一个空格！

常用限制属性

min-width	查询媒体宽度大于等于(>=)
max-width	查询媒体宽度小于等于(<=)

常用关键字

and	连接多个媒体特性限制
only	用来指定特定的媒体输出
not	用来排除某种特定的媒体类型

浏览器支持：

Rule	Google	IE	FireFox	Safari	Opera
@media	21	9	3.5	4.0	9

下面是对不同宽度屏幕的@media查询处理（效果展示网页的上部屏幕适配处理源码）

/*-----------screen proper handle------------*/
@media screen and (max-width: 1250px) and (min-width: 960px){
    .topPanel .topContainer{
        width: 11.80rem;
    }

    .topPanel .topContainer ul{
        display: flex;
        flex-flow: row wrap;
        justify-content: center;
        align-items: center;

        border-bottom: #f0edf2 solid 2px;
        box-sizing: border-box;
        padding: 0.20rem 0;
    }


    .topPanel .topContainer ul li{
        width: 2.71rem;
        height: 2.49rem;
        box-sizing: border-box;
        margin: 0.10rem 0.10rem;
        border: rgba(240, 237, 242, 0.5) solid 3px;
        border-radius: 3px;
    }

    .topPanel .topContainer ul .firstLiTag,.topPanel .topContainer ul .lastLiTag{
        width: 5.62rem;
    }

    .topPanel .topContainer ul li .box .articleTitle{
        width: 100%;
        height: 0.54rem;
        box-sizing: border-box;
        padding: 0.15rem 0.20rem;
        background: rgba(0, 0, 0, 0.71);
        color: #f0edf2;
        line-height: 0.24rem;
        font-size: 0.18rem;
        position: absolute;
        bottom: 0;
    }

}

@media screen and (max-width: 960px) {

    .topPanel .topContainer{
        width: 12.4rem;
    }
    .topPanel .topContainer ul li{

        width: 5.78rem;
        height: 4.50rem;
        box-sizing: border-box;
        margin: 0.10rem 0.10rem;
        border: rgba(240, 237, 242, 0.5) solid 3px;
        border-radius: 3px;
    }

    .topPanel .topContainer ul .firstLiTag,.topPanel .topContainer ul .lastLiTag{
        width: 11.75rem;
    }
    .topPanel .topContainer ul li .box .articleTitle{
        height: 0.85rem;
        line-height: 0.85rem;
        font-size: 0.30rem;
        padding: 0.05rem 0.20rem;
        display: flex;
        flex-flow: row nowrap;
    }
}

解释：

第一个media查询适配屏幕宽度在960px和1250px。

第二个media查询适配屏幕宽度小于960px。

参考：https://www.runoob.com/cssref/css3-pr-mediaquery.html