px2rem插件在vue中的使用方法

Step1:导入rem计算公式;

1. 创建:

在src目录下创建config文件夹并在目录下创建rem.js文件写入如下代码;

(function(){function a(){var b=document.documentElement.clientWidth;b=b>750?750:b;var c=b/750*100;document.getElementsByTagName("html")[0].style.fontSize=c+"px"}a();window.onresize=a})();
2. 引入:

在src\main.js中导入之前创建的js文件;

import './config/rem.js'

Step2:安装并设置px2rem插件;

1. 安装:
$ cnpm install px2rem-loader
2. 设置:

在项目中找到build\utils.js,定位至function generateLoaders在其上方定义如下:

var px2remLoader = {
    loader: 'px2rem-loader',
    options: {
      remUnit: 50 /* 此处50为可调整的值 */
    }
  }

  // 以上的添加的px2rem的定义
  // 在下方generateLoaders方法中添加[cssLoader,px2remLoader]

  // generate loader string to be used with extract text plugin
  function generateLoaders (loader, loaderOptions) {
    const loaders = options.usePostCSS ? [cssLoader, postcssLoader] : [cssLoader,px2remLoader] /* 此处为添加的定义 */

备注:remUnit: 50 /* 此处50为可调整的值 */此处50由设计稿尺寸决定(eg:当设计稿为375时,打开网页进入调试模式将网页宽度调整至与设计稿相同,得到的html的font-size即为需要设置的值)

<html style="font-size: 50px;">
1540711565379.png

Step3:使用px2rem插件;

1. 使用:

直接设置css样式使用px单位即可,如果不需要自动转换则在其后面加上/*no*/

<style scoped>
  .detail-page {
    width: 20px;
    height: 40px; /*no*/
  }
</style>
©著作权归作者所有,转载或内容合作请联系作者
【社区内容提示】社区部分内容疑似由AI辅助生成,浏览时请结合常识与多方信息审慎甄别。
平台声明:文章内容(如有图片或视频亦包括在内)由作者上传并发布,文章内容仅代表作者本人观点,简书系信息发布平台,仅提供信息存储服务。

相关阅读更多精彩内容

  • 第一部分 HTML&CSS整理答案 1. 什么是HTML5? 答:HTML5是最新的HTML标准。 注意:讲述HT...
    kismetajun阅读 28,817评论 1 45
  • 问答题47 /72 常见浏览器兼容性问题与解决方案? 参考答案 (1)浏览器兼容问题一:不同浏览器的标签默认的外补...
    _Yfling阅读 14,154评论 1 92
  • vue-cli 1. 新建vue-cli项目 命令 vue init webpack project-name u...
    ZoomFunc阅读 1,046评论 0 0
  • 我不甘平庸可又自卑得一塌糊涂,我懦弱得只敢躲在被窝里偷偷的哭,我以为没心没肺可以更洒脱,可后果只会更脆弱,甚至...
    祺叁阅读 321评论 0 0
  • 赌书泼墨相忆谁,寻常琐事上心头。 衰草连天望来路,已无烟云亦为晴。
    不想吃咸鱼的猫阅读 279评论 0 2

友情链接更多精彩内容