CSS3响应式布局

Mr.ZhaoAbout 2 min

响应式布局指的是同一页面在不同屏幕尺寸下有不同的布局

1. 媒体查询

1.1 媒体类型

值含义
all检测所有设备
screen检测电子屏幕，包括：电脑屏幕、平板屏幕、手机屏幕等
print检测打印机

例：

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
    <style>
      h1 {
        width: 600px;
        height: 400px;
        line-height: 400px;
        background-image: linear-gradient(30deg, red, yellow, green);
        margin: 0 auto;
        text-align: center;
        font-size: 100px;
        color: white;
        text-shadow: 0 0 10px black;
      }
      /* 只有在打印机或打印预览才应用的样式 */
      @media print {
        h1 {
          background: transparent;
        }
      }
    </style>
  </head>
  <body>
    <h1>新年快乐</h1>
  </body>
</html>

1.2 媒体特性

值含义
width检测视口宽度
max-width检测视口最大宽度
min-width检测视口最小宽度
height检测视口高度
max-height检测视口最大高度
min-height检测视口最小高度
device-width检测设备屏幕的宽度
max-device-width检测设备屏幕的最大宽度
min-device-width检测设备屏幕的最小宽度
orientation检测视口的旋转方向（是否横屏）
1. portrait ：视口处于纵向，即高度大于等于宽度
2. landscape ：视口处于横向，即宽度大于高度

例：

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>

    <style>
      * {
        margin: 0;
        padding: 0;
      }
      h1 {
        height: 200px;
        background-color: gray;
        text-align: center;
        line-height: 200px;
        font-size: 100px;
      }
      /* 检测到视口的宽度为800px时*/
      @media (width: 800px) {
        h1 {
          background-color: green;
        }
      }
      /* 检测到视口的宽度小于等于700px时*/
      @media (max-width: 700px) {
        h1 {
          background-color: orange;
        }
      }
      /* 检测到视口的宽度大于等于900px时*/
      @media (min-width: 900px) {
        h1 {
          background-color: deepskyblue;
        }
      }
    </style>
  </head>
  <body>
    <h1>你好啊</h1>
  </body>
</html>

1.3 运算符

值含义
and并且
, 或 or或
not否定
only肯定

1.4 常用阈值

在实际开发中，会将屏幕划分成几个区间，例如：

CSS3响应式布局01.png
CSS3响应式布局01.png