Web端响应式

本文旨在讲述pc管理后台在使用element-ui或者 element plus的前提下。在UI设计没有具体的要求下使用的统一实现标准。

页面宽度兼容到1280px。根据设计在页面宽度大于1280px时候进行 transform: scale()进行页面缩放。页面宽度小于1280px时候出现滚动条。
页面高度根据宽度进行自适应。
在没有UI具体要求的情况下，使用Layout的盒子添加滚动条来实现页面滚动，比如菜单，table，detail等页面。尽量不要使用浏览器页面的滚动。

1. 浏览器窗口宽高响应

大于1920px在没有UI的具体要求下，页面宽度大于1920px时候两侧使用空白填充。
1280px - 1920px在没有UI的具体要求下，进行页面缩放处理。
小于1280px在没有UI的具体要求下，使用浏览器窗口的滚动条进行适配。
高度根据宽度变化进行适应比例，在没有UI的具体要求下，使用 16 / 9 的比例进行适配，也可以让内容自动撑开高度。

2. 实现思路和策略

设置 html 允许页面缩放。
根元素 html , body 元素 overflow:auto。
根据根元素 font-size 来进行页面缩放。
判断 html 元素，窗口的大小是缩放，滚动还是两侧留白。

3. 具体实现代码

项目的跟html文件头部添加 meta

<meta name="viewport" content="width=device-width, initial-scale=1.0">

对应跟元素 html , body 要添加对应 overflow的 css 属性

html,
body {
  height: 100%;
  width: 100%;
  margin: 0;
  padding: 0;
  /* font-size: 14px; 会在别的地方设置，这里无需设置默认字号了 */
  min-width: 1920px;
  overflow: auto;
}

跟 dom 元素 #app 的样式

#app {
  height: 100%;
  overflow: hidden;
  background-color: #ccc;
}

需要把 px单位转换成 rem, 来实现缩放，为了保证代码编写时候继续使用 px单位，需要插件自动把 px 自动转换成 rem。

yarn add @types/postcss-pxtorem -D # 如果项目没使用 ts 可以不用安装该依赖包

yarn add postcss postcss-loader postcss-pxtorem - D
# pxtorem 就是把px单位自动转化成rem单位，当然还需要下面 *vite.config.ts* 文件的配置 才会生效。

在 App.vue 或者项目的入口组件中设置

<script setup lang="ts">
import { onMounted } from 'vue'

onMounted(() => {
  InitLayout()
})

const InitLayout = () => {
  Adaptive()
  window.onresize = () => {
    Adaptive()
  }
}

const Adaptive = () => {
  /**
   * 根据UI给的规范定义
   * 主标题 20
   * 标题 18
   * 小标题 16
   * 正文 14
   * 辅助文字 12
   * 那默认使用正文文字 14
   * 在UI是 1920 * 1080的基础上进行计算
   * ! 如果UI基础不是 1920 的话还需要重新计算
   */
  const htmlEl: HTMLBaseElement | any = document.querySelector('html')
  const screenWidth = htmlEl.clientWidth
  if (screenWidth <= 1280) {
    // 窗口小于 1280 出现滚动条，页面大小不再缩放
    const miniSize = 14 / (1920 / 1280) //  ≈ 9.33
    htmlEl.style.fontSize = `${miniSize}px`
  } else if (screenWidth > 1920) {
    // 窗口大于 1920 页面两侧出现留白，页面大小不再缩放
    const maxSize = 14 // 默认的正文大小
    htmlEl.style.fontSize = `${maxSize}px`
  } else {
    const baseMultiple = 1920 / 14 // ≈ 137.14
    htmlEl.style.fontSize = `${screenWidth / baseMultiple}px`
  }
}
</script>

<template>
  <div class="layout-container">
    <h1 class="level-title">hello world !!!</h1>
    <div class="son-box">子盒子</div>
  </div>
</template>

<style scoped>
.layout-container {
  height: 100%;
  overflow-x: auto;
  overflow-y: scroll;
}
.level-title {
  font-size: 28px;
  font-weight: 700;
}
.son-box {
  height: 150%;
  background-color: #e4393c;
}
</style>

vite.config.ts 文件的配置

import { fileURLToPath, URL } from 'node:url'

import { defineConfig } from 'vite'
import vue from '@vitejs/plugin-vue'
import vueJsx from '@vitejs/plugin-vue-jsx'

import pxtorem from 'postcss-pxtorem'

// https://vitejs.dev/config/
export default defineConfig({
  plugins: [vue(), vueJsx()],
  resolve: {
    alias: {
      '@': fileURLToPath(new URL('./src', import.meta.url))
    }
  },
  css: {
    postcss: {
      plugins: [
        pxtorem({
          rootValue: 14,
          propList: ['*']
        })
      ]
    }
  }
})