在開發(fā)移動端的時候需要適配各種機型，有大的，有小的，我們需要一套代碼，在不同的分辨率適應(yīng)各種機型。

因此我們需要設(shè)置meta標簽

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

移動設(shè)備具有各種不同的屏幕尺寸和分辨率，例如智能手機和平板電腦。為了提供更好的用戶體驗，網(wǎng)頁需要根據(jù)設(shè)備的屏幕寬度進行自適應(yīng)布局。如果不設(shè)置width=device-width，移動設(shè)備會按照默認的視口寬度（通常是較寬的桌面屏幕）來渲染網(wǎng)頁，導(dǎo)致網(wǎng)頁內(nèi)容在移動設(shè)備上顯示不正常，可能出現(xiàn)內(nèi)容被截斷或需要水平滾動的情況

然后我們實現(xiàn)一個經(jīng)典的圣杯布局

圣杯布局：在CSS中，圣杯布局是指兩邊盒子寬度固定，中間盒子自適應(yīng)的三欄布局，其中，中間欄放到文檔流前面，保證先行渲染；

圣杯布局

<template><div><header><div>left</div><div>center</div><div>right</div></header></div>
</template>

header {display: flex;justify-content: space-between;div {height: 50px;color: white;text-align: center;line-height: 50px;}div:nth-child(1) {width: 100px;background: red;}div:nth-child(2) {flex: 1;background: green;}div:nth-child(3) {width: 100px;background: blue;}
}

正常手機看著也還行

但是如果是小手機就會有問題 很擠

自適應(yīng)

發(fā)現(xiàn)px是相對單位固定的，無法進行自適應(yīng)，不會隨著屏幕尺寸的改變而改變。

而rem 是根據(jù)html的font-size 進行縮放的，可以進行自適應(yīng)，缺點就是需要計算每個屏幕大小所對應(yīng)的font-size

vw vh是相對viewport 視口的單位，配合meta標簽可以直接使用，無需計算

1vw=1/100視口寬度

1vh=1/100視口高度

當前屏幕視口是375像素，1vw就是3.75像素

現(xiàn)在知道了用什么單位，但是我們還要根據(jù)px去換算vw就很麻煩，能不能自動轉(zhuǎn)換？？？

postCss

https://cn.vitejs.dev/config/shared-options.html#css-postcss

發(fā)現(xiàn)vite已經(jīng)內(nèi)置了postCss

https://www.postcss.com.cn/

postCss 提供了 把Css 轉(zhuǎn)換AST的能力，類似于Babel，為此我們可以編寫一個插件用于將px轉(zhuǎn)換為vw

npm init vue

構(gòu)建一個vue項目

根目錄新建一個plugins文件夾新建兩個文件pxto-viewport.ts type.ts

然后在 tsconfig.node.json 的includes 配置 "plugins/**/*",

compilerOptions 配置 noImplicitAny:false

pxto-viewport.js

import type { Options } from './type'
import type { Plugin } from 'postcss'
const defaultOptions = {viewPortWidth: 375,mediaQuery: false,unitToConvert:'px'
}
export const pxToViewport = (options: Options = defaultOptions): Plugin => {const opt = Object.assign({}, defaultOptions, options)return {postcssPlugin: 'postcss-px-to-viewport',//css節(jié)點都會經(jīng)過這個鉤子Declaration(node) {const value = node.value//匹配到px 轉(zhuǎn)換成vwif (value.includes(opt.unitToConvert)) {const num = parseFloat(value)const transformValue = (num / opt.viewPortWidth) * 100node.value = `${transformValue.toFixed(2)}vw` //轉(zhuǎn)換之后的值}    },}
}

type.ts

export interface Options {viewPortWidth?: number;mediaQuery?: boolean;unitToConvert?: string;
}

vite.config.ts 引入我們寫好的插件

  css:{postcss:{plugins:[pxToViewport()]},},

這樣的話各種屏幕都差不多了。

額外的小知識

比如要增加一個 可以設(shè)置全局的字體大小 或者全局背景顏色切換應(yīng)該怎么做呢？

1. 安裝vueUse

npm i  @vueuse/core

2. 定義Css變量

:root {--size: 14px;
}
div {height: 50px;color: white;text-align: center;line-height: 50px;font-size: var(--size);
}

3. 切換字體大小

  <div><button @click="change(36)">大</button><button @click="change(24)">中</button><button @click="change(14)">小</button></div>

import { useCssVar } from '@vueuse/core'
const change = (str: number) => {const color = useCssVar('--size')color.value = `${str}px`
}

useCssVar 的底層原理就是

document.documentElement.style.getPropertyValue('--size')
讀取就是get設(shè)置就是set 只要想切換的頁面用這個css變量就可以了，如果想持久存儲就用localstorage