Web端響應(yīng)式

本文旨在講述pc管理后臺在使用element-ui或者 element plus的前提下。在UI設(shè)計(jì)沒有具體的要求下使用的統(tǒng)一實(shí)現(xiàn)標(biāo)準(zhǔn)。

• 頁面寬度兼容到1280px。根據(jù)設(shè)計(jì)在頁面寬度大于1280px時候進(jìn)行 transform: scale()進(jìn)行頁面縮放。頁面寬度小于1280px時候出現(xiàn)滾動條。
• 頁面高度根據(jù)寬度進(jìn)行自適應(yīng)。
• 在沒有UI具體要求的情況下，使用Layout的盒子添加滾動條來實(shí)現(xiàn)頁面滾動，比如菜單，table，detail等頁面。盡量不要使用瀏覽器頁面的滾動。

1. 瀏覽器窗口寬高響應(yīng)

• 大于1920px在沒有UI的具體要求下，頁面寬度大于1920px時候兩側(cè)使用空白填充。
• 1280px - 1920px在沒有UI的具體要求下，進(jìn)行頁面縮放處理。
• 小于1280px在沒有UI的具體要求下，使用瀏覽器窗口的滾動條進(jìn)行適配。
• 高度根據(jù)寬度變化進(jìn)行適應(yīng)比例，在沒有UI的具體要求下，使用 16 / 9 的比例進(jìn)行適配， 也可以讓內(nèi)容自動撐開高度。

2. 實(shí)現(xiàn)思路和策略

• 設(shè)置 html 允許頁面縮放。
• 根元素 html , body 元素 overflow:auto。
• 根據(jù)根元素 font-size 來進(jìn)行頁面縮放。
• 判斷 html 元素，窗口 的大小是縮放，滾動還是兩側(cè)留白。

3. 具體實(shí)現(xiàn)代碼

• 項(xiàng)目的跟html文件頭部添加 meta

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

• 對應(yīng)跟元素 html , body 要添加對應(yīng) overflow的 css 屬性

  html,
  body {
    height: 100%;
    width: 100%;
    margin: 0;
    padding: 0;
    /* font-size: 14px; 會在別的地方設(shè)置，這里無需設(shè)置默認(rèn)字號了 */
    min-width: 1920px;
    overflow: auto;
  }
  
  

• 跟 dom 元素 #app 的樣式

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

• 需要把 px單位轉(zhuǎn)換成 rem, 來實(shí)現(xiàn)縮放，為了保證代碼編寫時候繼續(xù)使用 px單位，需要插件自動把 px 自動轉(zhuǎn)換成 rem。

  yarn add @types/postcss-pxtorem -D # 如果項(xiàng)目沒使用 ts 可以不用安裝該依賴包
  
  yarn add postcss postcss-loader postcss-pxtorem - D
  # pxtorem 就是把px單位自動轉(zhuǎn)化成rem單位，當(dāng)然還需要下面 *vite.config.ts* 文件的配置 才會生效。
  

• 在 App.vue 或者 項(xiàng)目的入口組件中設(shè)置

  <script setup lang="ts">
  import { onMounted } from 'vue'
  
  onMounted(() => {
    InitLayout()
  })
  
  const InitLayout = () => {
    Adaptive()
    window.onresize = () => {
      Adaptive()
    }
  }
  
  const Adaptive = () => {
    /**
     * 根據(jù)UI給的規(guī)范定義
     * 主標(biāo)題 20
     * 標(biāo)題 18
     * 小標(biāo)題 16
     * 正文 14
     * 輔助文字 12
     * 那默認(rèn)使用正文文字 14
     * 在UI是 1920 * 1080的基礎(chǔ)上進(jìn)行計(jì)算
     * ! 如果UI基礎(chǔ)不是 1920 的話還需要重新計(jì)算
     */
    const htmlEl: HTMLBaseElement | any = document.querySelector('html')
    const screenWidth = htmlEl.clientWidth
    if (screenWidth <= 1280) {
      // 窗口小于 1280 出現(xiàn)滾動條，頁面大小不再縮放
      const miniSize = 14 / (1920 / 1280) //  ≈ 9.33
      htmlEl.style.fontSize = `${miniSize}px`
    } else if (screenWidth > 1920) {
      // 窗口大于 1920 頁面兩側(cè)出現(xiàn)留白，頁面大小不再縮放
      const maxSize = 14 // 默認(rèn)的正文大小
      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: ['*']
          })
        ]
      }
    }
  })
  
  

4. 展示效果

• 頁面小于 1280px

  mini.png

• 頁面在 1280 - 1920px 之間

  auto.png

• 頁面大于 1920px

  max.png