[移动端]移动端适配方案略解

本文介绍: 文章目录 css3新增单位 rem vw v h 移动端适配方案flexi ble rem方案优点缺点v h、vw方案缺点css3新增单位 rem css3 新增相对单位 rem和em单位一样，都是一个相对单位，e m是相对于父元素的font–size进行计算，即父元素的font–s ize为npx，则1e m就代表npx，所以e m单位在不同的元素或选择器中都不同因此我们需要一个在所有元素或选择器中都一致的一个单位，rem因此出现了rem是相对于根元素 html的font–size来进行计算的，即根元素 html的fon

文章 目录

css3新增单位

rem

css3 新增相对单位

rem和e m单位一样，都是一个相对单位，em是相对于父元素的font–size进行计算，即父元素的fon t–size为npx，则1em就代表npx，所以em单位在不同的元素或选择器中都不同

因此我们需要一个在所有元素或选择器中都一致的一个单位，rem因此出现了
rem是相对于根元素html的fon t–size来进行计算的，即根元素html的fon t–size为npx，则1em就是npx

vw vh

vw：1vw等于视口宽度的1%
vh：1vh等于视口高度的1%
vmin：选取vw和vh中最小的那个
vmax：选取vw和vh中最大的那个

请添加图片描述
例如，在桌面端浏览器视口尺寸为650px，那么1vw = 650 * 1% = 6.5px（这是理论推算得出，如果浏览器不支持0.5px，那么实际渲染结果可能是7px）。

如果设计稿为 750px，那么 1vw = 7.5px，100vw = 750px。其实设计稿按照设么都没多大关系，最终转化过来的都是相对单位，上面讲的 rem 也是对它的模拟。这里的比例关系也推荐不要自己换算，使用 p x toviewport 的库就可以帮我们转换。当然每种方案都会有其弊端，这里就不展开讨论。

移动端适配方案

flexi ble rem方案

在进行移动端开发时，我们会发现一个问题，代码如下

&lt;!DOCTYPE html&gt;
&lt;html lang="en"&gt;
<head&gt;
  <meta charset="UTF-8"&gt;
  <meta http-equiv="X-UA-Compatible" content="IE=edge"&gt;
  <meta name="viewport" content="width=device-width, initial-scale=1.0"&gt;
  <title&gt;Document</title&gt;
  <style>
    * {
      margin: 0;
      padding: 0;
    }

    div {
      float: left;
      width: 90px;
      height: 50px;
      margin-right: 10px;
      background-color: red;
    }
  </style>
</head>
<body>
  <div></div>
  <div></div>
  <div></div>
  <div></div>
</body>
</html>

我们会发现这段代码在不同设备上的布局会变得截然不同
在设备iPh one6/7/8上
请添加图片描述
在设备iPhone6/7/8 Plus下

可以发现这两个页面布局完全不同
造成这个问题的原因就是各个设备的屏幕宽度的不同，有些屏幕大有些屏幕小，那么我们怎么来使布局在不同的设备上都能正常显示呢？

关键就在于我们书写 css 样式的时候，我们使用的单位是p x

p x是相对逻辑单位，我们写多少p x就是定死的值，是无法随设备的宽度改变而改变的，而我们现在要实现同一元素在不同设备上布局的占比要一致，那么我们使用的单位就需要一致

因此我们想到使用 rem，rem是相对于html的font-size来计算的，我们使用 js在页面布局之前，对当前设备的宽度进行获取，然后除以10，相当于将页面十等分，然后将十分之一设置成rem，这样在不同的设备上rem代表的都是页面宽度的十分之一，自然就能实现不同设备上的适配了

function setRemUnit () {
    var rem = docEl.clientWidth / 10
    docEl.style.fontSize = rem + 'px'
}
setRemUnit();

上面的代码中，将html 节点的font-size设置为页面clientWidth(布局视口)的1/10，即1rem就等于页面布局视口的1/10，这就意味着我们后面使用的rem都是按照页面比例来计算的。

使用rem布局虽然可以解决适配问题，但是因为我们需要手工完成px单位到rem单位的转换，所以就会变得复杂很多

优点

相对于px固定布局和百分比布局，可以很好地解决不同设备下的尺寸，间隙，字体的相对大小问题

缺点

1.计算繁琐
2.需要 js辅助

vh、vw方案

vh、vw方案即将视觉视口宽度window.innerWidth和视觉视口高度window.innerHeight等分为 100 份。

vw(Viewport’s width)：1vw等于视觉视口的1%
vh(Viewport’s height) :1vh 为视觉视口高度的1%
vmin : vw 和 vh 中的较小值(用于设备旋转时)
vmax : 选取 vw 和 vh 中的较大值(用于设备旋转时)
如果视觉视口为375px，那么1vw = 3.75px，这时UI给定一个元素的宽为75px（设备独立像素），我们只需要将它设置为75 / 3.75 = 20vw。