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

1、第一

　　引入lib-flexible .

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

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

　　在index.html中 是否 去掉meta name="viewport" 标签  要看框架具体情况，具体请看第四条，

2、第二

　　使用postcss-plugin-px2rem自动将css中的px转换成rem（真的是大大提升了我们的工作效率，棒棒的，不用自己去瞎算啊）

　　安装postcss-plugin-px2rem ：　　npm install postcss-plugin-px2rem --save-dev

3、第三 配置postcss

　　在根目录下 找到.postcssrc.js文件配置如下：

module.exports = {

  "plugins": {

    "postcss-import": {},

    "postcss-url": {},

    // to edit target browsers: use "browserslist" field in package.json

    "autoprefixer": {},

    "postcss-plugin-px2rem": {

      rootValue: 75, //换算基数， 默认100  ，这样的话把根标签的字体规定为1rem为50px,这样就可以从设计稿上量出多少个px直接在代码中写多上px了。

      // unitPrecision: 5, //允许REM单位增长到的十进制数字。

      //propWhiteList: [],  //默认值是一个空数组，这意味着禁用白名单并启用所有属性。

      // propBlackList: [], //黑名单

      exclude: /(node_module)/,  //默认false，可以（reg）利用正则表达式排除某些文件夹的方法，例如/(node_module)/ 。如果想把前端UI框架内的px也转换成rem，请把此属性设为默认值

      // selectorBlackList: [], //要忽略并保留为px的选择器

      // ignoreIdentifier: false,  //（boolean/string）忽略单个属性的方法，启用ignoreidentifier后，replace将自动设置为true。

      // replace: true, // （布尔值）替换包含REM的规则，而不是添加回退。

      mediaQuery: false,  //（布尔值）允许在媒体查询中转换px。

      minPixelValue: 3 //设置要替换的最小像素值(3px会被转rem)。 默认 0

    }

  }

}

　　

4、最后，我们需要知道flexible的转换第三方ui库 某些ui库会出现显示太小的问题，具体去官网看下：
　　　 网上有许多解决办法，首先我们要知道，根源是因为移动端ui库，本来就是适配了移动端尺寸，而fliexble再去适配一次，能不变小吗？

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

　　1、固定缩放比，即dpr为1，即将index.html里面 写上 <meta name="viewport" content="width=device-width,initial-scale=1.0">视口标签 
如果不写 因为 lib-flexble插件会自动计算添加，这个时候就无法固定dpr为1了。将.postcssrc.js 的postcss-plugin-px2rem的 remUnit值设置为rootValue: 75,exclude:/(node_module)/,这个时候 你三方ui库就不会自动转换 rem了，大小就与页面保持一致了

　　2.不固定缩放比，将 <meta name="viewport" 标签注释掉，将.postcssrc.js 的postcss-plugin-px2rem的 remUnit值设置为rootValue: 37.5,去掉exclude:/(node_module)/,这个时候 你三方ui库转换为rem后大小与页面也会保持一致了

　　　缺点：页面的基准值是以375px的尺寸来写 这样如果ui图是750px，写css时 需将px/2来写，所以不推荐

附上 px2rem常用 操作：

　　1、给不希望转化rem的组件，设置px的时候，单位后面加上 ／* no *／即不会转化px --- 一般border也需用这个

　　2、如该项px不想被转化，在它转化之前就设置rem，利用VScode的px to rem，将写好的px，直接选中option+z转为rem，然后fliexble就在webpack编译的时候不去转化它了。

　　3、在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库，组件更丰富齐全，功能传参方式简单易懂，文档齐全，容易上手。

至此，结束。

 


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

1、第一

　　引入lib-flexible .

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

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

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

2、第二

　　使用postcss-px2rem自动将css中的px转换成rem（真的是大大提升了我们的工作效率，棒棒的，不用自己去瞎算啊）

　　安装postcss-px2rem ：　　npm install postcss-px2rem --save-dev

3、配置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);

    }

  }

总结：该方法 在某些移动端UI库下 将ui库也进行转换后 显示的很小 ，解决方法 ，请参考第一种方法；

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

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

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

// <!--content-->
// <!--width=device-width 可视区域的宽度，值可为数字或关键词device-width-->
// <!--height=device-height 可视区域的高度，值可为数字或关键词device-height-->
// <!--user-scalable=yes/no 是否可对页面进行缩放，no 禁止缩放-->
// <!--initial-scale=1.0 页面首次被显示是可视区域的缩放级别，取值1.0则页面按实际尺寸显示，无任何缩放-->
// <!--minimum-scale=1.0 可视区域的缩小级别-->
// <!--maximum-scale=1.0 可视区域的放大级别-->

<script>
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>
postcss-plugin-px2rem

