Vue3页面如何设置rem单位的依据“根font-size”的两种方式

最近在对项目做整体的自适应。我们可以通过设置meta的viewport属性设置屏幕的缩放,但有时候,屏幕缩放了但字体大小也需要做相应的调整才能达到更好的自适应效果。我们很容易想到使用媒体查询+rem来实现字体的自适应。

rem单位:“rem” 是 “root em” 的缩写,表示相对于根元素(html元素)的字体大小。如果根元素的字体大小为16px,1rem就相当于16px。如果根元素字体大小更改,那么所有使用rem单位的元素的大小都会相应地调整。

首先,简单说说使用'rem'单位的目的和必要性。

使用'rem'单位的目的和必要性在于实现页面的相对单位一致性和灵活性:

1. 相对一致性: 'rem'单位相对于根元素的字体大小,因此在整个页面中可以保持一致的相对比例。这意味着,如果需要调整整个页面的字体大小,只需修改根元素的字体大小,而不必逐个调整每个元素的大小。

2. 灵活性:使用'rem'单位允许开发者更灵活地适应不同屏幕尺寸和设备。通过调整根元素的字体大小,整个页面的布局和元素大小可以在不同屏幕上进行自适应,提高页面的响应性和可维护性。

'rem'单位使得开发者能够更方便地管理和调整页面的相对大小,而不必担心层层嵌套的影响,从而简化了样式的管理和维护。

那么在vue项目中有几种书写方式可以实现呢?

方式一:在index.html中设置

我们只需要打开(一般初始位置是在public/index.html)index.html文件,加上一行代码即可。

我们知道,index.html文件在 Vue 项目中充当了整个应用的主入口文件。

它的主要作用有两个:

1. 根 HTML 结构:index.html 包含了应用的根 HTML 结构,其中定义了 `

`,作为 Vue 应用挂载的根节点。Vue 组件将被渲染到这个根节点中。

2. 引入 JavaScript 和 CSS:在 index.html 中,你会看到一些

你可能感兴趣的:(前端,自适应,前端优化)