vue3+vite使用postcss-pxtorem、autoprefixer自適應(yīng)和自動添加前綴
更新時(shí)間:2022年10月20日 09:31:19 作者:RainHg
這篇文章主要介紹了vue3+vite使用postcss-pxtorem、autoprefixer自適應(yīng)和自動添加前綴方式,具有很好的參考價(jià)值,希望對大家有所幫助。如有錯誤或未考慮完全的地方,望不吝賜教
自動添加前綴:
自適應(yīng):
1、安裝 postcss-pxtorem 和 autoprefixer
npm install postcss-pxtorem --save npm i autoprefixer
2、vite.config.js引入并配置
import vue from '@vitejs/plugin-vue' import { resolve } from 'path' // 引入?? import postCssPxToRem from 'postcss-pxtorem' import autoprefixer from 'autoprefixer' const pathResolve = (dir) => { return resolve(__dirname, ".", dir) } const alias = { '@': pathResolve("src") } export default ({ command }) => { const prodMock = true; return { base: './', resolve: { alias }, server: { port: 3004, host: '0.0.0.0', open: true, }, build: { rollupOptions: { output: { manualChunks: { } } } }, plugins: [ vue(), ], css: { postcss: { // ??關(guān)鍵代碼 plugins: [ postCssPxToRem({ // 自適應(yīng),px>rem轉(zhuǎn)換 rootValue: 16, // 1rem的大小 propList: ['*'], // 需要轉(zhuǎn)換的屬性,這里選擇全部都進(jìn)行轉(zhuǎn)換 }), autoprefixer({. // 自動添加前綴 overrideBrowserslist: [ "Android 4.1", "iOS 7.1", "Chrome > 31", "ff > 31", "ie >= 8" //'last 2 versions', // 所有主流瀏覽器最近2個版本 ], grid: true }) ] }, } }; }
3、App.vue(自適應(yīng)才需要)
<template> <div id="app"> </div> </template> <script setup> // 自適應(yīng) function resize() { let fs = document.body.clientWidth / 75; // 上面的75是根據(jù)設(shè)計(jì)圖尺寸修改,例如設(shè)計(jì)圖寬為1220,給左右兩邊各留10px,即1220-20=1200,1200/16(字體大小)等于75 if (fs > 16) { // 控制字體大小,以免過大過小 fs = 16; } else if (fs < 14) { fs = 14; } // ??注意這里不能直接document.body.style document.body.parentNode.style = "font-size: " + fs + "px;"; } resize(); window.onresize = resize; </script>
以上為個人經(jīng)驗(yàn),希望能給大家一個參考,也希望大家多多支持腳本之家。
相關(guān)文章
vue如何導(dǎo)出json數(shù)據(jù)為excel表格并保存到本地
這篇文章主要介紹了vue如何導(dǎo)出json數(shù)據(jù)為excel表格并保存到本地問題,具有很好的參考價(jià)值,希望對大家有所幫助,如有錯誤或未考慮完全的地方,望不吝賜教2024-07-07vue.js的狀態(tài)管理vuex中store的使用詳解
今天小編就為大家分享一篇vue.js的狀態(tài)管理vuex中store的使用詳解,具有很好的參考價(jià)值,希望對大家有所幫助。一起跟隨小編過來看看吧2019-11-11Vue 清除Form表單校驗(yàn)信息的解決方法(清除表單驗(yàn)證上次提示信息)
這篇文章主要介紹了Vue 清除Form表單校驗(yàn)信息的解決方法(清除表單驗(yàn)證上次提示信息),本文通過實(shí)例代碼給大家介紹的非常詳細(xì),對大家的學(xué)習(xí)或工作具有一定的參考借鑒價(jià)值,需要的朋友可以參考下2023-04-04vue中v-for循環(huán)給標(biāo)簽屬性賦值的方法
這篇文章主要介紹了vue中v-for循環(huán)給標(biāo)簽屬性賦值的方法,非常不錯,具有一定的參考借鑒價(jià)值,需要的朋友可以參考下2018-10-10vue中全局路由守衛(wèi)中替代this操作(this.$store/this.$vux)
這篇文章主要介紹了vue中全局路由守衛(wèi)中替代this操作(this.$store/this.$vux),具有很好的參考價(jià)值,希望對大家有所幫助。一起跟隨小編過來看看吧2020-07-07