转载:https://www.cnblogs.com/WQLong/p/7798822.html

1.下载lib-flexible

使用的是vue-cli+webpack,通过npm来安装的

npm i lib-flexible --save

2.引入lib-flexible

在main.js中引入lib-flexible

import 'lib-flexible/flexible'

3.设置meta标签

通过meta标签,设置设备宽度以及缩放比例

<meta name="viewport" content="width=device-width, initial-scale=1.0">

4.安装px2rem-loader

npm install px2rem-loader

5.配置px2rem-loader

这里是重要的一步~~

在build文件中找到util.js,将px2rem-loader添加到cssLoaders中,如:

 
const cssLoader = {
loader: 'css-loader',
options: {
minimize: process.env.NODE_ENV === 'production',
sourceMap: options.sourceMap
}
}
const px2remLoader = {
loader: 'px2rem-loader',
options: {
remUnit: 75 // 这里设置html根字体,vant-UI的官方根字体大小是37.5
}
}
 

同时,在generateLoaders方法中添加px2remLoader

 

function generateLoaders (loader, loaderOptions) {
  const loaders = options.usePostCSS ? [cssLoader, postcssLoader, 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,
  fallback: 'vue-style-loader'
  })
  } else {
  return ['vue-style-loader'].concat(loaders)
  }
}

 

6.重启,一切ok~

当配置完之后,只需要重启下服务,就自动转化为rem了

npm run dev

Vue:将px转化为rem,适配移动端vant-UI等框架(px2rem-loader)的更多相关文章

  1. Vue将px转化为rem适配移动端

    Vue将px转化为rem适配移动端 1.下载lib-flexible我使用的是vue-cli+webpack,所以是通过npm来安装的npm i lib-flexible --save 2.引入lib ...

  2. 60.Vue:将px转化为rem,适配移动端

    1.下载lib-flexible 我使用的是vue-cli+webpack,所以是通过npm来安装的 npm i lib-flexible --save 2.引入lib-flexible 在main. ...

  3. px2rem-loader(Vue:将px转化为rem,适配移动端)

    转载:https://www.cnblogs.com/WQLong/p/7798822.html 1.下载lib-flexible 使用的是vue-cli+webpack,通过npm来安装的 npm ...

  4. 本周汇总 动态rem适配移动端/块状元素居中/透明度

    1.动态rem适配移动端 !function(){ var width = document.documentElement.clientWidth; var head=document.getEle ...

  5. Vue使用lib-flexible,将px转化为rem

    1.下载lib-flexible 我使用的是vue-cli+webpack,所以是通过npm来安装的 npm i lib-flexible --save 2.引入lib-flexible 在main. ...

  6. rem适配移动端

    一.屏幕宽度 / 设计稿宽度 *100 来设置根元素的 font-size   10px = 0.10rem (function (doc, win) { var docEl = doc.docume ...

  7. 用rem适配移动端

    常见方式: 1. 固定宽度(320)做法:这样前端倒是爽了,可是大页面两边有留白,小页面图标文字又会缩的很小,用户体验极其不好. 2. 流式布局:其实就是用%,这样宽度倒还差不多,高度怎么搞?所以这种 ...

  8. vue换算单位px自动转换rem

    cnpm i postcss-px2rem --save cnpm install px2rem-loader --save 2.配置px2rem build目录下vue-loader.conf.js ...

  9. 移动端Vant组件库REM适配

    REM适配 基础配置 在页面布局之前,对REM进行配置,以适配移动端特点. 官方参考 Vant文档---->快速上手---->进阶用法---->Rem适配----> Vant ...

随机推荐

  1. java读取配置文件的信息

    1. 首先,工程结构如下: 注:a. 蓝色标注的两个文件是和com包平级的,都在src下.EnnNotificationPushProxy.ini是这个工程的配置文件,log4j.properties ...

  2. 获取APP和设备相关信息

    APP NAME: [[[NSBundle mainBundle] infoDictionary] objectForKey:@"CFBundleDisplayName"] APP ...

  3. 弱网测试之基于TP-LINK

    使用路由器做弱网测试应该是最真实的,网络工程师/运维工程师体会应该最深刻.这种方式测试成本也不高,比较推荐. 设置的方式不在赘述,参见使用手册,高级设置即可. 结束语: 这样测试的时候,测试机器连接该 ...

  4. cxGrid常用属性设置

    OptionsView部分 是否使用表头分组:cxGrid1DBTableView1.OptionsView.GroupByBox 单元格高度自适应:cxGrid1DBTableView1.Optio ...

  5. grub启动流程和配置

    grub stage  1 MBR中前 446个字节,如果把这里面的内容损坏,那么系统会认为当前磁盘没有启动引导功能,会尝试从光盘或者网络启动系统 grub  stage  1.5 存放识别/boot ...

  6. 算法面经之讯飞+CVTE

    一.科大讯飞(合肥) 概况:刚经历了科大讯飞的初面,大概35分钟左右,问的内容比较笼统,主要针对简历上的内容来,面试官比较亲切,回忆了一下面试内容. 建议:把简历上的内容整吧清楚,不知道的别瞎写,写了 ...

  7. vue中使用lodash

    1.安装:npm i --save lodash 2.引入:import _from 'lodash' 3.使用: <template> <div class="templ ...

  8. LaTeX使用学习

    LaTeX是什么? 文档结构 标点符号 行内公式$\oint\sqrt{a}$ 行间公式 \begin{equation}\label{a}\oint\sqrt{a}\end{equation}

  9. 定义结构体和table type

    1: 在se11 中创建结构体 2: 定义一个内表, row type 使用structure类型,将会具有structure的字段. 3:在代码中 使用 结构体和table  type *& ...

  10. 1A

    #include <iostream> using namespace std; int main() { long long n, m, a, r, c; cin>>n> ...