vue-cli配置移动端自适应,将px转化为rem

2人阅读 评论(0) 收藏 举报
分类:

1、通过npm 下载 lib-flexible

npm install lib-flexible  --save

2、在main.js中引入lib-flexible

import 'lib-flexible/flexible.js'

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

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

4、安装px2rem-loader

npm install px2rem-loader

5、配置px2rem-loader

在bulid中找到文件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
    }
  }

接着在这个文件中,在在generateLoaders方法中添加px2remLoader,

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

6、重启,运行项目,

npm run dev

在组件中写单位直接写px  然后在浏览器中的检查就可以看到的单位是rem


查看评论

REM自适应JS(px自动转化为rem)

前文介绍了rem,在这里介绍两种实际使用rem的例子; flexible.js可伸缩布局使用 原文出处:前端开发博客 (http://caibaojian.com/simple-flexible....
  • alleged
  • alleged
  • 2018-01-11 11:07:58
  • 531

Vue项目自动转换 px 为 rem,高保真还原设计图

前端开发中还原设计图的重要性毋庸置疑,目前来说应用最多的应该也还是使用rem。然而很多人依然还是处于刀耕火种的时代,要么自己去计算rem值,要么依靠编辑器安装插件转换。 而本文的目标就是通过一系列的...
  • sinat_17775997
  • sinat_17775997
  • 2018-02-01 16:53:08
  • 377

vue-cli使用px2rem

1、cnpm install postcss-px2rem --save-dev 2、webpack.base.conf.js增加: var webpack = require('webpac...
  • u010214074
  • u010214074
  • 2017-11-08 16:00:12
  • 838

px rem 转换的几种方法(分辨率字体调整)

目前(2016-06-19)px转rem 的工具已经不少了。下面介绍几个转换的方案。 转换方式1: 使用 在线-px转rem  在线 px 转换 rem 工具地址:http://520ued.com...
  • qq_16559905
  • qq_16559905
  • 2016-06-19 15:43:26
  • 5918

Sass/Scss基础——rem与px的自动转换

Sass/Scss中rem的使用 在CSS中,实现px和rem转换非常简单,但每次使用都需进行计算。虽然在html中设置font-size:62.5%即16px*62.5%=10px;会给大家带来...
  • ITYang_
  • ITYang_
  • 2017-03-18 21:06:05
  • 5700

vue中px转换成rem的设置

1.npm install px2rem --save-dev2.在utils.js中加入    const px2remLoader = { loader: 'px2rem-loader',...
  • CoolLiye
  • CoolLiye
  • 2018-02-24 18:05:51
  • 313

自使用移动端rem适配--并且vscode-px自动转化成rem

1.在head标签中插入这个代码,表示根据屏幕宽度换算字体大小,刚开始设置根元素html的大小是20px title>健康记录title> script> window.onload=w...
  • zhalcie2011
  • zhalcie2011
  • 2017-05-19 01:59:26
  • 4782

移动端web页面自适应和rem

自适应,rem,移动端,web前端
  • ling369523246
  • ling369523246
  • 2015-10-01 15:52:55
  • 11863

移动端自适应布局----rem字体

一.px,em,rem之间联系与区别 px:像素是相对于显示器屏幕分辨率而言的相对长度单位,不会受屏幕宽度改变 em:继承父级的font-size,与父级的字体大小有关 rem:是em的升级版,rem...
  • bingyuewheel
  • bingyuewheel
  • 2016-11-23 21:15:43
  • 2914

CSS中那些px、em、pt、rem、%、dp(android)单位

未经允许,不得转载!! 水平有限,写的不周之处欢迎指正、交流! 在前端开发中,遇到单位的时候会有几种选择,那到底用哪种单位才是最合适的呢? 在国内的一些美工设计大师,在设计的时候多偏向于px单位,...
  • ime33
  • ime33
  • 2017-01-14 10:28:17
  • 4023
    个人资料
    持之以恒
    等级:
    访问量: 3483
    积分: 591
    排名: 8万+
    最新评论