Vue响应式布局之rem设置

vue布局rem设置

Vue.js 是一种用于构建用户界面的现代 JavaScript 框架。它的灵活性和可扩展性，使其成为最受欢迎的前端开发框架之一。在 Vue.js 中使用 rem 实现响应式布局非常简单，下面将介绍如何使用 rem 在 Vue.js 中进行响应式布局。

什么是 Rem？

Rem 是一个相对单位，它是根据视口宽度来计算的，它的意思是「根据根元素的字体大小进行等比缩放」。例如，如果根元素的字体大小为 10px，则 1rem 将等于 10px。如果根元素的字体大小为 20px，则 1rem 将等于 20px。

使用 Rem 进行响应式设计的好处是，当用户调整浏览器窗口大小时，页面中的元素将随之缩放，从而保持相对大小关系，使其在不同设备上呈现可读性和易用性。

设置 Rem

在 Vue.js 中，我们可以使用如下代码设置 rem：

// 设置基准值
const baseSize = 32 // 设计图尺寸（1920px）/ 60

// 设置 rem 函数
function setRem () {
const scale = document.documentElement.clientWidth / 1920
document.documentElement.style.fontSize = `${baseSize * Math.min(scale, 1)}px`
}

// 初始化
setRem()

// 改变窗口大小时重新设置 rem
window.addEventListener('resize', () =>
{
setRem()
})

在上述代码中，我们首先定义了一个基准值 baseSize，通常情况下，我们会将基准值设置为设计稿的尺寸（这里假设设计稿尺寸为 1920px）。接下来定义了一个 setRem 函数，它用于根据当前窗口宽度计算字体大小和 rem 值。最后在初始化时，调用 setRem 函数来设置当前的 rem 值，并使用 window.addEventListener 监听窗口大小变化事件，以便在窗口大小变化时重新设置 rem 值。

在 Vue 中使用 Rem

有了设置好的 rem，接下来就可以在 Vue.js 中使用它进行响应式布局了。在组件中使用 rem 的方法如下：

<
template>

<
div class="
container"
>

<
div class="
box"
:style="
{ width: '32rem', height: '18rem' }"
>
<
/div>

<
/div>

<
/template>


<
script>

export default {
name: 'Demo',
data () {
return {
msg: 'Hello World!'
}
}
}
<
/script>


<
style scoped>

.container {
width: 60rem;

margin: 0 auto;

}

.box {
background-color: #F00;

margin: 2rem auto;

}
<
/style>

在上述代码中，我们首先设置了一个 .container 样式，该样式具有固定宽度和居中对齐的效果。在 .box 样式中，我们使用了 margin 来使元素与 .container 有一定距离。将样式中的值设置为 rem 值，使其能够根据窗口大小进行响应式缩放。

结论

在 Vue.js 中使用 Rem 进行响应式布局是一种常用的方法，它能够帮助我们更好地适应不同设备和窗口大小。使用 Rem，可以根据视口大小计算出字体大小和 rem 值，并在样式中进行应用。在 Vue.js 中设置 Rem 非常容易，只需要编写一些 JavaScript 代码即可。

当然，还有其他实现响应式布局的方法，例如使用 Bootstrap 等 CSS 框架。相比较而言，使用 Rem 的方法更加灵活，可以支持更多自定义需求。

随着移动互联网的崛起，网页逐渐向着响应式布局的方向发展。而Vue.js正是一种非常流行的响应式前端框架，越来越多的开发者在使用Vue进行移动端网页开发。在Vue中，rem是一种比较常用的响应式布局单位，本文将介绍如何在Vue中使用rem进行响应式布局。
一、什么是rem
rem是一种响应式布局单位，它是指相对于根元素(html标签)的字体大小的单位。假设根元素的字体大小为16px，那么1rem就等于16px。当根元素的字体大小改变时，rem的值也跟着改变，因此rem可以很好地适应不同的页面大小和屏幕分辨率。
二、在Vue中设置根元素字体大小
在Vue中，我们可以通过修改根元素的fontSize来设置rem的基准大小。通常情况下，我们可以在index.html文件中加入以下代码：
```html

```
其中62.5%表示根元素的字体大小为10px(因为浏览器默认字体大小为16px，16*0.625=10)，这样我们就可以以10px为基础进行rem的计算了。当然，我们也可以在Vue组件中手动设置根元素的fontSize，例如：
```javascript
mounted() {
document.documentElement.style.fontSize = window.innerWidth / 10 + 'px';
window.addEventListener('resize', () => {
document.documentElement.style.fontSize = window.innerWidth / 10 + 'px';
});
}
```
这里的10是基准值，可以根据实际需要进行调整。通过这样的设置，我们就可以自适应不同分辨率的屏幕了。
三、设置不同元素的rem值
在Vue中，我们可以使用CSS的calc()函数来计算不同元素的rem大小。例如：
```css
.box {
width: calc(100% - 2rem);
padding: 1rem;
}
```
这里的2rem表示两侧的边距，1rem表示上下的边距。
四、使用&符号简化代码
在Vue中，我们可以使用&符号来省略一些重复的CSS代码。例如：
```css
.box {
&-title {
margin-bottom: 1rem;
font-size: 1.2rem;
}
&-content {
font-size: 1rem;
line-height: 1.5rem;
}
}
```
这里的&-title表示.box-title，&-content表示.box-content，可以大大简化代码编写。
五、使用Sass等预编译器进行rem的计算
在Vue中，我们可以使用Sass等预编译器来自动计算rem的值，省去手动计算的繁琐过程。例如：
```sass
$baseFontSize: 10px;
@function rem($px) {
@return $px / $baseFontSize * 1rem;
}
.box {
padding: rem(20px);
}
```
这里的rem(20px)实际上就是2rem的计算结果。使用预编译器能够让我们更加便捷地编写样式。
六、综合实例
下面是一个使用rem响应式布局的实例：
```html












```
```javascript
// main.js
import Vue from 'vue';
import App from './App.vue';
Vue.config.productionTip = false;
new Vue({
render: h => h(App),
}).$mount('#app');
```
```vue



```
这个实例中，我们编写了一个包含盒子的容器，使用了rem单位进行布局。蓝色部分是容器的padding，紫色部分是盒子的padding。通过使用rem单位，我们可以轻松实现响应式布局。
七、总结
本文介绍了如何在Vue中使用rem进行响应式布局，主要包括设置根元素字体大小、计算不同元素的rem值、使用&符号简化代码、使用预编译器自动计算rem值等方面。希望本文能够对Vue开发者有所帮助。