Vue3——网页自适应以及全局切换样式和字体大小

网页自适应以及全局切换样式和字体大小

一、html的meta头

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

二、编写postcss插件，将px和gh转化为vw和vh

创建一个ts文件

// vite内置了postcss，不需要安装postcss
import { Plugin } from "postcss";

enum customerUnit {
    vw = 'px',
    vh = 'gh'
}

const Options = {
    viewportWidth: 390, // UI设计图默认的宽度，默认一般只需要适配宽度即可，高度的话可以展示滚动条，但是有的页面可能设计为高度不能有滚动条的话，就需要转化了
    viewportHeight: 844, // UI设计图的默认高度
}

interface Options {
    viewportWidth?: number,
    viewportHeight?: number,
}

export const PostcssPxToViewPort = (options: Options = Options): Plugin => {
    return {
        postcssPlugin: 'postcss-px-to-viewport',
        // 钩子函数
        Declaration(node) {
            // 在node.value中，就能获取到对应的css的值，所以这里，我们就可以将所有的自定义例如gw、gh转化为vw、vh
            // 用自定义的值的好处：如果有些地方需要固定高度，那么直接使用px就可以，需要转化为指定高度的就用我们自定义的单位
            if (node.value.indexOf(customerUnit.vw) > -1) {
                // 计算vw
                const vwValue = (parseFloat(node.value) / options.viewportWidth * 100).toFixed(2)
                node.value = vwValue + 'vw'
            }
            if (node.value.indexOf(customerUnit.vh) > -1) {
                // 计算vh
                const vhValue = (parseFloat(node.value) / options.viewportHeight * 100).toFixed(2)
                node.value = vhValue + 'vh'
            }
        }
    }
}

配置tsconfig.node.json，在includes里面添加我们的plugins

{
  "compilerOptions": {
    "composite": true,
    "skipLibCheck": true,
    "module": "ESNext",
    "moduleResolution": "bundler",
    "allowSyntheticDefaultImports": true,
    "noImplicitAny": false,
  },
  "include": [
    "vite.config.ts",
    "src/plugins/**/*"
  ]
}

配置vite.config.ts

import { defineConfig } from 'vite'
import vue from '@vitejs/plugin-vue'
import { PostcssPxToViewPort } from './src/plugins/postcss-px-to-viewport'
import UnoCSS from 'unocss/vite'

// https://vitejs.dev/config/
export default defineConfig({
  plugins: [
    vue(),
    UnoCSS({
      rules: [
        [/^m-(\d+)$/, ([, d]) => ({ margin: `${ parseFloat(d) }px` })],
        [/^p-(\d+)$/, ([, d]) => ({ padding: `${ parseFloat(d) }px` })],
      ]
    })
  ],
  css: {
    postcss: {
      plugins: [PostcssPxToViewPort({ viewportWidth: 1920, viewportHeight: 825 })]
    }
  }
})

三、vueuse的使用

官方文档:vueuse官方文档

# 安装
npm i @vueuse/core -S

使用vueuse，修改css变量，以达到修改全局字体大小的功能

<template>
  <header class="m-36" ref="header">
    <div class="left">left</div>
    <div class="center">center</div>
    <div class="right">right</div>
  </header>

  <section>
    <button @click="changeFontSize(36)">大</button>
    <button @click="changeFontSize(24)">中</button>
    <button @click="changeFontSize(14)">小</button>
  </section>
</template>

<script lang="ts" setup>
import { ref } from 'vue';
import { useCssVar } from '@vueuse/core'
const fontSizeKey = ref("--font-size")
const fontSizeValue = useCssVar(fontSizeKey)
console.log(fontSizeValue.value)
const changeFontSize = (value: number) => {
  fontSizeValue.value = value + 'px'
}
</script>

<style lang="scss">
// 在html上挂载一个css样式变量，其他所有页面都可以使用这个变量
:root {
  --font-size: 14px
}

html,
body,
#app {
  padding: 0;
  margin: 0;
  height: 100%;
  width: 100%;
  font-size: var(--font-size);
}
</style>

四、unocss使用

# 安装unocss
npm install -D unocss

# 在vite中配置unocss

vite.config.ts配置

import { defineConfig } from 'vite'
import vue from '@vitejs/plugin-vue'
import { PostcssPxToViewPort } from './src/plugins/postcss-px-to-viewport'
import UnoCSS from 'unocss/vite'
import {
  presetAttributify,
  presetIcons,
  presetUno,
} from 'unocss'

// https://vitejs.dev/config/
export default defineConfig({
  plugins: [
    vue(),
    UnoCSS({
      rules: [
        [/^m-(\d+)$/, ([, d]) => ({ margin: `${ parseFloat(d) }px` })],
        [/^p-(\d+)$/, ([, d]) => ({ padding: `${ parseFloat(d) }px` })],
      ],
      presets: [
        // 集成了一些工具类，例如tailwindcss等，具体可以去官网查看
        presetUno(),
        // 可以直接在div上写属性
        presetAttributify(),
        // unocss图标
        presetIcons(),
      ]
    })
  ],
  css: {
    postcss: {
      plugins: [PostcssPxToViewPort({ viewportWidth: 1920, viewportHeight: 825 })]
    }
  }
})

main.ts中引入uno.css

import { createApp } from 'vue'
import App from './App.vue'
import 'uno.css'
createApp(App).mount('#app')