微信搜索superit|邀请体验:大数据, 数据管理、OLAP分析与可视化平台 | 赞助作者:赞助作者

利用px2rem-loader和lib-flexible如何实现PC端大屏项目的全自动开发

前端 aide_941 46℃

利用px2rem-loader和lib-flexible如何实现PC端大屏项目的全自动开发

大屏项目在做的时候,每次都要自己去计算rem的值很麻烦,也影响开发进度,所以无意中发现了一个好东西,利用webpack配置px2rem-loader和lib-flexible来实现px转化rem;

  1. 首先安装包
npm install px2rem-loader -D
npm install lib-flexible -S
  • 1
  • 2
  1. 安装好了我们就开始配置,参照官网的配置方法
module.exports = {
  module: {
    rules: [{
      test: /\.css$/,
      use: [{
        loader: 'style-loader'
      }, {
        loader: 'css-loader'
      }, {
        loader: 'px2rem-loader',
        // options here
        options: {
          remUnit: 75,//设计图的宽度/10 比如你的设计图是1920的宽度 这里你就1920/10=192
          remPrecision: 8//换算的rem保留几位小数点
        }
      }]
    }]
  }
}
//也可以参照我的配置
{
        test: /\.less$/, //我们可以使用css预编译工具   这里我用sass举例
        use: [ //安装 npm install sass-loader node-sass css-loader vue-style-loader postcss-loader style-loader -D  反正后面也要安装 索性一股脑全安装了
          process.env.NODE_ENV ? //MiniCssExtractPlugin.loader 用来抽离css文件的 不用打包到js文件里
          'vue-style-loader' : MiniCssExtractPlugin.loader, //可以再vue模板中的<style lang='scss'>使用sass
          'css-loader',
          'postcss-loader', //css自动加上兼容性前缀
          'less-loader',
          {
            loader: 'px2rem-loader',
            options: {
              remUnit: 192,
              remPrecision: 5
            }
          }
        ]
      },
      {
        test: /\.css$/, //同上
        use: [
          'style-loader',
          process.env.NODE_ENV ?
          'vue-style-loader' : MiniCssExtractPlugin.loader, //MiniCssExtractPlugin.loader 用来抽离css文件的 不用打包到js文件里
          'css-loader',
          'postcss-loader',
          {
            loader: 'px2rem-loader',
            options: {
              remUnit: 192,
              remPrecision: 5
            }
          }
        ]
      },
  • 1
  • 2
  • 3
  • 4
  • 5
  • 6
  • 7
  • 8
  • 9
  • 10
  • 11
  • 12
  • 13
  • 14
  • 15
  • 16
  • 17
  • 18
  • 19
  • 20
  • 21
  • 22
  • 23
  • 24
  • 25
  • 26
  • 27
  • 28
  • 29
  • 30
  • 31
  • 32
  • 33
  • 34
  • 35
  • 36
  • 37
  • 38
  • 39
  • 40
  • 41
  • 42
  • 43
  • 44
  • 45
  • 46
  • 47
  • 48
  • 49
  • 50
  • 51
  • 52
  • 53
  • 54
  1. 然后我们启动一下项目看一下有没有换算成功
    在这里插入图片描述
//这是我写的CSS样式转化成上图那样,但是怎么看着这么奇怪,好像有很大问题
.title{
        width:400px;
        height:100px;
        font-size: 32px;
    }
    .text{
        width:200px;
        height:200px;
        border-radius: 50%;
    }
  • 1
  • 2
  • 3
  • 4
  • 5
  • 6
  • 7
  • 8
  • 9
  • 10
  • 11
  1. 所以这时候需要另外一个插件来帮我们动态计算html的font-size
import 'lib-flexible/flexible';//在入口文件引入然后运行
  • 1

然后我们发现还是有问题,为什么比例还是不对,一定使我们打开的方式不对
在这里插入图片描述
我们来分析一波;为什么我1600的宽度却计算的是54px呢,显然是不科学的;所以我们第一时间应该联想到是插件哪里出了小问题;我们打开引入的这个文件,看一下封装的代码哪里限制了我们PC端使用rem;
在这里插入图片描述

//我们把代码改一下
function refreshRem(){
        var width = docEl.getBoundingClientRect().width;
        if (width / dpr > 540) {
            width = width * dpr;//当屏幕宽度超过540的时候我们应该以实际宽度重新计算,从而来做到适应PC
        }
        var rem = width / 10;
        docEl.style.fontSize = rem + 'px';
        flexible.rem = win.rem = rem;
    }
  • 1
  • 2
  • 3
  • 4
  • 5
  • 6
  • 7
  • 8
  • 9
  • 10
  1. 最后我们再来运行一下
    在这里插入图片描述
//这时候发现就很nice,因为我的设计图是1920的宽度,我的浏览器宽度是1600;我写的样式是
400px;400/1920*10=2.08333保留了五位小数;所以在1600屏幕下换算的宽度应该是反着推导;
X/1600*10=2.08333;我们求出来X的值是:333.3328px;
然后我们看一下实际在浏览器中的表现
  • 1
  • 2
  • 3
  • 4

在这里插入图片描述
这时候发现我们的宽度是333.33,和我们预计的值一样,这样就ok了,你就只管写你的PX其他换算什么的交给工具去做吧;你以为这样就结束了,并没有
6. 问题是1px的边框也会帮你转成rem的是不是很绝望,完全没必要啊
在这里插入图片描述
完全不出意外啊;可是我不想转换啊,怎么办呢?莫慌我们是有办法的;

//对于有些地方不用转换的我们可以在样式后面添加/*no*/这样就不会给我们转化了;
.text{
        width:200px;
        height:200px;
        border-radius: 50%;
        border:1px solid red;/*no*/
    }
    //看一下效果
  • 1
  • 2
  • 3
  • 4
  • 5
  • 6
  • 7
  • 8

在这里插入图片描述

end到这里我们就已经完成了所以配置;强调一下我的webpack的配置都是最新版的,都是自己配的,没有用脚手架,请慎重选择

转载请注明:SuperIT » 利用px2rem-loader和lib-flexible如何实现PC端大屏项目的全自动开发

喜欢 (0)or分享 (0)