Web前端中移动端适配方案

使用rem单位或者VW/VH进行移动端适配

px单位名称为像素，相对长度单位，像素（px）是相对于显示器屏幕分辨率而言  （最终解析单位）

em单位名称为相对长度单位。相对于当前对象内文本的字体尺寸   （相对于父元素的font-size大小的单位，那如果你要设置一个元素的宽度，高度，那么就得去看他父级的大小，如果父级也是em单位，你又得去找他的父级，得一层层计算，才能得到准确的像素值，因此在实际开发中，常用rem来替代此方案）

pt单位名称为点（Point），绝对长度单位一般老版本的table使用长度大小单位但是现在基本上没有使用

（换算：浏览器的默认字体高度16px,1em=16px,12px相当于9pt长度）

html{font-size:10px}

因此常常通过使用设置font-size为10px来确定根元素大小，1rem = 10px的大小

% 相对于父元素的大小设定的比率

 

rem    rem相对的是HTML根元素，px是相对固定单位，字号大小直接被定死，所以用户无法根据自己设置的浏览器字号而缩放，em和rem虽然都是相对单位，但em是相对于它的父元素的font-size，页面层级越深，em的换算就越复杂，而rem是直接相对于根元素，这就避开了很多层级关系。移动端新型浏览器对rem的兼容很好，可以放心使用。

 

一般而言，UI给的设计稿往往都是iphone6的稿子（750*1334），因为iphone6为两倍屏，所以设计稿转为rem需要在px单位下÷2÷10得到rem单位的值。之后在CSS中添加媒体查询设置每个屏幕大小的值，页面即可根据设置的font-size值适配。

 举个例子：

html{font-size:10px} /*也有的写作62.5%,即是默认大小16px的0.625倍-10px*/
 
@media only screen and (max-height: 700px) and (min-height:645px) and (max-width: 400px) and (min-width: 360px) {html {font-size: 9.3px} }
@media only screen and (max-height: 645px) and (min-height:601px) and (max-width: 400px) and (min-width: 360px) {html {font-size: 8.7px} }
@media only screen and (max-height: 600px) and (min-height:560px) and (max-width: 400px) and (min-width: 360px) {html {font-size: 8px} }
@media only screen and (max-height: 560px) and (min-height:531px) and (max-width: 400px) and (min-width: 360px) {html {font-size: 7.6px} }
@media only screen and (max-height: 530px) and (min-height:500px) and (max-width: 400px) and (min-width: 360px) {html {font-size: 7px} }

但是此处会有两个坑，基于维护代码的鲁棒性来说必须说说：

1、关于rem的资料来说，基本都默认浏览器字号为16px，然后直接定义font-size:62.5%，但是rem为css3的属性，大概13、14年才得到完全支持，有些浏览器的早期版本和国内浏览器的默认字号并不是16px，那么百分之62.5的换算就会出现偏差。

2、chrome强制字体最小值为12px。低于12px的按照12px处理，那么1rem = 10px也会出现一定程度的偏差。

解决方案：将1rem = 10px换成1rem = 100px；或者不要再PC端项目使用rem；

之后使用符合标准的换算过的媒体查询即可

@media screen and (min-width:360px) and (max-width:374px) and (orientation:portrait) {
    html { font-size: 703%; }
}
@media screen and (min-width:375px) and (max-width:383px) and (orientation:portrait) {
    html { font-size: 732.4%; }
}
@media screen and (min-width:384px) and (max-width:399px) and (orientation:portrait) {
    html { font-size: 750%; }
}
@media screen and (min-width:400px) and (max-width:413px) and (orientation:portrait) {
    html { font-size: 781.25%; }
}
@media screen and (min-width:414px) and (max-width:431px) and (orientation:portrait){
    html { font-size: 808.6%; }
}
@media screen and (min-width:432px) and (max-width:479px) and (orientation:portrait){
    html { font-size: 843.75%; }
}

更成熟的工业级方案？

上述方案已可以很好的解决适配中的坑，但是业界早已对此为题作出了各种非常优秀的解决方案，大名鼎鼎的淘宝Flexible即是一个工业级的解决方案。

https://github.com/amfe/lib-flexible

引入文件，直接引用阿里的CDN文件（或下载到本地引入）

<script src="http://g.tbcdn.cn/mtb/lib-flexible/0.3.4/??flexible_css.js,flexible.js"></script>

设定： 页面不要设定 。Flexible会自动设定每个屏幕宽度的根font-size、动态viewport、针对Retina屏做的dpr。

换算： 假设拿到的设计稿为标准UI设计稿iphone6的大小，750*1334，Flexible会把设计稿分为10份，可以理解为页面width=10rem，即1rem=75px，所以根font-size（基准值）=75px。 

换算过于麻烦?px2rem/cssrem插件来了 

 

cssrem插件

cssrem是一款vscode自带的插件，如果你也用VScode，可以使用此插件

1.vscode安装插件
2.配置

参数配置文件：VSCode -> 文件 -> 设置 -> 搜索cssrem

cssrem.rootFontSize root font-size (unit: px), default: 16
cssrem.fixedDigits px转rem小数点最大长度，默认：6。
cssrem.autoRemovePrefixZero 自动移除0开头的前缀，默认：true

3.书写的时候就会有提示 ，可以直接转换rem

 

px2rem插件

1、安装

npm install px2rem-loader lib-flexible –save

2、在项目入口文件main.js中引入lib-flexible

import ‘lib-flexible/flexible.js’

3、在build下的 utils.js中，generateLoaders 方法。（基于vue-cli2.x)

const px2remLoader = {
  loader: 'px2rem-loader',
  options: {
    remUnit: 75 // 设计图的1/10
  }
}
function generateLoaders (loader, loaderOptions, anotherLoader) {
  const loaders = options.usePostCSS ? [cssLoader, postcssLoader,px2remLoader] : [cssLoader,px2remLoader]

  if (loader) {
    loaders.push({
      loader: loader + '-loader',
      options: Object.assign({}, loaderOptions, {
        sourceMap: options.sourceMap
      })
    })
  }
  if (!!anotherLoader) loaders.push(anotherLoader)

  // Extract CSS when that option is specified
  // (which is the case during production build)
  if (options.extract) {
    return ExtractTextPlugin.extract({
      use: loaders,
      fallback: 'vue-style-loader'
    })
  } else {
    return ['vue-style-loader'].concat(loaders)
  }
} 

至此，移动端适配性能较高且适配性较好。