使用媒体查询实现移动端适配

使用媒体查询实现移动端适配

1、使用媒体查询做适配，首先需要配置视口标签，也就是meta标签；

index.html中meta标签移动端常用配置

<meta name="viewport"

  content="width=device-width,

  user-scalable=no,

  initial-scale=1.0,

  maximum-scale=1.0,

  minimum-scale=1.0">

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

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

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

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

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

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

2、媒体查询语法

<div class="box"></div>

//【小屏】这里表示屏幕可视宽度最大为768px，就是宽度小于768px时，使用此样式；

@media screen and (max-width: 768px) {

    .box {

        //样式

    }

}

//【中屏】这里表示屏幕可视宽度最小为768px，最大为996px，就是宽度大于768px,小于996px区间时，使用此样式；

@media screen and (min-width: 768px) and (max-width:996px) {

    .box {

      //样式

    }

}

//【大屏】这里表示屏幕可视宽度最小为996px，就是宽度小于996px时，使用此样式；

@media screen and (min-width:996px) {

    .box {

      //样式

    }

}