「这是我参与11月更文挑战的第21天，活动详情查看：2021最后一次更文挑战」
在了解了解移动端配置媒体查询步骤之前，我们要先简单聊聊，或者说概述一下媒体查询是什么，有什么作用
@media的作用：媒体查询可以在指定的设备上使用对应的样式替代原有的样式。
可以简单理解为告诉浏览器：当满足某条件时，调用某样式。当满足条件A时，调用A样式； 当满足条件B时，调用B样式
媒体查询由多媒体组成，可以包含一个或多个表达式，根据表达式条件判断是否成立，返回 true 或 false。 如果指定的多媒体类型匹配设备类型则返回查询结果为true，文档会在匹配的设备上显示指定样式CSS样式效果。
下面是移动端配置媒体查询步骤
（1）定义移动端视口，即设置好meta标签
<meta name="viewport" content="width=device-width,initial-scale=1.0,minimum-scale=1.0,maximum-scale=1.0,user-scalable=no"/>
width=device-width宽度等于当前设备的宽度
initial-scale=1.0 初始缩放比例
minimum-scale允许用户缩放到的最小比例
maximum-scale允许用户缩放到的最大比例
user-scalable用户是否可手动缩放
注意：手机系统默认会给予一定的视口宽度设置，并且允许用户进行页面缩放，这样一些未做移动端处理的PC网站虽然也可以在手机上呈现，但是页面的内容会看上去很小。因此我们设置meta的目的就是要修改默认设置，达到页面尺寸和移动端设备能匹配
（2）针对IE兼容处理
I. 为防止IE的实际浏览器模式默认较低，需要设置IE渲染方式为最新（ edge ）
格式：<meta http-equiv="X-UA-Compatible" content="IE=edge">
II. IE9以下不支持HTML5、不支持@Media，所以需要加载两个JS文件，来保证代码实现兼容
<!--[if lt IE 9]>
<script src="https://cdn.bootcss.com/html5shiv/3.7.3/html5shiv.min.js"></script>
<script src="https://cdn.bootcss.com/respond.js/1.4.2/respond.min.js"></script>
<![endif]-->
（3）移动端常用尺寸
常见尺寸宽度有：320px、480px、640px、768px、960px、1024px、1200px等
