Vue项目里rem的使用

最新推荐文章于 2024-02-08 08:57:49 发布
最新推荐文章于 2024-02-08 08:57:49 发布
阅读量550 收藏 7
点赞数 7
分类专栏： vue2实战记录 JS实战记录 文章标签： vue.js javascript 前端 vue
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/qq_37635012/article/details/135135419
版权

先在src下的libs文件夹下新建一个js文件，取名为rem.js，封装一个换算方法：

// 此处的16跟上面的16对应，同样是倍数
const baseSize = 16
// 设置根节点的font-size大小函数
function setRem () {
   
    // 375为设计稿页面宽度，如为750，把375改为750
    const scale = document.documentElement.clientWidth / 1920
    // 设置页面根节点字体
了解本专栏 订阅专栏 解锁全文 超级会员免费看
百思不得小李
关注
  • 7
    点赞
  • 踩
  • 7
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
订阅专栏
移动端vue使用的rem配置函数
07-18
移动端使用的rem配置函数，配置简单，使用时只修改一个参数即可
vue中使用rem布局代码详解
12-13
1、npm i amfe-flexible 2、import ‘amfe-flexible...在vue项目中使用rem布局简易教程 rem布局由于其根据屏幕宽度的改变修改相应的rem与px的转换比例，这样非常适合移动端的项目。 在不同的分辨率下，都会有较好的显示
VUE中Rem 适配解决方案
weixin_33694620的博客
04-19 3225
此方案是借助两个插件，将px进行转化为rem。lib-flexible 用于设置 rem 基准值。由淘宝手机前端开发团队编写的。postcss-pxtorem 是一款 postcss 插件，用于将单位转化为 rem。一、lib-flexible Installnpm i -S amfe-flexible复制代码 Import<meta name="viewport" content...
vue中使用rem布局解析+大屏自适应
热门推荐
Cassie's blog
10-18 6万+
公司内部一直有大屏的需求，也一直再做，中途也踩了一些坑，但是没有认真的来总结下。 首先项目中，做过移动端的适配，也有现在的大屏需求，中间都离不开不一个单位rem，自适应看起来就很麻烦，不过无惧困难，困难才会看到你说，哟，厉害了，我闪~，下面慢慢聊来。 浅析rem 首先rem是css单位，相比于px固定的像素单位，rem更加的灵活，还有现在也比较好的vm。如果从未了解过，可以先过过眼 rem...
vue中如何使用rem
weixin_44283589的博客
08-16 1959
方法一、在Vue中实现跨浏览器的rem适配，可以借助postcss-pxtorem插件和lib-flexible库来实现。
vue使用rem
小九的小酒的博客
08-09 102
1. 安装 amfe-flexible、postcss-px2rem-exclude cnpm i amfe-flexible postcss-px2rem-exclude --save 2.在main.js文件中引入 import 'amfe-flexible' 3. 配置.postcssrc.js（没有则新建） module.exports = { plugins: { autoprefixer: {}, "postcss-px2rem-exclude": { "remUnit": 75, "exc
rem在vue中的使用
lwx931449660的博客
08-12 5718
rem是什么？ 它是一个相对单位，像px，vh，vw等一样，可以用来表示尺寸单位。 rem之所以可以用于自适应布局，是因为rem是一个相对尺寸，它只相对于html根元素来进行计算 所以，在不同的页面大小中，只要改变html根元素的大小，其他所有元素便会跟着改变 首先要知道，浏览器的默认字体高都是16px，所以可以这样理解，1rem 就等于 16px (1rem = 16px) 因为其他元素要相对于跟元素的大小来进行计算，所以为了方便使用就有了如下操作： html{ ...
vue使用rem实现 移动端屏幕适配
12-01
要想移动端适配 并使用 rem 您需要先看这篇文章，配置好less :right_arrow_selector: 在vue 中使用 less，就可以使用rem了 如果项目已经开发的差不多了，没有用到rem 又要使用rem，您用这招。 postcss-pxtorem：...
Vue项目自动转换 px 为 rem的实现方法
01-19
vue-cli：使用脚手架工具创建项目。 postcss-pxtorem：转换px为rem的插件。 自动设置根节点html的font-size 因为rem单位是相对于根节点的字体大小的，所以通过设置根节点的字体大小可以动态的改变rem的大小。 原理...
Vue 使用 rem布局
苦涩精灵的博客
10-14 1632
Vue 使用 rem布局 1、rem布局需要安装两个插件 npm i lib-flexible -S npm i postcss-pxtorem -D lib-flexible: 根据移动端屏幕大小而对应改变html的fontSize postcss-pxtorem： 根据html的fontSize将px单位改变为rem单位 有了以上两个插件，就可以直接在css中写px单位，项目在渲染时会自动帮我们把写的px单位转换为rem单位。这里用的是750px的设计稿。 2、项目中创建postcss.con
vue中rem的使用
u010208165的博客
09-23 1548
vue中的rem如何做？ 首先项目中，新建一个目录config，并且在新建一个js文件rem.js 在rem.js里面使用闭包 写进如下代码 // 设置基准 const BASE = 15; (function (doc, win) { let docEl = doc.documentElement, resizeEvt = 'orientationchange' in window ? 'orientationchange' : 'resize',//去..
Vue移动端使用rem适配（rem移动端适配，vue移动端适配）
weixin_65793170的博客
12-08 1696
​1、首先需要安装第三方插件，这是我们使用自动将 px 单位转化为 rem 单位的插件，命令如下： //可以将 px 单位自动转化为 rem 单位 npm install postcss --save-dev npm install postcss-pxtorem@5.1.1 --save-dev //还需要安装 amfe-flexible，安装引入后单位转化才可以使用 npm i amfe-flexible --save 要安装这三个插件px才能自动转化为rem ，这些工具帮助我们自动
vue 中使用rem布局
小羽向前跑
05-10 227
1.src下新建rem.js (function(window, document) { // 给hotcss开辟个命名空间，别问我为什么，我要给你准备你会用到的方法，免得用到的时候还要自己写。 const hotcss = {} ;(function() { // 根据devicePixelRatio自定计算scale // 可以有效解决移动端...
vue 中使用 rem 布局的两种方法
Robin 的博客
01-25 2万+
在使用 vue-cli 开发 H5 项目时，需要进行 rem 适配，下面提供两种常用的方法（以 750 设计稿为例），希望对大家有所帮助。 方法一：在 index.html 或者 main.js 中添加以下代码： const setHtmlFontSize = () =&amp;gt; { const htmlDom = document.getElementsByTagName('html')[...
如何在vue项目中使用rem布局
SH744的博客
11-08 9592
在我们开发移动端项目中，实现手机页面布局，需要使用rem布局，那么该如何使用呢？本文就详细的讲解了在vue项目中使用rem布局的整个过程，可以仔细阅读哦！（1）使用lib-flexbile（2）使用postcss-pxtorem两种方法选其一使用哦，避免冲突！!!
vue项目pc端rem适配，不需依赖
weixin_60924822的博客
08-28 499
3.vscode下载插件px to rem配置转换比率为：设计稿宽度/10 例：1920的设计稿 px to rem 设置为192。2.新建util文件夹，新建index.js文件，复制以下代码，main.js中import全局引用。1.项目新建css文件，main.js中import引入全局css演示文件。
Web前端-移动web开发_rem布局
最新发布
apple_73204060的博客
02-08 1620
媒体查询（Media Query）是CSS3新语法。使用 @media查询，可以针对不同的媒体类型定义不同的样式@media 可以针对不同的屏幕尺寸设置不同的样式当你重置浏览器大小的过程中，页面也会根据浏览器的宽度和高度重新渲染页面目前针对很多苹果手机、Android手机，平板等设备都用得到多媒体查询媒体查询主要用于页面的响应式设计Less（LeanerStyle Sheets 的缩写）是一门 CSS扩展语言，也称为CSS预处理器。
Vue3页面如何设置rem单位的依据“根font-size”的两种方式
STATICHIT静砸的博客
12-13 2609
最近在对项目做整体的自适应。我们可以通过设置meta的viewport属性设置屏幕的缩放，但有时候，屏幕缩放了但字体大小也需要做相应的调整才能达到更好的自适应效果。我们很容易想到使用媒体查询+rem来实现字体的自适应。rem单位：“rem” 是 “root em” 的缩写，表示相对于根元素（html元素）的字体大小。如果根元素的字体大小为16px，1rem就相当于16px。如果根元素字体大小更改，那么所有使用rem单位的元素的大小都会相应地调整。首先，简单说说使用'rem'单位的目的和必要性。
Vue适配移动端，动态计算rem
林中明月间丶
07-30 2524
https://www.jianshu.com/p/3163bc9f7e47 //引入rem.js,在assets中创建rem文件夹引入： import rem from './assets/rem/rem' 或者直接在 index.html 下面加 <script></script>里(我就不引入了) (function (doc, win) { var ...
vue3创建移动端项目使用rem
10-12
要在Vue3中创建移动端项目并使用rem，可以按照以下步骤进行： 1. 安装postcss-pxtorem插件：在项目根目录下执行命令 npm install postcss-pxtorem --save-dev 2. 在项目根目录下创建postcss.config.js文件，并添加以下代码： ``` module.exports = { plugins: { 'postcss-pxtorem': { rootValue: 37.5, // 设计稿宽度的1/10，一般为375的1/10 propList: ['*'] } } } ``` 3. 在main.js中引入rem.js文件，并在Vue实例中添加以下代码： ``` import rem from './utils/rem' rem(document, window) new Vue({ render: h => h(App), }).$mount('#app') ``` 4. 在utils文件夹下创建rem.js文件，并添加以下代码： ``` export default function (doc, win) { const docEl = doc.documentElement const resizeEvt = 'orientationchange' in window ? 'orientationchange' : 'resize' const recalc = function () { const clientWidth = docEl.clientWidth if (!clientWidth) return docEl.style.fontSize = 100 * (clientWidth / 375) + 'px' } if (!doc.addEventListener) return win.addEventListener(resizeEvt, recalc, false) doc.addEventListener('DOMContentLoaded', recalc, false) } ``` 这样就可以使用rem来适配移动端了。

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

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

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值