vue中px自动转为rem的解决方法

最新推荐文章于 2024-08-14 09:30:00 发布
最新推荐文章于 2024-08-14 09:30:00 发布
阅读量1.6k 收藏
点赞数 1
分类专栏： 开发问题 js
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/zepcjsj0801/article/details/117740884
版权

vue项目中页面中px会自动转为rem，

但是在van-swiper 这种插件中，如果要设置每个轮播项宽度不是全屏，这种情况下肯定不能兼容全部尺寸的设备，因为半屏的轮播需要给轮播一个宽度，但是这个宽度不会像css中的尺寸一样自动转为rem

这就导致实际尺寸超出每项的设置尺寸，解决方法很简单，把css中的单位px设置成Px就可以了，页面就不会自动转换为rem了

zepcjsj0801
关注
专栏目录
vue3.0打包把px转换rem
aGreetSmile的博客
12-13 1035
一、amfe-flexible 1.首先把安装amfe-flexible，这里使用npm install nnpm i amfe-flexible -S 2.在项目入口文件main.js 中引入amfe-flexible import 'amfe-flexible' 3.在根目录的index.html 的头部加入手机端适配的meta代码 <meta name="v...
vue2 px转rem的方法 用脚手架搭建的vue
weixin_68232047的博客
04-20 390
如何解决px转rem,不是用webpack创建的vue 是直接用vue create 文件名,创建出来的,没有webpack.config.js的情况下
Vue.js打包运行，阻止px转换成rem
最新发布
北京-giser的博客
08-14 123
Vue.js打包运行，阻止px转换成rem
如何在h5的vant中 让其不自动转换px为rem
weixin_45121510的博客
04-09 1082
找到postcss.config文件 设置一个文件夹，专门放这部分不让其转换的页面 只return 这个plugins 其次：在文件夹的vue文件中， 需要设置媒体查询，因为一般移动端都设置了最大宽度。所以我们需要让他在大于760px（根据实际）时，干掉这个属性。 而且还得给页面设置最小宽度。 ...
vue 某一行css px不自动转rem
ZZZMY8的博客
02-20 727
单独设置某一行代码单位不进行 px和rem转换。
vue项目 px自动转rem
q4717529的博客
04-24 1749
把以下代码粘贴到package.json的dependencies里面 "amfe-flexible": "^2.2.1", "postcss-pxtorem": "^5.1.1", 然后重新安装一下依赖包 npm i 或者cnpm i 然后在根目录下创建一个postcs.config.js文件 把以下代码粘贴到postcs.config.js文件中 module.exports = { "plugins": { 'postcss-pxtorem': { .
vue将网页中的px自动编译成rem
qq_54646196的博客
11-19 474
/ postcss.config.js 文件 //没有就创建一个。remUnit: 16, // 配置1rem = 16px。// 当前页面宽度相对于 750 宽的缩放比例，可根据自己需要修改。然后再新建一个.js文件初始化页面配置。// 改变窗口大小时重新设置 rem。// 设置页面根节点字体大小。然后在main.js 引用。安装好了之后新建一个文件。// 设置 rem 函数。
px2rem中设置px不转换成rem
weixin_43837268的博客
03-13 6251
4、在代码中使用 #box { height: 44px //用postcss-px2rem插件配置后相当于0.44rem width: 100% font-size: 24px;/*no*/ //如果不想用插件转换可以用/*no*/标识符 } ...
vue项目中将px转为rem
chaitong2204的博客
10-15 693
之前在写项目的时候，封装了一个css,用来将px转rem,后来发现这样写还不是很友好，那么有没有一种方法是将我写的px项目运行后自动转为rem的呢，答案肯定是当然有了。 1.设置根节点的font-size // 基准大小 const baseSize = 32 // 设置 rem 函数 function setRem() { // 当前页面宽度相对于 750 宽的缩放比例，可根据自己需要...
webpack配置px自动转为rem
wushen的博客
08-28 674
安装amfe-flexible（用于设置 rem 基准值） yarn add amfe-flexible or npm i -S amfe-flexible 使用amfe-flexible // src/main.js 中引入 amfe-flexible import 'amfe-flexible' 安装 postcss-pxtorem（postcss-pxtorem是一款 postcss 插件，用于将单位转化为 rem） 注意 版本太高会报错，需要安装指定版本 npm install postc
Vue移动端项目中px转rem的两种方法
m0_55832273的博客
12-15 7234
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
hhxlin的博客
04-11 790
在做毕设的时候，由于我做的是移动端项目，所以突然想起，好像用px不太对，因为手机屏幕不一样的话，布局也会不一样，所以我突然想把px都改成rem，做个自适应。 在各位大神的帮助下，得出的解决方法如下： 使用 lib-flexible 和 px2rem-loader 自动转换 1、安装插件 npm install lib-flexible --save npm install px2rem-loa...
vue3.0+vite 使用 postcss-pxtorem 实现移动自适应（px转rem）
热门推荐
CSDN for recording problems
02-23 1万+
下载 postcss-pxtorem npm i postcss-pxtorem -D 与package.json同级目录创建postcss.config.js文件 module.exports = { plugins: { autoprefixer: { overrideBrowserslist: [ "Android 4.1", "iOS 7.1", .
vue项目将所有px单位在浏览器显示时是rem
m0_58017645的博客
07-22 394
效果： 步骤： 1.安装 npm i postcss-pxtorem@5.1.1 2 2.保存postcss.config.js文件 postcss.config.js内容： module.exports = { plugins: { autoprefixer: { browsers: ['Android >= 4.0', 'iOS >= 7'] }, 'postcss-pxtorem': { ...
vue3+vite项目自动转换 px 为 rem
qq_34630087的博客
06-13 750
1、创建应用，安装依赖，注意去掉中 type 配置npm i2、根目录创建文件3、main.js同目录 创建rem.js文件，并在main.js引入4、启动，在控制台可以看到 根节点有font-size，并且 px 已经被自动转为 rem了。
vue3项目将px转为rem
qq_24258617的博客
07-26 2447
vue3项目将px转为rem（学习笔记）
vue3下，全局px转rem
Y1436314328的博客
06-26 380
vue3环境下全局自动px转rem
vue3 + vite px转rem
伍六七
06-05 610
h5 px自动转换rem 适配 自适应
vue中使用px2rem-loader
05-31
在Vue中使用px2rem-loader，需要先安装相关依赖： ``` npm install postcss-loader postcss-px2rem --save-dev ``` 然后在webpack配置文件中添加相关配置： ```javascript module: { rules: [ { test: /\.css$/, use: [ 'vue-style-loader', 'css-loader', { loader: 'postcss-loader', options: { plugins: [ require('postcss-px2rem')({ remUnit: 75 // 设计稿宽度/10 }) ] } } ] } ] } ``` 这里的remUnit的值需要根据设计稿的宽度来设置。如果设计稿宽度是750px，则remUnit需要设置为75，如果是640px，则remUnit需要设置为64。这样就可以在Vue中使用px2rem-loader了。
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值