How to use vue and Element-plus to implement responsive layout and adaptive screen

How to use vue and Element-plus to implement responsive layout and adaptive screen

In today's mobile Internet era, devices with different screen sizes are becoming more and more popular, and the responsive layout and adaptive screen of websites have become Become a must-have feature. Under the framework of Vue.js and Element-plus, it is very simple to implement such a layout. This article will show you how to use these two tools to achieve responsive layout and adaptive screens.

1. Installing and configuring Vue.js and Element-plus

First, make sure Vue.js and Element-plus are installed in your project. It can be installed using package management tools such as npm or yarn. After the installation is complete, import Element-plus's style files into your project.

In Vue, we can introduce it globally by importing the Element-plus style file in the main.js file.

// main.js

import { createApp } from 'vue'
import ElementPlus from 'element-plus'
import 'element-plus/lib/theme-chalk/index.css'

createApp(App)
  .use(ElementPlus)
  .mount('#app')

2. Responsive layout

In Element-plus, some common layout components are provided to help us implement responsive layout.

• Container: Container component, used to wrap a group of layout elements.
• Row: Row component, used to wrap column elements.
• Col: Column component, used to set the width of the column.

The following is a simple responsive layout example:

<template>
  <div>
    <el-container>
      <el-header>Header</el-header>
      <el-aside>Aside</el-aside>
      <el-main>Main</el-main>
      <el-footer>Footer</el-footer>
    </el-container>
  </div>
</template>

<script>
export default {
  name: 'App',
  data() {
    return {}
  },
}
</script>

<style scoped>
div {
  height: 100vh;
}

.el-header {
  background-color: #f2f2f2;
  text-align: center;
  line-height: 60px;
}

.el-aside {
  background-color: #f5f7fa;
  text-align: center;
  line-height: 200px;
}

.el-main {
  background-color: #f2f2f2;
  text-align: center;
  line-height: 200px;
}

.el-footer {
  background-color: #f2f2f2;
  text-align: center;
  line-height: 60px;
}
</style>

In this example, we divide the page into 4 parts: Header, Aside, Main and Footer. Use the Container component to wrap them, the Row component to wrap column elements, and the Col component to set the width of the column.

The above code will divide the page into three parts: upper, middle and lower. The upper part is Header, the middle part is Main, the lower part is Footer, and there is an Aside on the left.

3. Adaptive screen

Implementing adaptive screen is to enable the page to display the correct layout and style on devices of different sizes. Element-plus provides some CSS classes that can help us implement adaptive screens.

• el-col-xs-*: Styles that take effect on mobile devices.
• el-col-sm-*: Styles that take effect on tablet devices.
• el-col-md-*: Styles that take effect on desktop devices.

Here is an example of an adaptive screen:

<template>
  <div>
    <el-container>
      <el-header>Header</el-header>
      <el-container>
        <el-aside :span="4">
          Aside (span=4)
        </el-aside>
        <el-main :span="20">
          Main (span=20)
        </el-main>
      </el-container>
      <el-footer>Footer</el-footer>
    </el-container>
  </div>
</template>

<script>
export default {
  name: 'App',
  data() {
    return {}
  },
}
</script>

<style scoped>
div {
  height: 100vh;
}

.el-header {
  background-color: #f2f2f2;
  text-align: center;
  line-height: 60px;
}

.el-aside {
  background-color: #f5f7fa;
  text-align: center;
  line-height: 200px;
}

.el-main {
  background-color: #f2f2f2;
  text-align: center;
  line-height: 200px;
}

.el-footer {
  background-color: #f2f2f2;
  text-align: center;
  line-height: 60px;
}

@media screen and (max-width: 480px) {
  .el-aside,
  .el-main {
    padding: 10px;
  }
}
</style>

In this example, the @media query is used to change the style of an element when the screen size is 480px or less. Since the screen size is too small, we added some padding values ​​to Aside and Main to adapt to the smaller screen.

Summary

Through the above examples, we can see that it is very simple to use Vue.js and Element-plus to implement responsive layout and adaptive screens. Just using the layout components and CSS classes provided by Element-plus, we can display the correct layout and style on different screen sizes. Whether on a mobile phone, tablet or desktop device, we can provide a great user experience.

I hope this article will be helpful to you, and I wish you can successfully implement responsive layout and adaptive screen in the process of using Vue.js and Element-plus.

The above is the detailed content of How to use vue and Element-plus to implement responsive layout and adaptive screen. For more information, please follow other related articles on the PHP Chinese website!