前端屏幕适配

在开发移动端的时候需要适配各种机型，有大的，有小的，我们需要一套代码，在不同的分辨率适应各种机型。

因此我们需要设置meta标签

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

移动设备具有各种不同的屏幕尺寸和分辨率，例如智能手机和平板电脑。为了提供更好的用户体验，网页需要根据设备的屏幕宽度进行自适应布局。如果不设置width=device-width，移动设备会按照默认的视口宽度（通常是较宽的桌面屏幕）来渲染网页，导致网页内容在移动设备上显示不正常，可能出现内容被截断或需要水平滚动的情况

然后我们实现一个经典的圣杯布局

圣杯布局：在CSS中，圣杯布局是指两边盒子宽度固定，中间盒子自适应的三栏布局，其中，中间栏放到文档流前面，保证先行渲染；

圣杯布局

<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;
  }
}

正常手机看着也还行

但是如果是小手机就会有问题 很挤

自适应

发现px是相对单位固定的，无法进行自适应，不会随着屏幕尺寸的改变而改变。

而rem 是根据html的font-size 进行缩放的，可以进行自适应，缺点就是需要计算每个屏幕大小所对应的font-size

vw vh是相对viewport 视口的单位，配合meta标签可以直接使用，无需计算

1vw=1/100视口宽度

1vh=1/100视口高度

当前屏幕视口是375像素，1vw就是3.75像素

现在知道了用什么单位，但是我们还要根据px去换算vw就很麻烦，能不能自动转换？？？

postCss

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

发现vite已经内置了postCss

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

postCss 提供了 把Css 转换AST的能力，类似于Babel，为此我们可以编写一个插件用于将px转换为vw

npm init vue

构建一个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: Options = {
    viewPortWidth: 375,
    mediaQuery: false,
    unitToConvert: 'px'
};

export const pxToViewport = (options: Options = defaultOptions): Plugin => {
    const opt = { ...defaultOptions, ...options }; // 使用对象展开运算符进行对象合并

    return {
        postcssPlugin: 'postcss-px-to-viewport',
        Declaration(decl) { // 重命名参数为 decl，以符合声明的含义
            const { value } = decl; // 使用解构赋值简化代码
            if (value.includes(opt.unitToConvert)) {
                const num = parseFloat(value);
                const transformValue = (num / opt.viewPortWidth) * 100;
                decl.value = `${transformValue.toFixed(2)}vw`; // 直接修改 decl 的 value 属性
            }
        },
    };
};

type.ts

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

vite.config.ts 引入我们写好的插件

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

这样的话各种屏幕都差不多了。

额外的小知识
比如要增加一个 可以设置全局的字体大小 或者全局背景颜色切换应该怎么做呢？

安装vueUse

npm i  @vueuse/core

定义Css变量

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

切换字体大小

 <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 的底层原理

定义： useCssVar 是一个自定义的函数或方法，不是 JavaScript 或 CSS 的原生功能。通常，它会用来处理 CSS 变量（Custom Properties），这是一种在 CSS 中定义的变量，用于存储重复使用的值，从而使得 CSS 样式更易于维护和修改。

底层原理通常包括以下几个步骤：

• 接收参数：useCssVar 可能会接收一个或多个参数，这些参数可能包括要操作的 CSS 变量名称、要设置的值等。

• 获取或设置 CSS 变量：通过 JavaScript 操作，可以使用 getComputedStyle 方法获取元素的计算样式（computed style），然后使用 getPropertyValue 方法获取指定 CSS 变量的值，或者使用 setProperty 方法设置指定 CSS 变量的值。

• 返回值：根据具体的需求，useCssVar 可能会返回获取到的 CSS 变量的值，或者不返回任何值（例如在设置 CSS 变量时）。

• 应用到元素：在获取或设置 CSS 变量的值之后，通常需要将这些值应用到相应的元素上，从而改变元素的样式。

总的来说，useCssVar 的底层原理涉及到了 JavaScript 操作 CSS 变量的过程，具体实现方式可能因应用场景和需求而有所不同。

举例： document.documentElement.style.getPropertyValue(‘–size’)
读取就是get设置就是set 只要想切换的页面用这个css变量就可以了，如果想持久存储就用localstorage