欧美bbbwbbbw肥妇,免费乱码人妻系列日韩,一级黄片

vue3+vite項目H5配置適配步驟詳解

 更新時間：2023年10月26日 10:14:14   作者：張旭超  
這篇文章主要為大家介紹了vue3+vite項目H5配置適配步驟詳解,有需要的朋友可以借鑒參考下,希望能夠有所幫助,祝大家多多進步,早日升職加薪

vue3+vite項目配置適配H5

安裝插件

主要安裝一下兩個插件：

  • amfe-flexible（主要用于動態(tài)設置根元素字體大小(rem)，以根據(jù)屏幕尺寸進行自適應布局）
  • postcss-px-to-viewport-8-plugin（將px單位轉換為rem）

開始配置

第一步、安裝amfe-flexible插件

cnpm install amfe-flexible --save

第二步、在main.js中導入

import { createApp } from 'vue'
import './style.css'
import App from './App.vue'
import 'amfe-flexible'
createApp(App).mount('#app')

第三步、安裝postcss-px-to-viewport-8-plus

cnpm install postcss-px-to-viewport-8-plugin --save

第四步、配置vite.config.ts文件

export default defineConfig({
  plugins: [vue()],
  css: {
    postcss: {
      plugins: [
        postcsspxtoviewport({
          unitToConvert: 'px', // 需要轉換的單位，默認為"px"
          viewportWidth: 390, // 設計稿的視口寬度
          unitPrecision: 5, // 單位轉換后保留的精度
          propList: ['*'], // 能轉化為vw的屬性列表
          viewportUnit: 'vw', // 希望使用的視口單位
          fontViewportUnit: 'vw', // 字體使用的視口單位
          selectorBlackList: [], // 需要忽略的CSS選擇器，不會轉為視口單位，使用原有的px等單位。
          minPixelValue: 1, // 設置最小的轉換數(shù)值，如果為1的話，只有大于1的值會被轉換
          mediaQuery: false, // 媒體查詢里的單位是否需要轉換單位
          replace: true, //  是否直接更換屬性值，而不添加備用屬性
          exclude: undefined, // 忽略某些文件夾下的文件或特定文件，例如 'node_modules' 下的文件
          include: undefined, // 如果設置了include，那將只有匹配到的文件才會被轉換
          landscape: false, // 是否添加根據(jù) landscapeWidth 生成的媒體查詢條件 @media (orientation: landscape)
          landscapeUnit: 'vw', // 橫屏時使用的單位
          landscapeWidth: 390 // 橫屏時使用的視口寬度
        })
      ]
    }
  }
})

以上就是vue3+vite項目H5配置適配步驟詳解的詳細內容，更多關于vue3 vite適配H5配置的資料請關注腳本之家其它相關文章！

相關文章

最新評論