CSS 1 ，移动端适配，使用媒体查询实现移动端适配，meta标签的使用（min-width和max-width）

前言

移动端适配是指在开发网站或应用时，确保页面能够在各种移动设备上良好显示和操作。随着智能手机和平板电脑的普及，越来越多的用户通过移动设备访问互联网，这使得移动端适配成为前端开发中的核心任务之一。开发者必须考虑不同屏幕尺寸、分辨率以及触摸操作的特点，以提供一致且优化的用户体验。

在移动端适配中，媒体查询（Media Queries）作为一种关键的CSS技术，可以根据设备的屏幕属性（如宽度、高度、方向和分辨率）动态应用特定样式。通过使用媒体查询，开发者可以为不同类型的设备（如手机、平板、桌面）设置不同的布局和样式，确保页面在各类设备上都能呈现最佳效果。我们只需根据设备的屏幕尺寸定义不同的样式规则，就能够实现响应式设计，使页面布局能够根据屏幕大小自适应变化。

结合媒体查询和其他响应式设计技术（如弹性布局、视口设置等），移动端适配可以有效应对多样化的设备环境，为用户提供良好的视觉和交互体验，同时提升网站的访问性能和加载速度。简单记录

一. meta标签

1. 标签介绍

        meta标签是用于设置移动设备上浏览器窗口的大小和缩放比例的HTML元素，视口标签可以通过使用不同的属性来控制移动设备上网站的布局和显示效果，通过设置视口标签的属性，可以让网页在移动设备上的显示效果更加符合用户的需求，以下是常用的属性介绍：

1. initial-scale：设置页面的初始缩放比例。例如：initial-scale=1.0。

2. minimum-scale：设置页面允许的最小缩放比例。例如：minimum-scale=0.5。

3. maximum-scale：设置页面允许的最大缩放比例。例如：maximum-scale=2.0。

4. user-scalable：设置是否允许用户手动缩放页面。可以设置为yes或no。例如：user-scalable=no。

5. viewport-fit：设置视口的适配方式，包括auto、contain和cover三种方式。例如：viewport-fit=cover，等。

2. 作用和原理

作用：让当前 viewport 的宽度等于设备的宽度，同时不允许用户进行手动缩放。

原理：移动端浏览器通常都会在一个比移动端屏幕更宽的虚拟窗口中渲染页面，这个虚拟窗口就是viewport，目的是正常展示没有做移动端适配的网页，让他们完整的展示给用户。

3. 配置使用

        使用媒体查询做移动端适配，首先需要配置视口标签，也就是meta标签，<meta>视口标签（Viewport Tag）

//meta标签移动端常用配置 
<meta name="viewport" 
  content="width=device-width, 
  user-scalable=no,
  initial-scale=1.0,
  maximum-scale=1.0,
  minimum-scale=1.0">

---

二. 媒体查询

1. 具体使用

媒体查询的配置使用如下，请看

//这里表示屏幕可视宽度最大为768px，就是宽度小于768px时，使用此样式；
@media screen and (max-width: 768px) {
    .box {
      width: 100%;
      height: 600px;
      background-color: plum;
    }
}

// 这里表示屏幕可视宽度最小为768px，最大为996px，
// 就是宽度大于768px,小于996px区间时，使用此样式；
@media screen and (min-width: 768px) and (max-width:996px) {
    .box1 {
      width: 100%;
      height: 700px;
      background-color: skyblue;
    }
    .btn2 {
      display: block;
    }
    .btn1 {
      display: none;
    }
}

//这里表示屏幕可视宽度最小为996px，就是宽度小于996px时，使用此样式；
@media screen and (min-width:996px) {
    .box1 {
      width: 100%;
      height: 800px;
      background-color: yellowgreen;
    }
}

上面的代码表示，在三种不同的可视宽度中，分别使用不同的样式效果。

2. 实现效果

具体实现效果如下，请看

3.  完整代码

//CSS
<style>
  .box1 {
    width: 100%;
    height: 600px;
    background-color: #8080ff;
    display: flex;
    justify-content: center;
    align-items: center;
  }
  .box2 {
    width: 40%;
    height: 80%;
    background-color: silver;
  }
  .btn2 {
    display: none;
  }
  //小
  @media screen and (max-width: 768px) {
    .box1 {
      width: 100%;
      height: 600px;
      background-color: plum;
    }
  }
  //中
  @media screen and (min-width: 768px) and (max-width:996px) {
    .box1 {
      width: 100%;
      height: 700px;
      background-color: skyblue;
    }
    .btn2 {
      display: block;
    }
    .btn1 {
      display: none;
    }
  }
  //大
  @media screen and (min-width:996px) {
    .box1 {
      width: 100%;
      height: 800px;
      background-color: yellowgreen;
    }
  }
</style>

//html
<div class="box1">
    <div class="box2">
      <button class="btn1">按钮1</button>
      <button class="btn2">按钮2</button>
    </div>
</div>

这里注意，媒体查询之前写的样式会被继承，然后使用display控制元素的显示与隐藏。

---

三. 本篇小结

        总之使用媒体查询可以帮助我们针对不同的设备创建响应式设计，它可以使网站或应用程序自适应不同的屏幕尺寸和分辨率，以确保在所有设备上具有良好的用户体验，还可以通过将媒体查询与其他技术（如弹性网格布局和响应式图像）结合使用，创建功能强大的适配方案。

创作不易，感觉有用，就一键三连，感谢(●'◡'●)