溫馨提示×
您好，登錄后才能下訂單哦！
點擊 登錄注冊 即表示同意《億速云用戶服務條款》
您好，登錄后才能下訂單哦！
小編給大家分享一下vue-cli項目使用vw單位的方法，相信大部分人都還不怎么了解，因此分享這篇文章給大家參考一下，希望大家閱讀完這篇文章后大有收獲，下面讓我們一起去了解一下吧！
安裝
命令行輸入：
yarn add postcss-px-to-viewport
或
npm i postcss-px-to-viewport -save -dev
配置
package.json中，在postcss中添加代碼：
"postcss": {
"plugins": {
"autoprefixer": {},
"postcss-px-to-viewport": {
"viewportWidth": 750,
"minPixelValue": 1
}
}
},配置項：
“viewportWidth”: 750, // 設計稿的寬度
“unitPrecision”: 3, // px轉成vw、vh后小數點保留的位數
“minPixelValue”: 1, // 不轉化為vw的最小px值
使用場景
vw與vh會在pc與移動端均產生效果，而不像flexible只會轉換一定寬度（記得是750px）以下設備的px為rem，因此若設計稿為移動端而生，全權使用vw單位會使得頁面在pc端出現字體過大等現象，需酌情處理，根據應用場景自行選擇
vue-cli3.0引入lib-flexible/px2rem
兼容性
vw/vh 單位其實出現比較早了，只是以前支持性不太好，現在隨著瀏覽器的發展，大部分（92%以上）的瀏覽器已經支持了vw/vh
以上是“vue-cli項目使用vw單位的方法”這篇文章的所有內容，感謝各位的閱讀！相信大家都有了一定的了解，希望分享的內容對大家有所幫助，如果還想學習更多知識，歡迎關注億速云行業資訊頻道！
免責聲明：本站發布的內容（圖片、視頻和文字）以原創、轉載和分享為主，文章觀點不代表本網站立場，如果涉及侵權請聯系站長郵箱：is@yisu.com進行舉報，并提供相關證據，一經查實，將立刻刪除涉嫌侵權內容。
