移动端适配 rem、postcss-pxtorem、postcss-px-to-viewport、vw vh

背景

移动端设计稿一般是750px，如果没有用taro或者uniapp这类的框架，就需要自己来进行css的适配。

方案

一、Rem

rem是相对于根元素html字体大小的一个css单位，默认情况下html的font-size=16px，所以1rem = 16px。可以动态设置html的字体大小，比如设置html的font-size=100px，那么1rem=100px。重点就是动态设置html字体大小。

第一步

先在html的head标签中加一个meat标签

<metaname="viewport"content="width=device-width, initial-scale=1, maximum-scale=1, minimum-scale=1, user-scalable=no">

意思是让当前视口的宽度等于设备的宽度，同时不允许用户手动缩放。

第二步

如果只是简单的一两个页面，html直接梭了，甚至都不需要用react、vue，那么可以继续在head中引入这段js

<script>functionsetSize(){var baseWidth =750// 设计稿尺寸var clientWidth = document.documentElement.clientWidth
        if(clientWidth >=750){
            clientWidth =750}var fontSize =(clientWidth / baseWidth)*100// 乘以100是为了方便计算 
        window.document.documentElement.style.fontSize = fontSize +'px'}setSize()
    window.addEventListener('resize', setSize)</script>

写样式的时候，100px*100px的宽高可以写成

width:1rem;height:1rem

，50px*50px的宽高可以写成

width:0.5rem;height:0.5rem

，其实就是设计稿里的尺寸/100

如果是正常开发一个项目，这么去换算肯定麻烦，肯定是需要自动换算，插件

postcss-pxtorem

可以满足这个需求，这时候需要加入另一段js。用上面一段也没什么大问题，核心就是设计稿尺寸下的字体大小，上面的js在iPhone6下fontSize是50px，那么插件rootValue值要设置成50，下面这段js在iPhone6下fontSize是16px，那么插件rootValue值要设置成16

<script>functionsetSize(){var baseFontSize =16;// 这个值要和下面插件的rootValue值一样var baseWidth =375;// 设计稿尺寸var clientWidth = document.documentElement.clientWidth;if(clientWidth >750){
      clientWidth =750;}
    document.documentElement.style.fontSize =
      baseFontSize *(clientWidth / baseWidth)+"px";}setSize();
  window.addEventListener("resize", setSize);</script>

1、安装
使用

postcss-pxtorem

前提是需要安装

postcss postcss-loader 

npm i postcss postcss-loader postcss-pxtorem -D

2、webpack配置
或者新建一个 postcss.config.js 文件也行(.json,.yaml格式的文件都行，看个人习惯)

// 引入插件const Pxtorem =require('postcss-pxtorem');

