vue px转rem怎么配置

　　介绍

本篇内容主要讲解“vue  px转rem怎么配置”,感兴趣的朋友不妨来看看。本文介绍的方法操作简单快捷,实用性强。下面就让小编来带大家学习“vue  px转rem怎么配置”吧!

方法一

一、配置与安装步骤:

1,在Vue项目的src文件夹下创建一个配置文件夹:

2,在配置文件夹中创建rem.js:

Vue px转rem怎么配置“> <br/> </p> <p> 3,将以下代码复制到rem.js中:</p> <pre类=//,基准大小 　　const  baseSize =32//,设置,rem 函数 　　function  setRem  (), {//才能,当前页面宽度相对于,750,宽的缩放比例,可根据自己需要修改。 　　const 才能;scale =document.documentElement.clientWidth /, 750//才能,设置页面根节点字体大小 　　document.documentElement.style.fontSize 才能=,(baseSize  *, Math.min(规模,,2)),+,& # 39;px # 39; 　　}//,初始化 　　setRem ()//,改变窗口大小时重新设置,快速眼动 　　时间=window.onresize  function  (), { 　　setRem才能() 　　}

4,在src文件夹下的主。js中引入:

import  & # 39;。/config/rem # 39;

5,在Vue项目根目录终端引入:

npm  install  postcss-pxtorem  - d

6,在Vue项目文件夹下的postcss.config。js中加入:

module.exports =, { 　　,,插件:{ 　　,,,autoprefixer:, {}, 　　,,,“postcss-pxtorem":, { 　　,,,,,“rootValue":, 16日 　　,,,,,“propList":, (“*”) 　　,,,} 　　,,} 　　}

方法二

第一步安装lib-flexible

npm 小姐:lib-flexible ——保存

第二步安装px2rem-loader

npm  install  px2rem-loader ——save-dev

第三步引入lib-flexible

import  & # 39; lib-flexible/灵活# 39;

第四步最重要的一步配置跑龙套文件

const  px2remLoader =, { 　　,,,装载机:,& # 39;px2rem-loader& # 39; 　　,,,选择:,{ 　　,,,,,remUnit: 37.5 　　,,,} 　　,,}& lt; br>//在generateLoaders方法中添加px2remLoader 　　1 　　const  loaders =, [cssLoader px2remLoader]

或者第四步:<代码>创建新的“vue.config。js文件如果没有vue.config。js代码> hello world/vue.config.js> module.exports =, { 　　,,,,chainWebpack:,(配置),=祝辞,{ 　　,,,,,,,config.module 　　,,,,,,,,.rule (& # 39; css # 39;) 　　,,,,,,,,test (/\ . css/美元) 　　,,,,,,,,.oneOf (& # 39; vue # 39;) 　　,,,,,,,,.resourceQuery (vue//\ ?) 　　,,,,,,,,.use (& # 39; px2rem& # 39;) 　　,,,,,,,,.loader (& # 39; px2rem-loader& # 39;) 　　,,,,,,,,.options ({ 　　,,,,,,,,,,,,remUnit:, 75,//, 75表示750的设计稿,表37.5示375的设计稿 　　,,,,,,,,}) 　　,,,,} 　　以前,}

1。按照px来编写都会转化成快速眼动的形式,但是有些地方我们不想转换,可以用下面两种方法。

在px后面添加/没有/不会转化px,会原样输出。一般边境需用这个
在px后面添加/px,会根据dpr的不同,生成三套代码。- - - - -一般字体需用这个

2使用过程中,发现某些进口外联样式不会被转化,注意避开这些坑。

& lt; https://www.yisu.com/zixun/style  src=" . ./资产/style.css '>/* px2rem能正常转换*/> /* px2rem不能正常转换*/@ import“. ./资产/style.css”;> /* px2rem不能正常转换*/@ import url(. ./资产/style.css '); 　　 　　

方法三

第一步安装amfe-flexible

npm 小姐:amfe-flexible  s

第二步安装postcss-pxtorem

npm  install  postcss-pxtorem ——save-dev

第三步引入amfe-flexible

import  & # 39; amfe-flexible& # 39;

第四步根目录下创建postcss.config。js文件

module.exports =, { 　　,,插件:{ 　　,,,& # 39;postcss-pxtorem& # 39;:, { 　　,,,,,rootValue:, 37.5, 　　,,,,,propList:, (& # 39; * & # 39;] 　　,,,} 　　,,} 　　}

到此,相信大家对“vue  px转rem怎么配置”有了更深的了解,不妨来实际操作一番吧!这里是网站,更多相关内容可以进入相关频道进行查询,关注我们,继续学习!

vue px转rem怎么配置