最佳移动端h5自适应rem适配方案的更多相关文章

  1. H5 端 rem 适配方案与 viewport 适配

    H5 端 rem 适配方案与 viewport 适配 rem rem 是 CSS3 新增的一个相对单位(root em,根 em) 只根据当前页面 HTML 页面的 font-size 设置,如果根目 ...

  2. 谈谈我的移动端rem适配方案

    最近有点怀疑人生,毕竟一个人写前端,有时候会怀疑自己理解的一些东西包括用法有没有符合标准.趁着这阵子闲下来,翻了翻别人的rem适配博客,发现有点绕口,怪自己是个强迫症,啥都要自己去试试结果并从中理解, ...

  3. 移动端H5地图离线瓦片方案（1）（2）

    2在作者另一篇 移动端H5地图离线瓦片方案   文章版权由作者李晓晖和博客园共有,若转载请于明显处标明出处:http://www.cnblogs.com/naaoveGIS/ 1.背景 移动端的网速和 ...

  4. em与rem之间的区别以及移动设备中的rem适配方案

    em与rem之间的区别: 共同点: 它们都是像素单位 它们都是相对单位 不同点: em大小是基于父元素的字体大小 rem大小是基于根元素(html)的字体的大小 实例: <!DOCTYPE ht ...

  5. vue中使用第三方UI库的移动端rem适配方案

    需求:使用vue-cli脚手架搭建项目,并且使用第三方的UI库(比如vant,mint ui)的时候,因为第三方库用的都是用px单位,无法使用rem适配不同设备的屏幕. 解决办法:使用px2rem-l ...

  6. 移动端H5多终端适配解决方案

    推荐三篇文章: 1.来自手淘团队的开源技术flexibal.js github地址:https://github.com/isHelenaChan/flexible 2.来自“大漠”(就职于淘宝,也是 ...

  7. pc端的弹性布局适配方案

    方案及原理:使用rem单位,通过window.onresize来监听浏览器窗口,获取窗口宽度,并改变跟字体大小来达到弹性适配效果. function adaptor(){ //为了便于计算,这里以19 ...

  8. 移动端H5地图离线瓦片方案

    文章版权由作者李晓晖和博客园共有,若转载请于明显处标明出处:http://www.cnblogs.com/naaoveGIS/ 1.背景 移动端的网速和流量耗费是移动开发必须考虑的两个点.常规的瓦片展 ...

  9. 移动端 移动web屏幕适配方案 随不同宽度的屏幕而改变

    链接地址1:http://www.cnblogs.com/zjzhome/p/4802157.html 链接地址2:http://www.html-js.com/article/Mobile-term ...

随机推荐

  1. 解决:File "/usr/lib/python2.7/site-packages/more_itertools/more.py", line 340 def _collate(*iterables, key=lambda a: a, reverse=False): 的报错

    cyberb commented on 15 Apr Traceback (most recent call last): File "/snap/users/x1/python/bin/l ...

  2. Linux performance monitor tool

    https://www.tecmint.com/command-line-tools-to-monitor-linux-performance/ https://www.tecmint.com/lin ...

  3. Java12新特性 -- 增强G1，自动返回未用堆内存给操作系统

    Java 12 中增强了 G1 垃圾收集器关于混合收集集合的处理策略,这节主要介绍在 Java 12 中同时也对 G1垃圾回收器进行了改进,使其能够在空闲时自动将 Java 堆内存返还给操作系统,这也 ...

  4. TrueType字体

    TrueType字形描述技术和TTF文件 TrueType字体技术的研究分析与应用 看起来上面两篇都是翻译的文档. 看微软的原文介绍: TrueType fundamentals 其他文章: 获取Tr ...

  5. 查找算法(1)--Sequential search--顺序查找

    1. 顺序查找 (1)说明 顺序查找适合于存储结构为顺序存储或链接存储的线性表.     (2)基本思想 顺序查找也称为线形查找,属于无序查找算法.从数据结构线形表的一端开始,顺序扫描,依次将扫描到的 ...

  6. Linux 命令行作弊工具安利

    本文转自 微信公众号<Linux爱好者>的一篇文章,觉得工具非常好使,且极具使用价值,所以在此安利一下 Linux 用户的福音,记忆力解放!快速调用复杂命令 刚学的一句新命令,才用完就忘了 ...

  7. CentOS7下安装Nexus私服及基础配置

    环境准备 VMware上安装CentOS7 XShell/Xftp NexusOSS-3.10 jdk1.8 安装 使用root用户登录,将安装包均放置在/usr/local文件夹下 使用Xshell ...

  8. k8s记录-Dockerfile详解

    Dockerfile命令详解 下面我们来分别介绍下上面使用到的命令: FROM 格式:FROM 或FROM :. 解释:FROM必须是Dockerfile里的第一条指令(注视除外),后面跟有效的镜像名 ...

  9. [转] 2017年PHP开发者大会 鸟哥 （惠新宸@Laruence）精彩问答

    php7.1那个诡异的函数返回类型限定是如何考虑的? 鸟哥:没什么特别考虑,投票投出来的.首先说明一点,我投的是反对票.包括php的命名空间反斜杠我也是非常反对的,但可能由于我并没有对这方面太深的认识 ...

  10. Kubernetes+Istio

    Kubernetes+Istio   微服务.SpringCloud.k8s.Istio杂谈   一.微服务与SOA “微服务”是一个名词,没有这个名词之前也有“微服务”,一个朗朗上口的名词能让大家产 ...