亚洲乱码中文字幕综合,中国熟女仑乱hd,亚洲精品乱拍国产一区二区三区,一本大道卡一卡二卡三乱码全集资源,又粗又黄又硬又爽的免费视频

vue3+vite使用postcss-pxtorem、autoprefixer自適應和自動添加前綴

 更新時間:2022年10月20日 09:31:19   作者:RainHg  
這篇文章主要介紹了vue3+vite使用postcss-pxtorem、autoprefixer自適應和自動添加前綴方式,具有很好的參考價值,希望對大家有所幫助。如有錯誤或未考慮完全的地方,望不吝賜教

自動添加前綴:

自適應:

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: { // ??關鍵代碼
                plugins: [
                    postCssPxToRem({ // 自適應,px>rem轉(zhuǎn)換
                        rootValue: 16, // 1rem的大小
                        propList: ['*'], // 需要轉(zhuǎ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(自適應才需要)

<template>
	<div id="app">
	</div>
</template> 
 
<script setup>
	// 自適應
	function resize() {
		let fs = document.body.clientWidth / 75; 
        // 上面的75是根據(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)驗,希望能給大家一個參考,也希望大家多多支持腳本之家。

相關文章

  • vue如何導出json數(shù)據(jù)為excel表格并保存到本地

    vue如何導出json數(shù)據(jù)為excel表格并保存到本地

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

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

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

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

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

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

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

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

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

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

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

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

    在本篇文章里小編給大家整理的是一篇關于Vue3.0的優(yōu)化總結(jié)內(nèi)容,有需要的朋友們可以學習下。
    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),具有很好的參考價值,希望對大家有所幫助。一起跟隨小編過來看看吧
    2020-07-07
  • Vue中Mustache插值語法與v-bind指令詳解

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

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

    如何使用vite搭建vue3項目詳解

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

最新評論