module.export ={module:{rules:[{test:/\.css$/i,use:["style-loader","css-loader",{loader:"postcss-loader",options:{postcssOptions:{plugins:[Pxtorem({rootValue:16,unitPrecision:5,propList:['*'],selectorBlackList:[],replace:true,mediaQuery:false,minPixelValue:0,// exclude: /node_modules/i})],},},},],},]}}

postcss-pxtorem

的默认配置如下

{rootValue:16,unitPrecision:5,propList:['font','font-size','line-height','letter-spacing'],selectorBlackList:[],replace:true,mediaQuery:false,minPixelValue:0,exclude:/node_modules/i}

• rootValue：根结点的字体大小，默认16，可以设置一个具体的数值，或者可以是一个函数，返回一个数值。如果用到了UI库，可能UI库是按照375，设计稿是750，就可以通过函数来设置rootValue。该函数有一个参数，是一个对象，可以通过file字段来判断是自己写的样式还是UI库的样式，file是当前文件的路径。function ({file}) { return file.indexOf('exclude') !== -1; }
• unitPrecision：保留几位小数
• propList：一个数组。表示哪些属性能转化成rem - 属性必须完成匹配。比如height，width- 使用通配符 * 启用所有属性。[‘’]- 在单词的开头或结尾使用 来匹配。比如[“positons”,“height”]会匹配到background-position-y和min-height、max-height- 使用！不匹配属性。比如 [“!height”] 就不会转换height- 可以将！和 结合使用。比如 [“!font*”] font-size将不会转换
• selectorBlackList：一个数组，要忽略的选择器，保留为px。 - 如果是一个字符串，那么会检查选择器是否包含该字符串，比如[‘body’] 会匹配到.body-main- 如果是一个正则，会检查该选择器和正则是否匹配，比如[/^body$/] 会匹配 body 但是不会匹配 .body
• replace：Boolean，是否替换包含rem的规则，而不是添加回退
• mediaQuery：Boolean，是否允许在媒体查询中转换px
• minPixelValue：数值，设置要替换的最小像素值
• exclude：(String, Regexp, Function) 要忽略并保留为px的文件路径 - 如果是string，则检查文件路径是否包含该字符串- 如果是regexp，则检查文件路径是否与regexp匹配- 如果是function，则可以使用函数返回true，文件将被忽略，回调函数将文件路径作为参数传递 function (file) { return file.indexOf('exclude') !== -1; }

如果只是单个属性需要忽略，最简单的是大写

PX

// `px` 会转成 `rem`
.convert{font-size: 16px; // 会被转成rem
}// `Px` or `PX` 会被忽略，但是在浏览器里面仍然可以用
.ignore{border: 1Px solid; // ignored
    border-width: 2PX; // ignored
}

二、vw vh

vw和vh是浏览器视口(viewport)的单位，简单理解就是1vw是屏幕宽度的1%，1vh是屏幕高度的1%，此外还有vmin：vw和vh中较小的那个，vmain：vw和vh中较大的那个。

vw也不用自己手动去换算，现在浏览器都支持vw、vh，可以用

postcss-px-to-viewport

插件进行转换，和rem的插件用法类似(本身也是受

postcss-pxtorem

启发)

1、安装

npm i postcss postcss-loader postcss-px-to-viewport -D

2、webpack配置

// 引入插件const postcssPxToViewport =require("postcss-px-to-viewport");

module.export ={module:{rules:[{test:/\.css$/i,use:["style-loader","css-loader",{loader:"postcss-loader",options:{postcssOptions:{plugins:[postcssPxToViewport({viewportWidth:320,// 设计稿宽度unitPrecision:5,// px转换后的小数保留位数minPixelValue:1,// 小于多少像素不转换selectorBlackList:["ignore-"],// 有ignore-* 的类名不会被转换}),],},},},],},]}}

postcss-px-to-viewport

的默认配置如下

{unitToConvert:'px',viewportWidth:320,unitPrecision:5,propList:['*'],viewportUnit:'vw',fontViewportUnit:'vw',selectorBlackList:[],minPixelValue:1,mediaQuery:false,replace:true,exclude:undefined,include:undefined,landscape:false,landscapeUnit:'vw',landscapeWidth:568}

• unitToConvert (String) 需要转换的单位，默认为"px"
• viewportWidth (Number) 设计稿的视口宽度
• unitPrecision (Number) 单位转换后保留的精度
• propList (Array) 能转化为vw的属性列表 - 传入特定的CSS属性；- 可以传入通配符""去匹配所有属性，例如：[‘’]；- 在属性的前或后添加"",可以匹配特定的属性. (例如[‘position’] 会匹配 background-position-y)- 在特定属性前加 “!”，将不转换该属性的单位 . 例如: [‘’, ‘!letter-spacing’]，将不转换letter-spacing- “!” 和 ""可以组合使用， 例如: [‘’, ‘!font*’]，将不转换font-size以及font-weight等属性
• viewportUnit (String) 希望使用的视口单位
• fontViewportUnit (String) 字体使用的视口单位
• selectorBlackList (Array) 需要忽略的CSS选择器，不会转为视口单位，使用原有的px等单位。 - 如果传入的值为字符串的话，只要选择器中含有传入值就会被匹配，例如 selectorBlackList 为 [‘body’] 的话， 那么.body-class 就会被忽略- 如果传入的值为正则表达式的话，那么就会依据CSS选择器是否匹配该正则 ，例如 selectorBlackList 为 [/^body$/] , 那么 body 会被忽略，而 .body 不会.
• minPixelValue (Number) 设置最小的转换数值，如果为1的话，只有大于1的值会被转换
• mediaQuery (Boolean) 媒体查询里的单位是否需要转换单位
• replace (Boolean) 是否直接更换属性值，而不添加备用属性
• exclude (Array or Regexp) 忽略某些文件夹下的文件或特定文件，例如 ‘node_modules’ 下的文件 - 如果值是一个正则表达式，那么匹配这个正则的文件会被忽略- 如果传入的值是一个数组，那么数组里的值必须为正则
• include (Array or Regexp) 如果设置了include，那将只有匹配到的文件才会被转换，例如只转换 ‘src/mobile’ 下的文件 (include: /\/src\/mobile\//) - 如果值是一个正则表达式，将包含匹配的文件，否则将排除该文件- 如果传入的值是一个数组，那么数组里的值必须为正则
• landscape (Boolean) 是否添加根据 landscapeWidth 生成的媒体查询条件 @media (orientation: landscape)
• landscapeUnit (String) 横屏时使用的单位
• landscapeWidth (Number) 横屏时使用的视口宽度

exclude和include是可以一起设置的，将取两者规则的交集。

最后

个人感觉移动端适配这两种方案都行，rem算是大家用的比较久的，vw是后发展的方案