09_CSS3多媒体查询

一时失言乱红尘 2023-10-16 12:58 25阅读 0赞

### 1 多媒体查询 ###

#### 1.1 媒体查询 ####

媒体查询能在不同的条件下使用不同的样式，使页⾯在不同在终端设备下达到不同的渲染效果。

CSS 的 Media Query 媒体查询（也称为媒介查询）用来根据窗口宽度、屏幕比例和设备方向等差异来改变页面的显示方式。

使用媒体查询能够在不改变页面内容的情况下，为特定的输出设备制定显示效果。媒体查询由媒体类型和条件表达式组成。

常用的媒体查询属性如下：

*  设备宽高： device-width、device-height
 *  渲染窗口的宽和高：width、height
 *  设备的手持方向：orientation
 *  设备的分辨率：resolution

#### 1.2 媒体设备 ####

<table> 
 <thead> 
  <tr> 
   <th align="center"><strong>值</strong></th> 
   <th align="left"><strong>描述</strong></th> 
  </tr> 
 </thead> 
 <tbody> 
  <tr> 
   <td align="center">all</td> 
   <td align="left">用于所有多媒体类型设备</td> 
  </tr> 
  <tr> 
   <td align="center">print</td> 
   <td align="left">用于打印机</td> 
  </tr> 
  <tr> 
   <td align="center">screen</td> 
   <td align="left">用于电脑屏幕，平板，智能手机等。</td> 
  </tr> 
  <tr> 
   <td align="center">speech</td> 
   <td align="left">用于屏幕阅读器</td> 
  </tr> 
 </tbody> 
</table>

比如：在屏幕显示与打印设备上不同的 CSS 效果

*  media 媒体
 *  screen 屏幕
 *  min-width 最小值，视口大于或者等于该值加载这个 css
 *  max-width 最大值，视口小于或者等于该值加载这个 css

多设备支持：可以用逗号分隔同时支持多个媒体设备

@import url(screen.css) screen,print;
    <link href="screen.css" media="screen,print">
    @media screen,print {...}

#### 1.3 实现方式 ####

##### 1.3.1 外联式 #####

外联式是作为单独的 CSS 文件从外部引入的 ，在 link 标签中通过 media 属性可以设置样式使用的媒体设备。

*  common.css 没有指定媒体所以全局应用
 *  screen.css 应用在屏幕设备
 *  print.css 应用在打印设备

<link rel="stylesheet" type="text/css" href="css/01.css" media="screen and (min-width:1200px)">
    
    <link rel="stylesheet" type="text/css" href="css/02.css" media="screen and (max-width:1199px)">

> 注意：
> 
>  *  IE8 不兼容 media
>  *  简化代码，相同样式写在一起
>  *  利用层叠性，写在后面

##### 1.3.2 导入式 #####

使用 @import 可以引入指定设备的样式规则。文件中引入一个样式文件，在这个文件中再引入其他媒体的样式文件。

style.css

@import url(screen.css) screen;
    @import url(print.css) print;

##### 1.3.3 内联式（常用方式） #####

内联式是直接在 CSS 中使用。

#### 1.4 设备方向 ####

使用 orientation 属性可以定义设备的方向

<table> 
 <thead> 
  <tr> 
   <th align="center"><strong>值</strong></th> 
   <th align="left"><strong>描述</strong></th> 
  </tr> 
 </thead> 
 <tbody> 
  <tr> 
   <td align="center">portrait</td> 
   <td align="left">竖屏设备即高度大于宽度</td> 
  </tr> 
  <tr> 
   <td align="center">landscape</td> 
   <td align="left">横屏设备即高度小于宽度</td> 
  </tr> 
 </tbody> 
</table>

#### 1.5 查询条件 ####

可以使用不同条件限制使用的样式，条件表达式需要放在括号中。

##### 1.5.1 逻辑与 #####

需要满足多个条件时才使用样式，多个条件使用 and 连接。表示满足全部条件才能生效。

##### 1.5.2 逻辑或 #####

多个 或 条件查询使用逗号连接，不像其他程序中使用 or 语法。

表示只要满足其中一个条件就能生效。

##### 1.5.3 不应用 #####

not 表示不应用样式，即所有条件都满足时不应用样式。

> 注意：必须将 not 写在查询的最前面

##### 1.5.4 仅当前应用 #####

only 指定某种特定的媒体类型，可以用来排除不支持媒体查询的浏览器。

#### 1.6 查询特性 ####

根据查询特性筛选出使用样式的设备。

##### 1.8.1 常用特性 #####

<table> 
 <thead> 
  <tr> 
   <th align="center"><strong>特性</strong></th> 
   <th align="left"><strong>说明</strong></th> 
  </tr> 
 </thead> 
 <tbody> 
  <tr> 
   <td align="center">orientation: landscape | portrait</td> 
   <td align="left">landscape 横屏，portrait 竖屏</td> 
  </tr> 
  <tr> 
   <td align="center">width</td> 
   <td align="left">设备宽度</td> 
  </tr> 
  <tr> 
   <td align="center">height</td> 
   <td align="left">设备高度</td> 
  </tr> 
  <tr> 
   <td align="center">min-width</td> 
   <td align="left">最小宽度（&gt;=）</td> 
  </tr> 
  <tr> 
   <td align="center">max-width</td> 
   <td align="left">最大宽度（&lt;=）</td> 
  </tr> 
  <tr> 
   <td align="center">min-height</td> 
   <td align="left">最小高度（&gt;=）</td> 
  </tr> 
  <tr> 
   <td align="center">max-height</td> 
   <td align="left">最大高度（&lt;=）</td> 
  </tr> 
 </tbody> 
</table>

##### 1.6.2 使用示例 #####

在设备宽度为 568px 时使用样式

@media only screen and (width:568px) {
        
      ... 
    }

在设备不小于 569px 时使用样式

@media only screen and (min-width:569px) {
        
      ... 
    }

橫屏设备并且宽度大于 569px 时使用样式

@media only screen and (orientation: landscape) and (min-width:569px) {
        
      ... 
    }

#### 1.7 练习作业 ####

使用多媒体查询制作响应式页面。

*  当页面窗口宽度小于 480px 时，背景颜色为绿色
 *  当页面窗口宽度小于 960px 大于480px 时，背景颜色为蓝色
 *  当页面窗口宽度大于 960px 时，背景颜色为红色