移动Web——响应式网页

响应式网页是指能够根据用户设备的屏幕大小、分辨率和浏览器窗口大小等因素自动调整布局和显示效果的网页设计方式。

通过使用响应式设计技术，网页可以在不同的设备上提供一致的用户体验，无论是在桌面电脑、平板电脑还是手机等移动设备上访问网页都能够适应不同的屏幕尺寸。

响应式网页设计通常使用流体网格布局、弹性图片和媒体查询等技术来实现。流体网格布局让网页元素相对于视口宽度进行相对调整，使得网页可以自动适应不同的屏幕尺寸。弹性图片能够根据容器大小自动缩放，以适应不同的屏幕分辨率。媒体查询是一种CSS3技术，通过检测设备属性（如屏幕宽度）来应用不同的样式规则，以适配不同的设备。

通过响应式网页设计，用户无需手动缩放或滚动页面即可方便地浏览和使用网页内容，提供更好的用户体验。同时，响应式网页设计也有助于提高网站的可访问性和搜索引擎优化，因为它能够适应各种设备和屏幕尺寸，提供一致的内容呈现。

1 媒体查询

媒体特性

max-width：最大宽度

min-width：最小宽度

html 复制代码

<!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>媒体查询</title>
    <style>
      /* 屏幕宽度小于等于768，网页背景色是粉色 → max-width */
      @media (max-width: 768px) {
        body {
          background-color: pink;
        }
      }


      /* 屏幕宽度大于等于1200，网页背景色是绿色 → min-width */
      @media (min-width:1200px) {
        body {
          background-color: green;
        }
      }

    </style>
  </head>
  <body>

  </body>
</html>

2 媒体查询-书写顺序

需求：

默认网页背景色是灰色

屏幕宽度大于等于768px，网页背景色是粉色

屏幕宽度大于等于992px，网页背景色是绿色

屏幕宽度大于等于1200px，网页背景色是skyblue

提示

min-width（从小到大）
max-width（从大到小）

html 复制代码

<!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>
      /* 网页默认背景色是灰色 */
      body {
        background-color: #ccc;
      }
      /* 屏幕宽度 大于等于 768px，网页背景色是粉色 min */
      @media (min-width: 768px) {
        body {
          background-color: pink;
        }
      }
      /* 屏幕宽度 大于等于 992px，网页背景色是绿色 min */
      @media (min-width:992px) {
        body {
          background-color: green;
        }
      }

      /* 屏幕宽度 大于等于 1200px，网页背景色是 skyblue  min */
      @media (min-width: 1200px) {
        body {
          background-color: skyblue;
        }
      }
    </style>
  </head>
  <body></body>
</html>

3 案例-左侧隐藏

需求：网页宽度小于等于768px则隐藏左侧区域

html 复制代码

<!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>隐藏效果</title>
    <style>
      * {
        margin: 0;
        padding: 0;
      }

      .box {
        display: flex;
      }

      .left {
        width: 300px;
        height: 500px;
        background-color: pink;
      }

      .main {
        flex: 1;
        height: 500px;
        background-color: skyblue;
      }

      @media (max-width: 768px) {
        .left {
          display: none;
        }
      }
    </style>
  </head>
  <body>
    <div class="box">
      <div class="left">left</div>
      <div class="main">
        响应式网页效果响应式网页效果响应式网页效果响应式网页效果响应式网页效果响应式网页效果响应式网页效果响应式网页效果响应式网页效果响应式网页效果响应式网页效果响应式网页效果响应式网页效果响应式网页效果响应式网页效果响应式网页效果响应式网页效果响应式网页效果响应式网页效果响应式网页效果响应式网页效果响应式网页效果响应式网页效果响应式网页效果响应式网页效果响应式网页效果响应式网页效果响应式网页效果响应式网页效果响应式网页效果响应式网页效果响应式网页效果响应式网页效果响应式网页效果响应式网页效果响应式网页效果响应式网页效果响应式网页效果响应式网页效果响应式网页效果响应式网页效果响应式网页效果响应式网页效果响应式网页效果响应式网页效果响应式网页效果响应式网页效果响应式网页效果
      </div>
    </div>
  </body>
</html>

4 媒体查询-完整写法-了解

关键词 / 逻辑操作符

and

only

not

媒体类型是用来区分设备类型的，如屏幕设备、打印设备等，其中手机、电脑、平板都属于屏幕设备

媒体特性主要用来描述媒体类型的具体特征，如当前屏幕的宽高、分辨率、横屏或竖屏等。

5 媒体查询-外部CSS

html 复制代码

<!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>媒体查询-link</title>
    <!-- 视口宽度 小于等于 768px， 网页背景色是粉色 -->
    <link rel="stylesheet" media="(max-width: 768px)" href="./pink.css">
    <!-- 视口宽度 大于等于 1200px，网页背景色是绿色 -->
    <link rel="stylesheet" media="(min-width: 1200px)" href="./green.css">
  </head>
  <body>

  </body>
</html>

green.css

css 复制代码

body {
  background-color: green;
}

pink.css

css 复制代码

body {
  background-color: pink;
}