溫馨提示×
您好，登錄后才能下訂單哦！
點擊 登錄注冊 即表示同意《億速云用戶服務條款》
您好，登錄后才能下訂單哦！
這篇文章主要為大家展示了如何實現vue cli3適配所有端方案，內容簡而易懂，希望大家可以學習一下，學習完之后肯定會有收獲的，下面讓小編帶大家一起來看看吧。
應用場景
頁面需要在pc端和移動端同時兼容，以前我的方案都是使用媒體查詢來判斷當前設備大小，然后寫兩套或者三套css代碼來兼容他們，能達到目的，并且效果不錯，但是感覺還是稍微麻煩了一丟丟。后面了解了一下flexable.js腳本，稍作修改，基本可以滿足我的需求。
postcss-px2rem
yarn add postcss-px2rem
postcss-px2rem插件可以將px轉為rem,需要在vue.config.js(項目沒有的話就手動創建一個)中配置插件
// css相關配置
css: {
// 啟用 CSS modules
modules: false,
// 是否使用css分離插件
extract: true,
// 開啟 CSS source maps?
sourceMap: false,
// css預設器配置項
loaderOptions: {
css: {},
postcss: {
plugins: [
//remUnit這個配置項的數值是多少呢？？？ 通常我們是根據設計圖來定這個值，原因很簡單，便于開發。
//假如設計圖給的寬度是750，我們通常就會把remUnit設置為75，這樣我們寫樣式時，可以直接按照設計圖標注的寬高來1:1還原開發。
require('postcss-px2rem')({
remUnit: 75
})
]
}
},
}flexible.js
flexible會為頁面根據屏幕自動添加標簽，動態控制initial-scale，maximum-scale，minimum-scale等屬性的值 ===>設備縮放比
所以，在我們的html的header中，就不要之前配置的viewport的meta標簽了
<meta name="viewport"
content="width=device-width, viewport-fit=cover, initial-scale=1, maximum-scale=1, minimum-scale=1, user-scalable=no">這種標簽flexble會自動幫我們加上。
下面附上修改完后的flexble腳本代碼：
(function flexible (window, document) {
var docEl = document.documentElement
var dpr = window.devicePixelRatio || 1
var isMobileDevice = /(iPhone|iPad|iPod|iOS|Android)/i.test(navigator.userAgent);
dpr = isMobileDevice ? dpr : 1;
// adjust body font size
function setBodyFontSize () {
if (document.body) {
document.body.style.fontSize = (12 * dpr) + 'px'
}
else {
document.addEventListener('DOMContentLoaded', setBodyFontSize)
}
}
setBodyFontSize();
// set 1rem = viewWidth / 10
function setRemUnit () {
let width = docEl.clientWidth
// 下面5行為自己加的代碼，pc端頁面不轉rem
let remUnitConfig = 75
let viewWidthMax = remUnitConfig * 10
if (width / dpr > viewWidthMax) {
width = viewWidthMax * dpr
}
var rem = width / 10
docEl.style.fontSize = rem + 'px'
}
setRemUnit()
// reset rem unit on page resize
window.addEventListener('resize', setRemUnit)
window.addEventListener('pageshow', function (e) {
if (e.persisted) {
setRemUnit()
}
})
// detect 0.5px supports
if (dpr >= 2) {
var fakeBody = document.createElement('body')
var testElement = document.createElement('div')
testElement.style.border = '.5px solid transparent'
fakeBody.appendChild(testElement)
docEl.appendChild(fakeBody)
if (testElement.offsetHeight === 1) {
docEl.classList.add('hairlines')
}
docEl.removeChild(fakeBody)
}
}(window, document))最后需要在index.html中引入腳本：
flexble.js要和index.html文件同級
最后在head添加js標簽，引入它：
<script src="flexible.js" type="text/javascript" charset="utf-8"></script>
自此，項目就配置完了。
以上就是關于如何實現vue cli3適配所有端方案的內容，如果你們有學習到知識或者技能，可以把它分享出去讓更多的人看到。
免責聲明：本站發布的內容（圖片、視頻和文字）以原創、轉載和分享為主，文章觀點不代表本網站立場，如果涉及侵權請聯系站長郵箱：is@yisu.com進行舉報，并提供相關證據，一經查實，將立刻刪除涉嫌侵權內容。
