移动Web端的适配方案

什么是移动端适配

​ 移动端适配是让页面在不同的移动设备上都合理展示 。比如在iphone4上和ipad甚至网站上都能合理展示网页。

目前主流的移动端适配的两种方案

1 flex布局 + rem。例如淘宝
2 flex布局 + vw/vh。例如B站


用法 ： 让flex做布局（盒子摆放），让rem或者vw/vh 实现网页元素的尺寸（宽度和高度）适配屏幕

flex布局 + rem

rem单位是相对单位，是相对于HTML根标签的font-size

举个例子

<style>
  /* 根标签 */
 html {
     font-size: 10px;
 }
 
 .box {
 
      /* 1rem = 10px */
     width: 1rem;
     
      /* 3rem = 30px */
     height: 3rem;
     
     background-color: pink;
 }
</style>

rem的基准值公式 ：基准值 = 设计稿px / 10
这个10就是把屏幕分成10份，按道理来说可以取任何值，取10的话，容易计算。

// 例如：
所以就像下面这样，html的font-size可能会：

iPhone3gs: 320px / 10 = 32px

iPhone4/5: 320px * 2 / 10 = 64px

iPhone6: 375px * 2 / 10 = 75px

// 有了基准值以后，就方便计算了 比如设计稿是750px，一个div的宽度是100px

现在来说：1rem = 75px，加入我们需要的rem是X，那

X / 1   = 100px / 75px

X = 100/75 = 1.34

// 则100px 是 1.34rem

接下来有两种解决方案：
1 根据媒体查询，不同的设备，在根元素上设置不同的font-size
2 通过JS，动态的计算设备的值，然后在根元素上赋值font-size

flex布局 + vw/vh (未来主流趋势)

1vw = 1/100视口宽度
1vh = 1/100视口高度

// px如何转换成vw ?

// 比如设计稿是750px，一个div的宽度是100px

1 vh = 7.5px

7.5 * X = 100

X = 13.3 

也就是说  100px = 13.3vh

因为 vh 永远是高度的1% vw永远是宽度的1% 。所以会根据屏幕的大小做到了自适应。不需要写额外的代码

推荐使用flex + vw/vh 的插件 postcss-px-to-viewport

参考文章