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

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表格并保存到本地

    這篇文章主要介紹了vue如何導(dǎo)出json數(shù)據(jù)為excel表格并保存到本地問題,具有很好的參考價(jià)值,希望對大家有所幫助,如有錯誤或未考慮完全的地方,望不吝賜教
    2024-07-07
  • vue.js的狀態(tài)管理vuex中store的使用詳解

    vue.js的狀態(tài)管理vuex中store的使用詳解

    今天小編就為大家分享一篇vue.js的狀態(tài)管理vuex中store的使用詳解,具有很好的參考價(jià)值,希望對大家有所幫助。一起跟隨小編過來看看吧
    2019-11-11
  • Vue 清除Form表單校驗(yàn)信息的解決方法(清除表單驗(yàn)證上次提示信息)

    Vue 清除Form表單校驗(yàn)信息的解決方法(清除表單驗(yàn)證上次提示信息)

    這篇文章主要介紹了Vue 清除Form表單校驗(yàn)信息的解決方法(清除表單驗(yàn)證上次提示信息),本文通過實(shí)例代碼給大家介紹的非常詳細(xì),對大家的學(xué)習(xí)或工作具有一定的參考借鑒價(jià)值,需要的朋友可以參考下
    2023-04-04
  • Vue?Token過期問題的2種解決方案小結(jié)

    Vue?Token過期問題的2種解決方案小結(jié)

    在使用token進(jìn)行登錄的過程中,如果token過期了,需要重新輸入用戶名和密碼登錄,這種體驗(yàn)肯定是不好的,下面這篇文章主要給大家介紹了關(guān)于Vue?Token過期問題的2種解決方案,需要的朋友可以參考下
    2023-02-02
  • VUE 記賬憑證模塊組件的示例代碼

    VUE 記賬憑證模塊組件的示例代碼

    這篇文章主要介紹了VUE記賬憑證模塊組件的實(shí)例代碼,代碼簡單易懂,對大家的學(xué)習(xí)或工作具有一定的參考借鑒價(jià)值,需要的朋友可以參考下
    2022-03-03
  • vue中v-for循環(huán)給標(biāo)簽屬性賦值的方法

    vue中v-for循環(huán)給標(biāo)簽屬性賦值的方法

    這篇文章主要介紹了vue中v-for循環(huán)給標(biāo)簽屬性賦值的方法,非常不錯,具有一定的參考借鑒價(jià)值,需要的朋友可以參考下
    2018-10-10
  • Vue3.0的優(yōu)化總結(jié)

    Vue3.0的優(yōu)化總結(jié)

    在本篇文章里小編給大家整理的是一篇關(guān)于Vue3.0的優(yōu)化總結(jié)內(nèi)容,有需要的朋友們可以學(xué)習(xí)下。
    2020-10-10
  • vue中全局路由守衛(wèi)中替代this操作(this.$store/this.$vux)

    vue中全局路由守衛(wèi)中替代this操作(this.$store/this.$vux)

    這篇文章主要介紹了vue中全局路由守衛(wèi)中替代this操作(this.$store/this.$vux),具有很好的參考價(jià)值,希望對大家有所幫助。一起跟隨小編過來看看吧
    2020-07-07
  • Vue中Mustache插值語法與v-bind指令詳解

    Vue中Mustache插值語法與v-bind指令詳解

    在Vue中通過Mustache語法(雙大括號)將data中的文本數(shù)據(jù)插入到HTML中,下面這篇文章主要給大家介紹了關(guān)于Vue中Mustache插值語法與v-bind指令的相關(guān)資料,文中通過實(shí)例代碼介紹的非常詳細(xì),需要的朋友可以參考下
    2022-10-10
  • 如何使用vite搭建vue3項(xiàng)目詳解

    如何使用vite搭建vue3項(xiàng)目詳解

    Vite 是一個面向現(xiàn)代瀏覽器的更輕,更快的web應(yīng)用開發(fā)工具,下面這篇文章主要給大家介紹了關(guān)于如何使用vite搭建vue3項(xiàng)目的相關(guān)資料,文中通過實(shí)例代碼介紹的非常詳細(xì),需要的朋友可以參考下
    2022-07-07

最新評論