Vue移动端项目中px转rem的两种方法

最新推荐文章于 2024-06-13 09:59:11 发布
最新推荐文章于 2024-06-13 09:59:11 发布
阅读量7.1k 收藏 29
点赞数 5
文章标签： vue.js 前端 javascript
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/m0_55832273/article/details/121961078
版权

1）使用lib-flexible动态设置REM基准值(html标签的字体大小)

安装依赖
	yarn add amfe-flexible
	// 或者
	npm i amfe-flexible
然后在main.js中引入加载执行该模块
	import 'amfe-flexible'
最后测试：在浏览器中切换不同设备尺寸，观察html标签font-size的变化。成功后，以后的单位直接写px即可。

在这里插入图片描述

2）使用postcss-pxtorem将px转为rem。

安装依赖
	yarn add postcss-pxtorem -D
	// 或者
	npm i postcss-pxtorem -D
最低0.47元/天 解锁文章
Mr._Dang
关注
  • 5
    点赞
  • 踩
  • 29
    收藏
    觉得还不错? 一键收藏
  • 5
    评论
Vue项目自动转换 px 为 rem
hammer1010的博客
05-21 2011
Vue项目自动转换 px 为 rem 前提条件 1.脚手架vue-cli 搭建好 2.vue项目可以正常运行 1、创建rem.js文件 创建一个utils文件，添加一个rem.js文件 // 基准大小 const baseSize = 32 // 设置 rem 函数 function setRem () { // 当前页面宽度相对于 750 宽的缩放比例，可根据自己需要修改。 const...
vue项目将px自动转成rem
weixin_52379691的博客
09-22 926
/ 页面宽度 1920 的缩放比例。// 改变窗口大小时重新设置 rem。// 将代码放在 rem.js 中。// 设置页面根节点字体大小。// 设置 rem 函数。
vue3+vite项目自动转换 px 为 rem
最新发布
qq_34630087的博客
06-13 435
1、创建应用，安装依赖，注意去掉中 type 配置npm i2、根目录创建文件3、main.js同目录 创建rem.js文件，并在main.js引入4、启动，在控制台可以看到 根节点有font-size，并且 px 已经被自动转为 rem了。
Vue项目自动转换px为rem-高保真还原设计图
JackieDYH的博客
09-26 969
前端开发中还原设计图的重要性毋庸置疑，目前来说应用最多的应该也还是使用rem。然而很多人依然还是处于刀耕火种的时代，要么自己去计算rem值，要么依靠编辑器安装插件转换。 而本文的目标就是通过一系列的配置后，在开发中可以直接使用设计图的尺寸开发，项目为我们自动编译，转换成rem。 技术栈 vue-cli：使用脚手架工具创建项目。 postcss-pxtorem：转换px为rem的插件。 ------------------------------------------- 自动设置根节点html的f
Vue中使px自动转rem配置 (h5适配问题)
lipenghao111的博客
01-20 1467
PostCSS。
vue项目将px转为rem实践
yaorui_123456的博客
07-09 2975
px转rem好处 px转rem就是将你项目中的元素大小通过缩放的形式，适配于移动端/PC端的一种方式。该布局主要需要考虑到页面的布局方式，由于页面将被缩放，分辨率的问题就不存在了。将所有的可视区域都能被运用到开发视野，不用考虑入1200px所谓的安全区域。 文章目录px转rem好处前言一、创建rem.js二、下载postcss-pxtorem插件1.下载插件2.使用插件三、特别注意总结 前言 提示：本文主要实践的是vue2项目下使用 一、创建rem.js 1.此处你需要添加一个名为rem.js的文件，将
px转换rem方式
热门推荐
weixin_43802583的博客
11-30 1万+
px转换rem方式： 一、定义scss函数进行转换 @function px2rem($px) { @return px/px/px/design-width*10+rem; //对应js } 调用此函数就可转换px 二、使用vscode插件 css rem px to rem 三、口算 ...
Vue CLI3移动端适配(px2rem或postcss-plugin-px2rem)
11-21
本文将详细介绍如何使用Vue CLI3进行移动端适配，主要涉及两种方法：`lib-flexible` 和 `postcss-plugin-px2rem`。 首先，确保你的项目是基于Vue CLI3或更高版本。移动端适配的主要目标是解决不同设备屏幕尺寸下的...
vue2移动端响应式模板
02-21
这个模板基于Vue2，利用了lib-flexible和postcss-plugin-px2rem这两个关键工具，实现像素单位（px）到相对单位（rem）的自动化转换，从而达到页面元素在不同分辨率屏幕上的自适应布局。 lib-flexible是阿里巴巴团队...
vue 移动端适配方案详解
11-29
本文将详细讲解两种常见的 Vue 移动端适配策略：使用 `rem` 布局和 `lib-flexible` 插件。 ### 一、rem 布局 `rem`（root em）单位是一种基于根元素（通常是 `<html>` 元素）字体大小的相对单位。通过动态调整根...
详解vue中移动端自适应方案
10-17
本文将详细解析两种常见的Vue移动端自适应方案，并提供实践中的具体步骤。 **方案一：自定义动态调整`font-size`的JS** 这种方案中，开发者可以编写一个名为`htRem`的JavaScript函数，该函数根据设备屏幕宽度动态...
Vue自动px单位自动转换rem
轻风细雨_林木木
10-21 3613
一、引入lib-flexible 安装lib-flexible npm install lib-flexible --save main.js文件中引入lib-flexible import 'lib-flexible' lib-flexible来解决移动端适配。 lib-flexible会自动在html的head中添加一个meta name="viewport"的标签，同时会自动设置html的font-size为屏幕宽度除以10，也就是1rem等于html根节点的font-size。假如设计稿的宽度是
vue px转rem
xiazzww的博客
06-01 128
一,index.html中引入以下代码段 (function flexible (window, document) { var docEl = document.documentElement var dpr = window.devicePixelRatio || 1 // adjust body font size function setBodyFontSize () { if (document.body) { document.body.style.fo
Vue2创建移动端项目适配rem
grz1111的博客
03-27 251
当我们在用vue搭建移动端项目的时候，如果继续使用px作为css的尺寸单位，则会出现不同的移动端设备显示的样式不同的问题，有时候还会影响到用户的功能使用和体验感。安装此文件后则会自动将px转化为rem单位！
使用postcss-pxtorem插件实现px转换rem
qq_42750608的博客
09-21 2955
使用postcss-pxtorem插件实现px转换rem
Vue移动端适配 flexible&px2rem
weixin_46759393的博客
05-07 210
安装插件 npm install postcss postcss-px2rem lib-flexible --save main.js 引入 lib-flexible import 'lib-flexible'; 创建postcss.config.js module.exports = { plugins: [ require('autoprefixer'), //自动添加前缀 require('postcss-px2rem')( //px转re.
vue移动端自适应布局
weixin_49813550的博客
11-13 2201
vue移动端适配
vue-cli3.0项目将px转换成rem，已适配移动端页面，超好使！最后的步骤才是最重要的！
summer_my_sunshine的博客
05-25 985
1.安装插件postcss-plugin-px2rem； npm i postcss-plugin-px2rem --save -dev 2.在vue.config.js中配置。这里需要说明一点，网上搜的一堆教程都强调应该增加remUnit来设置rem的计算标准。但是其实在新版后，这个值换成了rootValue这个。例如你设计稿为750的宽度标准，那么这里的值设置为75则可。 module.exports = { //px转rem的配置（postcss-plugin-px2r.
vue3创建移动端项目使用rem
10-12
要在Vue3中创建移动端项目并使用rem，可以按照以下步骤进行： 1. 安装postcss-pxtorem插件：在项目根目录下执行命令 npm install postcss-pxtorem --save-dev 2. 在项目根目录下创建postcss.config.js文件，并添加...

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

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

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值