preface

This article is a summary of day-to-day business and may not be appropriate for all projects. After all, best practices will vary from company to company or individual project. If you can absorb something useful from this article, I’m happy to help. But if you have any questions, you are welcome to make fun of them

All right, let’s move on to today’s topic

How do you do responsive layout?
  • So the first thing we need to know is what is reactive

Lazy, just be directBring your

  1. Advantages of responsive layout: In the face of different resolution equipment flexibility, can quickly solve the problem of multi-device display adaptation.
  2. Disadvantages of responsive layouts:Poor compatibility. Compatible with all sorts of equipment when the workload is big, inefficient, code, there will be a hidden useless elements, loading time longer, in fact this is the nature of a compromise design solutions, the various factors influence and reach the best effect, to a certain extent changed the layout of the site of the original structure, the user confusion would happen

So unless it is a more flexible server like background management system, reactive processing is done less

As the saying goes, the world one copy of the article. To be honest, when I first came up with the requirements from the product manager, I was so confused that I didn’t know what to do. But haven’t you eaten pork haven’t you seen a pig run? So I thought of AntD and VueAdmin, however, VueAdmin this official website link seems not to open, I found its domestic source address for your reference

Demonstration effect

Show the screenshot of the official website

Screen size: <= 1200 It is a look ↓↓↓

Screen size: <= 912 it looks like ↓↓↓

Screen size: <= 768 It looks like ↓↓↓ At this time almost to the mobile end of the adaptation page

Internal specific implementation of the source code here is not shared, too much file association, show up to say. Mainly laziness

The next. Tell me a little bit about how I implemented the responsive layout idea myself. I’m only talking about Vue here

  • The first step

The first thing that comes to mind is the window.onresize API. It monitors window changes and is a BOM object

  • The second step

Set screenWidth in the data option: Document. Body. ClientWidth then in the window. The onresize method in the window. Let screenWidth = document. Body. ClientWidth. Let that screenWidth = window.screenWidth

  • The third step

When the window changes to a certain position, it changes the style dynamically, thus achieving the effect of responsive layout

Ok, go straight to the code:

/ / HTML
<template>
  <div class="wrap">
    <! Control menu bar display and hide -->
    <app-header class="app-header" :visible="visible"/>
    <! The control sidebar zooming in element UI uses a dynamic style :class="adaptation. Nav "to change the layout.
    <app-nav :class="adaptation.nav" :isCollapse="isCollapse" :direction="visible"/>
    <app-main :class="adaptation.main"/>
  </div>
</template>

<script>
// Introduce three main building blocks
import AppHeader from './AppHeader'
import AppMain from './AppMain'
import AppNav from './AppNav'

export default {
  components: { AppHeader, AppMain, AppNav },
  created() {
    // The arrow function is used here, but I don't need to change that, because OF my habit of writing Es5
    const that = this
    // Core method, mainly based on window changes to control the layout
    window.onresize = () = > {
      window.screenWidth = document.body.clientWidth
      / / the second step
      that.screenWidth = window.screenWidth
      window.screenWidth >= 1200 ? that.isCollapse = false : that.isCollapse = true
      that.changeWidth(window.screenWidth)
    }
    window.onresize()
  },
  data() {
    return {
      adaptation: {
        nav: 'app-nav-lg'.main: 'app-main-lg'.class: ' '
      },
      / / the first step
      screenWidth: document.body.clientWidth,
      visible: null.isCollapse: false}},methods: {
    / / the third step
    changeWidth(clientWidth) {
      this.visible = true
      // Change the style mainly according to the window changes to a certain position
      if (clientWidth >= 1200) {
        // el-menu-vertical-demo el-menu-demo
        this.adaptation.nav = 'app-nav-lg'
        this.adaptation.main = 'app-main-lg'
      } else if (clientWidth >= 992) {
        this.adaptation.nav = 'app-nav-md'
        this.adaptation.main = 'app-main-md'
      } else if (clientWidth >= 768) {
        this.adaptation.nav = 'app-nav-sm'
        this.adaptation.main = 'app-main-sm'
      } else if (clientWidth < 768) {
        this.adaptation.nav = 'hidden-xs-only app-nav-xs'
        this.adaptation.main = 'app-main-xs'
        this.visible = false
      } else this.$message.warning({ message: 'Unknown pixel error' })
      // console.log(' current window size ', clientWidth)}}}</script>

<style lang="scss" scoped>
  .wrap {
    height: 100%;
    overflow: hidden;

    .app-header {
      position: fixed;
      height: 60px;
      left: 0;
      top: 0;
      right: 0;
      z-index: 99;
      background: rgb(5.32.60);
    }

    .app-nav-lg..app-nav-md..app-nav-sm..app-nav-xs {
      background: rgb(45.56.89);
      min-width: 60px;
      height: calc(100% - 0px);
      float: left;
      /*margin-top: 60px; * /
      overflow: hidden;
      user-select: none;
    }

    .app-nav-xs {
      width: 0;
      min-width: 0;
    }

    .app-main-lg::-webkit-scrollbar, .app-main-md::-webkit-scrollbar,
    .app-main-sm::-webkit-scrollbar, .app-main-xs::-webkit-scrollbar{
      display: none;
    }
    .app-main-lg..app-main-md..app-main-sm..app-main-xs {
      padding: 80px 15px 0 15px;
      width: calc(100% - 230px);
      height: calc(100% - 0px);
      overflow: auto;
      scrollbar-width: none;
      float: right;
    }

    .app-main-md {
      width: calc(100% - 95px);
    }

    .app-main-sm {
      width: calc(100% - 95px);
    }

    .app-main-xs {
      width: calc(100% - 30px); }}</style>
Copy the code

Of course, this may not be the right place for your project, as I mentioned earlier, best practices will vary from company to company and from person to person. Let’s just say that was my initial thinking. But there’s still a problem with that

There is a function that is mounted globally and executes window.onresize whenever a window or route jump is’ blown ‘, so it is put into Redux to listen as in AntD source code. Vue-elementadmin is managed in Vuex. I will not explain too much here, because there are many files involved and it is very complicated to explain. If you are interested, you can look at the source code

Well, this is the end of today’s sharing, thanks for watching, if you feel good, you can click a small like to support. If you don’t understand anything, you can leave a message. Don’t worry. I won’t return any messages