移动端适配是怎么做的？

一、使用 meta viewport ，在head标签内部加入以下代码，改代码的作用是让当前viewport的宽度等于设备的宽度，同时不允许用户手动缩放

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

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 () {}     //满足 () 内的提交，就会执行 {} 里的样式

eg:
<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:300px)">

注意点：
1、link会下载好引入的 style.css 文件，但是否生效取决于是否满足 media 的条件
2、可以通过添加多个 style.css 文件来满足不同屏幕宽度的需求

三、动态 rem 方案
原理：布局排版都用rem做单位，然后不同宽度的屏，js动态计算根节点的font-size。

在页面中加入下面的代码：

<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 来动态的控制页面的大小。

移动端适配是怎么做的？

猜你喜欢