【HTML】移动端是怎么做适配的？

一、 meta viewport
在head标签内部加上这段代码

<meta name="viewport" content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">

该meta标签的作用是让当前viewport的宽度等于设备的宽度，同时不允许用户手动缩放。

width=device-width: 让当前viewport宽度等于设备的宽度
user-scalable=no: 禁止用户缩放
initial-scale=1.0: 设置页面的初始缩放值为不缩放
maximum-scale=1.0: 允许用户的最大缩放值为1.0
minimum-scale=1.0: 允许用户的最小缩放值为1.0

二、 媒体查询（响应式)

格式一：

@media （）and（）{}
//满足（）里的条件，就执行大括号里css的样式

举例：

<style>
@media (max-width:320px){
    body{
        background:red;
    }
}
@media (min-width:321px) and (max-width:320px){
    body{
        background:orange;
    }
}
@media (min-width:376px) and (max-width:425px){
    body{
        background:green;
    }
}
@media (min-width:426px) and (max-width:768px){
    body{
        background:blue;
    }
}
@media (min-width:769px){
    body{
        background:grey;
    }
}   
</style>

格式二并举例：

<link rel="stylesheet" href="style.css"media="(max-width:320px)">

注意点：
1、link标签会下载好，但是是否生效取决于media的条件；
2、有PC端经验，就有移动端经验，只是多了一个media查询；
3、通过添加多个css样式来满足不同的屏幕宽度；

三、动态 rem 方案
1rem等于根元素html的font-size的值。
在<script>标签加入这段代码：

<script>
    var pageWidth = window.innerWidth
    document.write('<style>html{font-size:' + pageWidth + 'px;}</style>')
</script>

现在，根元素 html 的 font-size 的大小为 页面的宽度 pageWidth 。
也就是说： 现在 ，1 rem === html 的 font-size === pageWidth。

因此，就可以利用 rem 来动态的控制页面的大小。