CSS3@media查询的使用

客官°小女子只卖身不卖艺 2021-09-20 15:38 302阅读 0赞

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

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

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

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

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

### 效果展示： ###

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80MzIxNzk0Mg_size_16_color_FFFFFF_t_70][]

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80MzIxNzk0Mg_size_16_color_FFFFFF_t_70 1][]

### Media Queries的基本格式 ###

@media screen and (max-width:480px){
      .ads {
           display:none;
      }
    }
    
    @media  屏幕适配类型  and  (限制属性){
       //CSS代码
       ...
       ...
    }

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

### 常用限制属性 ###

<table style="width:342px;"> 
 <tbody> 
  <tr> 
   <td style="width:111px;"><strong>min-width</strong></td> 
   <td style="width:228px;">查询媒体宽度大于等于(&gt;=)</td> 
  </tr> 
  <tr> 
   <td style="width:111px;"><strong>max-width</strong></td> 
   <td style="width:228px;">查询媒体宽度小于等于(&lt;=)</td> 
  </tr> 
 </tbody> 
</table>

## ##

### 常用关键字 ###

<table style="width:343px;"> 
 <tbody> 
  <tr> 
   <td style="width:110px;"><strong>and</strong></td> 
   <td style="width:230px;">连接多个媒体特性限制</td> 
  </tr> 
  <tr> 
   <td style="width:110px;"><strong>only</strong></td> 
   <td style="width:230px;">用来指定特定的媒体输出</td> 
  </tr> 
  <tr> 
   <td style="width:110px;"><strong>not</strong></td> 
   <td style="width:230px;"> <p>用来排除某种特定的媒体类型</p> </td> 
  </tr> 
 </tbody> 
</table>

## ##

### 浏览器支持： ###

<table> 
 <tbody> 
  <tr> 
   <th style="width:122px;">Rule</th> 
   <th style="width:144px;">Google</th> 
   <th style="width:147px;">IE</th> 
   <th style="width:145px;">FireFox</th> 
   <th style="width:178px;">Safari</th> 
   <th style="width:122px;">Opera</th> 
  </tr> 
  <tr> 
   <td style="width:122px;">@media</td> 
   <td style="width:144px;">21</td> 
   <td style="width:147px;">9</td> 
   <td style="width:145px;">3.5</td> 
   <td style="width:178px;">4.0</td> 
   <td style="width:122px;">9</td> 
  </tr> 
 </tbody> 
</table>

### 下面是对不同宽度屏幕的@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][https_www.runoob.com_cssref_css3-pr-mediaquery.html]

[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80MzIxNzk0Mg_size_16_color_FFFFFF_t_70]: /images/20210920/92d5d9c735a141f9ae884eb120814fa4.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80MzIxNzk0Mg_size_16_color_FFFFFF_t_70 1]: /images/20210920/ab85505008b242a487fc390aca7769f6.png
[https_www.runoob.com_cssref_css3-pr-mediaquery.html]: https://www.runoob.com/cssref/css3-pr-mediaquery.html