媒体查询

一、媒体查询概述

• 说明

  设备终端的多样化，直接导致了网页的运行环境变的越来越复杂，为了能够保证我们的网页可以适应多个终端，不得不专门为某些特定的设备设计不同的展示风格，通过媒体查询可以检测当前网页运行在什么终端，可以有机会实现网页适应不同终端的展示格。

• 什么是媒体查询

  媒体查询（Media Query）是CSS3新语法。

  使用 @media查询，可以针对不同的媒体类型定义不同的样式

  @media 可以针对不同的屏幕尺寸设置不同的样式

  当你重置浏览器大小的过程中，页面也会根据浏览器的宽度和高度重新渲染页面

  目前针对很多苹果手机、Android手机，平板等设备都用得到多媒体查询

二、媒体查询语法规范

• 标准
  1. 用 @media开头 注意@符号
  2. mediatype 媒体类型
  3. 关键字 and not only
  4. media feature 媒体特性必须有小括号包含

• 语法

  用 @media开头 注意@符号

  @media mediatype and|not|only (media feature) {
      CSS-Code;
  }
  

• 媒体类型

  mediatype 将不同的终端设备划分成不同的类型，称为媒体类型

• 关键字 and not only

  关键字将媒体类型或多个媒体特性连接到一起做为媒体查询的条件。

  and：可以将多个媒体特性连接到一起，相当于“且”的意思。

  not：排除某个媒体类型，相当于“非”的意思，可以省略。

  only：指定某个特定的媒体类型，可以省略。

• 媒体特性

  每种媒体类型都具体各自不同的特性，根据不同媒体类型的媒体特性设置不同的展示风格。

  注意他们要加小括号包含

• 媒体查询书写规则

  注意： 为了防止混乱，媒体查询我们要按照从小到大或者从大到小的顺序来写,但是我们最喜欢的还是从小到大来写，这样代码更简洁

  针对<540px的屏幕：max-width:540px

  针对>540px的屏幕：min-width:540px

  针对>960px的屏幕：min-width:960px

三 、实战案例

案例一: 媒体查询+rem 实现页面宽度改变背景变色

• 步骤

  ① 按照屏幕从大到小的或者从小到大的判断的方式

  ② 最大值 max-width 和最小值 min-width都是包含等于的

  ③ 当屏幕小于520px， 背景颜色变为红色 （x <= 519）

  ④ 当屏幕大于等于520px 并且小于等于 960px的时候 背景颜色为黄色 ( 520=<x <= 959）

  ⑤ 当屏幕大于等于 960像素时，背景颜色为绿色 （ x >= 960）

• 代码

    <style>
         @media screen and (max-width: 519px){
             body{
                 background-color: red;
             }
         }
         @media screen and (min-width:520px) and (max-width: 959px){
             body{
                 background-color:yellow;
             }
         }
         @media screen and (min-width: 960px){
             body{
                 background-color: green;
             }
         }
      </style>
  

• 注意

  为了防止混乱，媒体查询我们要按照从小到大或者从大到小的顺序来写,但是推荐大家是从小到大来写，这样会让代码更简洁

  针对<540px的屏幕：max-width:540px

  针对>540px的屏幕：min-width:540px

  针对>960px的屏幕：min-width:960px

    <style>
         @media screen and (max-width: 519px){
             body{
                 background-color: red;
             }
         }
         @media screen and (min-width:520px) {
             body{
                 background-color:yellow;
             }
         }
         @media screen and (min-width: 960px){
             body{
                 background-color: green;
             }
         }
      </style>
  

案例二：媒体查询+rem 实现元素大小动态变化

• 说明

  rem单位是跟着html来变化的，有了rem页面元素可以设置不同大小尺寸

  媒体查询可以根据不同设备宽度来修改样式

  媒体查询+rem 就可以实现不同设备宽度，实现页面元素大小的动态变化

  案例：媒体查询+rem实现元素变化

• 代码

  <style>
         @media screen and (max-width: 320px){
             html{
                 font-size: 30px;
             }
         }
         @media screen and (min-width:640px) {
             html{
                 font-size: 70px;
             }
         }
         @media screen and (min-width: 960px){
             html{
                 font-size: 100px;
             }
         }
         #banner{
             height: 1rem;
             font-size: 0.5rem;
             background-color: red;
             color: white;
             text-align: center;
         }
      </style>
  

四、link中判断设备引入样式

• 说明

  如果样式比较繁多的情况下，可以针对不同的媒体使用不同 stylesheets（样式表）。

  原理，就是直接在link中判断设备的尺寸，然后引用不同的css文件。

  1. 语法规范

<link rel="stylesheet" media="mediatype and|not|only (media feature)" href="mystylesheet.css">

2. 示例

<link rel="stylesheet" href="styleA.css" media="screen and (min-width: 400px)">