vue layout rem settings

Vue.js is a modern JavaScript framework for building user interfaces. Its flexibility and scalability make it one of the most popular front-end development frameworks. It is very simple to use rem to implement responsive layout in Vue.js. Here we will introduce how to use rem to implement responsive layout in Vue.js.

1. What is Rem?

Rem is a relative unit, which is calculated based on the viewport width. It means "scaling proportionally based on the font size of the root element." For example, if the root element's font size is 10px, then 1rem will equal 10px. If the root element's font size is 20px, then 1rem will equal 20px.

The benefit of using Rem for responsive design is that when the user resizes the browser window, the elements in the page will scale accordingly, thereby maintaining the relative size relationship and making it readable on different devices. and ease of use.

2. Set Rem

In Vue.js, we can use the following code to set 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()
})

In the above code, we first define A base value baseSize. Normally, we will set the base value to the size of the design draft (assuming the size of the design draft is 1920px). Next, a setRem function is defined, which is used to calculate the font size and rem value based on the current window width. Finally, during initialization, call the setRem function to set the current rem value, and use window.addEventListener to listen for window size change events so that the rem value can be reset when the window size changes.

3. Using Rem in Vue

With rem set up, you can use it in Vue.js for responsive layout. The method of using rem in a component is as follows:

<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>

In the above code, we first set a .container style, which has the effect of fixed width and center alignment. In the .box style, we use margin to put some distance between the element and the .container. Set the value in the style to a rem value to enable it to scale responsively based on the window size.

4. Conclusion

Using Rem in Vue.js for responsive layout is a common method, which can help us better adapt to different devices and window sizes . Using Rem, the font size and rem value can be calculated based on the viewport size and applied in the style. Setting up Rem in Vue.js is as easy as writing some JavaScript code.

Of course, there are other ways to implement responsive layout, such as using CSS frameworks such as Bootstrap. In comparison, the method of using Rem is more flexible and can support more customized needs.

The above is the detailed content of vue layout rem settings. For more information, please follow other related articles on the PHP Chinese website!