最佳移动端h5自适应rem适配方案

时间 2019-12-09

标签最佳移动 h5 自适应 rem 适配方案栏目无线繁體版

原文原文链接

1、利用lib-flexible、postcss-px2rem插件进行移动端rem适配。
javascript

一、第一css

　　引入lib-flexible . html

　　安装lib-flexible：　　npm i lib-flexible --save-devjava

　　在项目的入口main.js文件中引入lib-flexible: import 'lib-flexible'，webpack

　　在index.html中去掉meta name="viewport" 标签由于 lib-flexble插件会自动计算添加meta name="viewport" 视口标签git

二、第二web

　　使用postcss-px2rem自动将css中的px转换成rem（真的是大大提高了咱们的工做效率，棒棒的，不用本身去瞎算啊）npm

　　安装postcss-px2rem ：　　npm install postcss-px2rem --save-dev浏览器

三、配置postcss
　　在build文件夹中找到 utils.js ，配置以下：布局

　　const px2remLoader = {

　　　　loader: 'px2rem-loader',

　　　　options: {

　　　　　　remUnit: 75 // (这里是指设计稿的宽度为 750 / 10)

　　　　}

  function generateLoaders(loader, loaderOptions) {
    const loaders = options.usePostCSS
      ? [cssLoader, px2remLoader]
      : [cssLoader,px2remLoader ];
    if (loader) {
      loaders.push({
        loader: loader + '-loader',
        options: Object.assign({}, loaderOptions, {
          sourceMap: options.sourceMap
        })
      });
    }

    if (options.extract) {
      return ExtractTextPlugin.extract({
        use: loaders,
        publicPath:'../../',
        fallback: 'style-loader'
      });
    } else {
      return ['style-loader'].concat(loaders);
    }
  }

五、最后，咱们须要知道flexible的转换不包括第三方ui库，具体去官网看下：网上有许多解决办法，首先咱们要知道，根源是由于移动端ui库，原本就是适配了移动端尺寸，而fliexble再去适配一次，能不变小吗？

那么就知道解决办法了，总结大体以下：

　　一、固定缩放比，即dpr为1，不推荐，全局设置不易调控；

　　二、给不但愿转化rem的组件，设置px的时候，单位后面加上／* no *／即不会转化px --- 通常border需用这个

　　三、在它转化以前就设置rem，我的推荐该法，利用VScode的px to rem，将写好的px，直接选中option+z转为rem，而后fliexble就在webpack编译的时候不去转化它了。

　　四、在px后面添加/*px*/,会根据dpr的不一样，生成三套代码。---- 通常字体需用这个

这里推荐移动端的ui库：vant-ui,与该适配方案完美结合使用；

vant-ui相比其余移动端ui库优点：

1. 60+ 高质量组件，组件丰富
2. 很详细完整的中英文文档
3. 支持现代浏览器以及 Android 4.0+, iOS 7+
4.在gitHub上已得到11.9K的星，用户量持续增多
5.源码由有赞团队一直持续维护中。
6.相比其余移动端Ui库，组件更丰富齐全，功能传参方式简单易懂，文档齐全，容易上手。

至此，结束。

2、rem适配方法，适合窗口大小可能会改变以及设计图小于750，或者大于750设计稿的状况
该方法，将100px为1rem，根据设计稿尺寸缩小100就为 rem，
　　例如：font-size:14px,换成rem就为0.14rem, div{width:10px;}换成rem就是div{width:0.10rem;}

fnResize()

window.onresize = function () {

fnResize()

}

function fnResize() {

var deviceWidth = document.documentElement.clientWidth || window.innerWidth

if (deviceWidth >= 750) {

deviceWidth = 750

}

if (deviceWidth <= 320) {

deviceWidth = 320

}

document.documentElement.style.fontSize = (deviceWidth / 7.5*2) + 'px'

}

</script>

3、rem适配方法，适合移动设备为固定的某个宽度，以及设计图为固定的某个值例如750，或者pad,1920的状况
该方法，将100px为1rem，根据设计稿尺寸缩小100就为 rem，
　　例如：font-size:14px,换成rem就为0.14rem, div{width:10px;}换成rem就是div{width:0.10rem;}
　　

/**

* 页面自适应方法使用rem单位

* 须要根据布局视口的尺寸动态设置font-size的值

* 不管在什么设备下，咱们页面的总宽度都是19.2rem，因此咱们直接在设计图上测量px单位的尺寸，而后除以100转换成rem单位后直接使用就能够了

* 好比，在设计图中测量一个元素的尺寸为200px，那么转换成rem单位就是 200 / 100 = 2rem

document.documentElement.style.fontSize =

document.documentElement.clientWidth / 19.2 + 'px';

/**
* 移动端自适应，移动端必定要在头 <head>标签里面加入这段标签,以适应不一样手机的视口
*/
<head>

</head>
// 
// 
// 
// 
// 
// 
//