首页vue3怎么使用rem作为单位

vue3怎么使用rem作为单位

时间: 2024-05-04 17:21:10 浏览: 55

在 Vue3 中使用 `rem` 作为单位，可以通过以下步骤实现： 1. 在 `index.html` 文件的 `<head>` 标签中添加以下代码： ```html <meta name="viewport" content="width=device-width, initial-scale=1.0"> <script> (function (doc, win) { var docEl = doc.documentElement; var resizeEvt = 'orientationchange' in window ? 'orientationchange' : 'resize'; var recalc = function () { var clientWidth = docEl.clientWidth; if (!clientWidth) return; docEl.style.fontSize = 100 * (clientWidth / 750) + 'px'; // 750 为设计稿宽度 }; if (!doc.addEventListener) return; win.addEventListener(resizeEvt, recalc, false); doc.addEventListener('DOMContentLoaded', recalc, false); })(document, window); </script> ``` 这段代码实现了根据屏幕宽度自动调整 `html` 标签的 `font-size` 值，其中 `750` 为设计稿宽度。 2. 在需要使用 `rem` 单位的组件中，按照设计稿的像素值将像素值转换为 `rem` 值即可，例如： ```html <template> <div class="container"> <div class="title">Hello World</div> <div class="content">This is a demo</div> </div> </template> <style scoped> .container { width: 6.4rem; /* 设计稿中宽度为 640px，转换为 6.4rem */ } .title { font-size: 0.32rem; /* 设计稿中字号为 32px，转换为 0.32rem */ } .content { font-size: 0.24rem; /* 设计稿中字号为 24px，转换为 0.24rem */ } </style> ``` 在这个例子中，我们将组件的宽度和字号都用 `rem` 单位来设置，实现了自适应布局。

阅读全文