阅读 594

前端自适应解决方案

方案一:rem

步骤一:新建rem.js,然后引入到页面即可

(function (doc, win) {
    var docEl = doc.documentElement
    var resizeEvt = 'orientationchange' in window ? 'orientationchange' : 'resize'
    var reCalc = function () {
      var clientWidth = docEl.clientWidth
      if (!clientWidth) return
      docEl.style.fontSize = 16 * (clientWidth / 320) + 'px'
    }
    if (!doc.addEventListener) return
    win.addEventListener(resizeEvt, reCalc, false)
    doc.addEventListener('DOMContentLoaded', reCalc, false)
})(document, window)
复制代码

步骤二:新建base.scss文件并定义rem转px函数

$browser-default-font-size:16px!default;//iphone6
html,body{
    font-size:$browser-default-font-size;
}
@function px2rem($px){
    @return $px/$browser-default-font-size*1rem;
}
复制代码

步骤三:代码中所有尺寸都用px2rem()进行转换,例如:

div{
	width:px2rem(100px);
    height:px2rem(100px);
    fonst-size:px2rem(20px);
}
复制代码

方案二:vw方案,借用插件

步骤一:安装插件

npm install postcss-px-to-viewport --save-dev
复制代码

步骤二:增加配置

新建完成后会自动创建postcss.config.js文件,如果没用可自行创建,与package.json文件在同一目录下
增加以下配置即可:
module.exports = {
  plugins: {
    autoprefixer: {}, // 用来给不同的浏览器自动添加相应前缀,如-webkit-,-moz-等等
    'postcss-px-to-viewport':{
      unitToConvert: 'px',// 要转化的单位
      viewportWidth: 750,// UI设计稿的宽度
      unitPrecision: 6,// 转换后的精度,即小数点位数
      propList: ['*'],// 指定转换的css属性的单位,*代表全部css属性的单位都进行转换
      viewportUnit: 'vw',// 指定需要转换成的视窗单位,默认vw
      fontViewportUnit: 'vw',// 指定字体需要转换成的视窗单位,默认vw
      selectorBlackList: [],// 指定不转换为视窗单位的类名,
      minPixelValue: 1,// 默认值1,小于或等于1px则不进行转换
      mediaQuery: true,// 是否在媒体查询的css代码中也进行转换,默认false
      replace: true,// 是否转换后直接更换属性值
      exclude: undefined,// 设置忽略文件,用正则做目录名匹配
      include: undefined,
      landscape: false,// 是否处理横屏情况
      landscapeUnit: 'vw',
      landscapeWidth: 568
    }
  }
}
复制代码

补充说明:

高度尽量用em或者不转换高度,可以避免高度错位的问题。

文章分类
前端
文章标签