vue配置px转rem

最新推荐文章于 2023-09-26 10:57:52 发布
最新推荐文章于 2023-09-26 10:57:52 发布
阅读量134 收藏
点赞数
文章标签： javascript ViewUI
原文链接：http://www.cnblogs.com/miaSlady/p/9952642.html
版权

1.下载lib-flexible

npm i lib-flexible --save

2.在index.html中

<html data-dpr = '1'>
在common.css中写  
html {
font-size: 10vw;
}

3.设置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
}
}

 

同时，在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.重启，一切ok~

npm run dev

 

转载于:https://www.cnblogs.com/miaSlady/p/9952642.html

メイ
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
Vue项目自动转换 px 为 rem的实现方法
01-19
postcss-pxtorem：转换px为rem的插件。 自动设置根节点html的font-size 因为rem单位是相对于根节点的字体大小的，所以通过设置根节点的字体大小可以动态的改变rem的大小。 原理网上有很多文章分享，这里不具体解释。...
vue px自动转rem 架子
02-25
定义常用正则表达式和一些方法 集成了Element-ui和Echarts图表
px、rem、em的区别与联系
XinKun的博客
02-26 1万+
一、区别： 1. px是固定的像素，一旦设置了就无法因为适应页面大小而改变。 2. em和rem相对于px更具有灵活性，他们是相对长度单位，意思是长度不是定死了的，更适用于响应式布局。 3.em是相对于其父元素来设置字体大小的，一般都是以<body>的“font-size”为基准。这样就会存在一个问题，进行任何元素设置，都有可能需要知道他父元素的大小。而rem是相对于根元素<html>，这样就意味着，我们只需要在根元素确定一个参考值。 总之em相对于父元素，rem相对于根元素。 二、
CSS 中px、em、rem、%、vw、vh单位之间的区别详解【全网最全】
橙-极纪元-cplvfx-JJY.Cheng
06-22 8562
CSS 中px、em、rem、%、vw、vh单位之间的区别详解【全网最全】
px与rem和rpx的换算以及应用场景
ceike的博客
05-13 3400
px(pixel)和rem(root em)都是用于测量长度的单位,但是它们有不同的换算关系。px是绝对单位,1px = 1/96寸。在不同设备上,1px对应不同的物理尺寸,所以不适合用于响应式布局。rem是相对单位,它是相对于根元素<html>的字体大小来计算的。所以,如果html的font-size是16px,则1rem = 16px。如果html的font-size是20px,则1rem = 20px。
vue项目将px自动转成rem
weixin_52379691的博客
09-22 911
/ 页面宽度 1920 的缩放比例。// 改变窗口大小时重新设置 rem。// 将代码放在 rem.js 中。// 设置页面根节点字体大小。// 设置 rem 函数。
Vue 项目中，可以使用 postcss-pxtorem 插件将 px 单位自动转换为 rem 单位
weixin_61662162的博客
05-01 1941
这样配置后，项目中的 CSS 文件中的 px 单位就会自动转换为 rem 单位。例如，如果 rootValue 设置为 16，则 1px 会转换为 0.0625rem。在 Vue 项目中，可以使用 postcss-pxtorem 插件将 px 单位自动转换为 rem 单位。
详解vue2.0 不同屏幕适配及px与rem转换问题
08-27
主要介绍了详解vue2.0 不同屏幕适配及px与rem转换问题，小编觉得挺不错的，现在分享给大家，也给大家做个参考。一起跟随小编过来看看吧
Vue项目自动转换px为rem-高保真还原设计图
最新发布
JackieDYH的博客
09-26 923
前端开发中还原设计图的重要性毋庸置疑，目前来说应用最多的应该也还是使用rem。然而很多人依然还是处于刀耕火种的时代，要么自己去计算rem值，要么依靠编辑器安装插件转换。 而本文的目标就是通过一系列的配置后，在开发中可以直接使用设计图的尺寸开发，项目为我们自动编译，转换成rem。 技术栈 vue-cli：使用脚手架工具创建项目。 postcss-pxtorem：转换px为rem的插件。 ------------------------------------------- 自动设置根节点html的f
详解web前端长度单位（px、em、rem、%、vw/vh、vmin/vmax、vm、calc()）
我都博客
08-17 7153
在前端开发中，会遇到各种不同类型的长度单位，比如px,em,rem等。 而整体的长度单位分为两大类： 绝对长度单位包括：in,cm, mm, q, pt, pc, px 相对长度单位包括：em, rem, %, vw, vh, vmax, vmin, vm, ch, ex
1rem等于多少px (rem和px怎样转换)
热门推荐
会点php的前端小渣渣
06-17 6万+
1rem等于html根元素设定的font-size的px值 如果css里面没有设定html的font-size，则默认浏览器以1rem=16px来换算。 假如我们在css里面设定下面的css html{font-size:14px} 那么后面的CSS里面的rem值则是以这个14来换算。 例如设定一个div宽度为3rem,高度为2.5rem. 则它换算成px为width:42px.height:35px 同理，假如一个设计稿为宽度42px,高度为35px 则换成rem，则是4...
前端怎么把px单位换成rem单位解决项目页面适配问题
qq_920189602的博客
10-20 1万+
使用案例简单明了说明怎么把px单位换成rem单位，达到适配使网页自适应，简要说明rpx、px、rem、em的区别
vue中将px单位转成rem
zxo_apple的博客
08-06 1823
1.首先安装需要用到的包 npm install px2rem px2rem-loader lib-flexible -S 2.编辑build/utils.js 如图位置增加代码 如果将remUnit设置为100，相对于750的设计稿那么总宽度就是( 750 / 100 ) = 7.5rem这里根据实际设计稿宽度定 3.在main.js中引入包 import 'lib-flexible/flexible' 4.重启项目，此时可以看到px转化后的rem ...
面试官：说一下 px、em、rem、vw/vh？em和rem的区别？
upgrade_bro的博客
09-02 812
面试官：说一下 px、em、rem、vw/vh？em和rem的区别？rem是一个相对长度单位，相对于根元素，常用于响应式布局；em也是一个相对长度单位，相对于父元素
rem 与 px 换算关系
杏子
05-05 2万+
一、前言 响应式开发是现在前端潮流的开发方式，说到移动端的响应式开发，不得不说到一个单位 rem，那么 rem 单位是什么，有什么好处，与 px 单位有什么关系？ 二、rem 概念 rem 是所有 DOM 节点对于根节点 html 的相对值。 三、rem 特点与换算 1. 浏览器默认的字号是16px，因此如果没有设置根节点 html 的字号，这将会是一个默认基数。 2. rem 与 p...
Vue移动端适配 --- px自动转rem
m0_57517738的博客
08-05 410
"propList"：需要做转化处理的属性，如'height'、'width'、'margin'等，'*'标识全部。"rootValue"：设计稿宽度的1/10，根据设计稿宽度进行设置，设计稿宽度750px时写75。测量多少px写多少px，无需自己计算rem单位，会自动转换。
vue2（vue3）屏幕自适应放大缩小 px转换rem
Lb_jay的博客
08-09 2833
vue实现屏幕自适应放大缩小 简单方便 快捷
Vue移动端项目中px转rem的两种方法
m0_55832273的博客
12-15 6998
1）使用lib-flexible动态设置REM基准值(html标签的字体大小) 安装依赖 yarn add amfe-flexible // 或者 nmp i amfe-flexible 然后在main.js中引入加载执行该模块 import 'amfe-flexible' 最后测试：在浏览器中切换不同设备尺寸，观察html标签font-size的变化。 2）使用postcss-pxtorem将px转为rem。 安装依赖 yarn add postcss-pxtorem -D // 或者
vue项目将px转为rem实践
yaorui_123456的博客
07-09 2907
px转rem好处 px转rem就是将你项目中的元素大小通过缩放的形式，适配于移动端/PC端的一种方式。该布局主要需要考虑到页面的布局方式，由于页面将被缩放，分辨率的问题就不存在了。将所有的可视区域都能被运用到开发视野，不用考虑入1200px所谓的安全区域。 文章目录px转rem好处前言一、创建rem.js二、下载postcss-pxtorem插件1.下载插件2.使用插件三、特别注意总结 前言 提示：本文主要实践的是vue2项目下使用 一、创建rem.js 1.此处你需要添加一个名为rem.js的文件，将
vuecli3 如何配置 px2rem-loader
05-27
要在 Vue CLI 3 中使用 `px2rem-loader`，可以按照以下步骤进行配置： 1. 安装 `px2rem-loader` 和 `postcss-loader`： ``` npm install px2rem-loader postcss-loader --save-dev ``` 2. 在项目根目录下创建...

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值