vue做移动端适配,借助px2rem 插件方便的将px单位转为了rem

1、安装

  npm install px2rem-loader  lib-flexible --save

2、在项目入口文件main.js中引入lib-flexible

  import 'lib-flexible/flexible.js'

3、在build下的 utils.js中,找到generateLoaders 方法,在这里添加

  const px2remLoader = {
    loader: 'px2rem-loader',
    options: {
      remUnit: 37.5
    }
  }

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

        })
      })
    }

  }

  重启项目,会发现自己设置的px被转为rem 了

  以上实现转换适用于: 

  (1)组件中编写的<style></style>下的css

  (2)从index.js或者main.js中import ‘../../static/css/reset.css’引入css

  (3)在组件的<script type=”text/ecmascript-6″> import ‘../../static/css/reset.css'</script>中引入css

  另外的情况不适用:

  (1)组件<style></style>中@import “../../static/css/reset.css (可考虑上面(2)、(3)的形式引入)

  (2)外部样式:<link rel=”stylesheet” href=”static/css/reset.css”>

  (3)元素内部样式:style=”height: 417px; width: 550px;”

px2rem的更多相关文章

  1. 在线工具、setHtmlRem、px2rem

    http://tool.lu/c/developer  开发类在线工具 https://github.com/leon776/setHtmlRem   setHtmlRem https://githu ...

  2. 三种预处理器px2rem

    CSS单位rem 在W3C规范中是这样描述rem的: font size of the root element. 移动端越来越多人使用rem,推荐淘宝开源框架lib-flexible 今天来介绍一下 ...

  3. vue安装element-ui和px2rem的细节

    1.按需引入element-ui vue脚手架搭建完成之后,可以到element-ui官网进行npm 安装: npm i element-ui -S 如果是完整引入可以按照官网一步一步做即可完成:这里 ...

  4. 移动端最强适配(rem适配之px2rem)&& 移动端结合Vuex实现简单loading加载效果

    一.rem之px2rem适配 前言:相信许多小伙伴上手移动端时面对各式各样的适配方案,挑选出一个自己觉得简便.实用.高效的适配方案是件很纠结的事情. 深有体会... 经过多个移动端项目从最初的 vie ...

  5. react +webpack 配置px2rem

    项目背景需要适配ipad 以及手机端,这时候当然要告别刀耕火种时代啦(自己算rem),因为已经有成熟的工具啦,即px2rem(https://www.npmjs.com/package/px2rem) ...

  6. vue-cli中配置屏幕自适应(px2rem)

    在vue-cli中配置屏幕自适应的方法 首先,我们需要安装flexible库. npm i lib-flexible --save 在index.html文件当中配置meta标签, <meta ...

  7. 当react 项目使用px2rem

    参考资料:http://easywork.xin/2018/09/02/react-2/ 我拿到的设计图 是  375px //配置px2rem px2rem({remUnit: 37.5})   在 ...

  8. vue 使用lib-flexable,px2rem 进行移动端适配 但是引入的第三方UI组件 vux 的样式缩小,解决方案

    最近在写移动端项目,就想用lib-flexable,px2rem来进行适配,把px转换成rem但是也用到了第三方UI组件库vux,把这个引入发现一个问题就是vux的组件都缩小了,在网上找不到答案,最后 ...

  9. vue-cli3.0结合lib-flexible、px2rem实现移动端适配,完美解决第三方ui库样式变小问题

    公司最近做的一个移动端项目从搭框架到前端开发由我独立完成,以前做移动端适配用的媒体查询,这次想用点别的适配方案,然后就采用了vue-cli3.0结合lib-flexible.px2rem实现移动端适配 ...

随机推荐

  1. EF分别使用IQueryable和IEnumerable实现更新和删除

    缺点 使用IQueryable无法跟踪,无法监控sql,无法使用SaveChanges(). 优点 使用IQueryable简单粗暴. class Program { static void Main ...

  2. [转] HTML5 Blob与ArrayBuffer、TypeArray和字符串String之间转换

    1.将String字符串转换成Blob对象 //将字符串 转换成 Blob 对象 var blob = new Blob(["Hello World!"], { type: 'te ...

  3. POJ 1364 / HDU 3666 【差分约束-SPFA】

    POJ 1364 题解:最短路式子:d[v]<=d[u]+w 式子1:sum[a+b+1]−sum[a]>c      —      sum[a]<=sum[a+b+1]−c−1  ...

  4. jQuery中ajax如何返回值到上层函数里?

    这个涉及到js的异步执行了,程序本身是同步执行的,到了getJSON这里的时候,这个函数是异步的,而 load_val这个函数是同步的,你需要这样来异步返回这个值 function load_val( ...

  5. [转]编程珠玑第五章二分搜索(折半查找)之java实现

    http://blog.csdn.net/hwe_xc/article/details/51813080 二分搜索又称为折半查找,用来高效快速的解决如下问题: 我们需要确定排序后的数组x[0..n-1 ...

  6. Centos7创建CA和申请证书

    转载:http://rackie386.blog.51cto.com/11279229/1947999 Centos7.3创建CA和申请证书 openssl 的配置文件:/etc/pki/tls/op ...

  7. js网页下载csv格式的表格

    <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8&quo ...

  8. 04. Pandas 3| 数值计算与统计、合并连接去重分组透视表文件读取

    1.数值计算和统计基础 常用数学.统计方法 数值计算和统计基础 基本参数:axis.skipna df.mean(axis=1,skipna=False)  -->> axis=1是按行来 ...

  9. JavaSE| 面向对象的三大特征

    1.面向对象的基本特征之一:封装Encapsulation 目的:隐藏实现细节,让使用者方便,让代码更安全 将对象的属性和行为封装起来,其载体就是类.类通常对客户隐藏其实现细节,这就是封装的思想. 封 ...

  10. Number String(DP)

    题目: 题意: 给你一个字符串s,s[i] = 'D'表示排列中a[i] > a[i+1],s[i] = 'I'表示排列中a[i] < a[i+1]. 比如排列 {3, 1, 2, 7, ...