移动端适配问题

前言

最近自己在整一个移动端的项目，自认为之前已经开发过很多的移动端项目，对适配还算比较了解，但是这次在做的时候自己静下心来考虑，现在的适配方式有很多种，那么在做项目的时候我应该选择哪种方式来做适配呢？

适配方式

1.rem

这种方式相信用的人还是比较多的，我也一直在用。原理非常简单，rem为元素设定字体大小时，仍然是相对大小，但相对的只是HTML根元素。通过它既可以做到只修改根元素就成比例地调整所有字体大小，又可以避免字体大小逐层复合的连锁反应。在加上一段js动态设置html的font-zise大小，这样在不同设备上的展示就是无限接近相同。

function setRem () {
  var width=document.documentElement.clientWidth;
  var styleNode=document.createElement("style");
  styleNode.innerHTML="html{font-size:"+ width/10 +"px !important}";
  document.head.appendChild(styleNode);
}

// 初始化
setRem();
// 改变窗口大小时重新设置 rem
window.onresize = debounce(function () {
  setRem()
},500);

lib-flexible淘宝项目组开发出来的一个小插件，属于开源项目，可以在各类项目中引入并使用。这个插件可以直接在项目中写px，它帮助你转换成rem。
这篇文章是介绍怎么使用:lib-flexible适配大屏方案（附移动端适配）

2、vw，vh布局

vh、vw方案个人理解就是百分比布局，只不过是相对于视觉视口的百分比。将视觉视口宽度 window.innerWidth和视觉视口高度 window.innerHeight 等分为 100 份。

image.png

这个方案在写的时候也会遇到和rem一样需要转换单位，而且px转换成vw不一定能完全整除，因此有一定的像素差。

不过可以使用webpack解析css 的时候用postcss-loader 有个postcss-px-to-viewport能自动实现px到vw的转化。

{
    loader: 'postcss-loader',
    options: {
        plugins: ()=>[
            require('autoprefixer')({
                browsers: ['last 5 versions']
            }),
            require('postcss-px-to-viewport')({
                viewportWidth: 375, //视口宽度（数字)
                viewportHeight: 1334, //视口高度（数字）
                unitPrecision: 3, //设置的保留小数位数（数字）
                viewportUnit: 'vw', //设置要转换的单位（字符串）
                selectorBlackList: ['.ignore', '.hairlines'], //不需要进行转换的类名（数组）
                minPixelValue: 1, //设置要替换的最小像素值（数字）
                mediaQuery: false //允许在媒体查询中转换px（true/false）
            })
        ]
}

3.rem+vw

因为rem的方式根元素font-size值强耦合，系统字体放大或缩小时，会导致布局错乱，并且html文件头部需插入一段js代码。那么利用vw的方式来设置根元素的font-zise，省去那一小段js代码，让你的代码更纯粹。

以750的图纸为例
//375 / 100 = 3.75
//为了方便计算，使用100px
//100 / 3.75 = 26.66666666666667vw
//这里就得出26.66666666666667 = 100px
html {font-zise: 26.66666666666667vw }

//70 / 100 = 0.7
div {
  width:0 .7rem
}

4.px为主，vx和vxxx（vw/vh/vmax/vmin）为辅，搭配一些flex

这是看到一位大佬写的文章后了解到的一种适配方式
原文地址：面试官：你了解过移动端适配吗？
这套方案的中心思想，用户之所以去买大屏手机，不是为了看到更大的UI，而是为了看到更多的UI。

适配流程

在head 设置width=device-width的viewport‘
在css中使用px
在适当的场景使用flex布局，或者配合vw进行自适应
在跨设备类型的时候（pc <-> 手机 <-> 平板）使用媒体查询
在跨设备类型如果交互差异太大的情况，考虑分开项目开发

我在尝试过这套方案之后存在一些疑问，屏幕大的上面确实做到了可以展示更多的ui，小屏幕上的展示也友好，就是写的时候繁琐，还有就是轮播图的高度因为是写px的所以在大屏上会被挤压。

最后编辑于：2020.07.03 11:21:12