您好,登錄后才能下訂單哦!
本篇內(nèi)容主要講解“vue項目適配大屏端的方法”,感興趣的朋友不妨來看看。本文介紹的方法操作簡單快捷,實用性強。下面就讓小編來帶大家學(xué)習(xí)“vue項目適配大屏端的方法”吧!
首先rem是css單位,相比于px固定的像素單位,rem更加的靈活,還有現(xiàn)在也比較好的vm。如果從未了解過,可以先過過眼
rem自適應(yīng)。CSS3的REM設(shè)置字體大小
font size of the root element.
簡單來說,rem就是根據(jù)html元素的字體大小來計算單位的。我們的需求就是說,根據(jù)不同的分辨率,我們元素的大小能夠有所對應(yīng)的變化,在視覺上能夠做到很舒服的效果。想想我們在做pc端的時候,一般都是中間固定比如1200px像素,然后最小1200px,兩邊留白,這樣我們無論放大縮小都不會影響效果。但是現(xiàn)在移動端各種屏幕的出現(xiàn),適應(yīng)性就更加的強烈。根據(jù)分辨率的不同讓html的字體大小變化,我們在頁面中寫rem,由于rem是相對于根元素字體大小來計算的,那么就可以實現(xiàn)自適應(yīng)的效果。
適配方案采用rem布局, 根據(jù)屏幕分辨率大小不同,調(diào)整根元素html的font-size, 從而達(dá)到每個元素寬高自動變化,適配不同屏幕
安裝 npm install postcss-px2rem-exclude --save-dev
在項目根目錄創(chuàng)建 postcss.config.js 文件
module.exports = { plugins: { autoprefixer: {}, 'postcss-px2rem-exclude': { remUnit: 192 // exclude: /node_modules|folder_name/i, } } }
安裝命令 npm install lib-flexible
(function(win, lib) { var doc = win.document var docEl = doc.documentElement var metaEl = doc.querySelector('meta[name="viewport"]') var flexibleEl = doc.querySelector('meta[name="flexible"]') var dpr = 0 var scale = 0 var tid var flexible = lib.flexible || (lib.flexible = {}) if (metaEl) { console.warn('將根據(jù)已有的meta標(biāo)簽來設(shè)置縮放比例') var match = metaEl .getAttribute('content') // eslint-disable-next-line no-useless-escape .match(/initial\-scale=([\d\.]+)/) if (match) { scale = parseFloat(match[1]) dpr = parseInt(1 / scale) } } else if (flexibleEl) { var content = flexibleEl.getAttribute('content') if (content) { // eslint-disable-next-line no-useless-escape var initialDpr = content.match(/initial\-dpr=([\d\.]+)/) // eslint-disable-next-line no-useless-escape var maximumDpr = content.match(/maximum\-dpr=([\d\.]+)/) if (initialDpr) { dpr = parseFloat(initialDpr[1]) scale = parseFloat((1 / dpr).toFixed(2)) } if (maximumDpr) { dpr = parseFloat(maximumDpr[1]) scale = parseFloat((1 / dpr).toFixed(2)) } } } if (!dpr && !scale) { // var isAndroid = win.navigator.appVersion.match(/android/gi); var isIPhone = win.navigator.appVersion.match(/iphone/gi) var devicePixelRatio = win.devicePixelRatio if (isIPhone) { // iOS下,對于2和3的屏,用2倍的方案,其余的用1倍方案 if (devicePixelRatio >= 3 && (!dpr || dpr >= 3)) { dpr = 3 } else if (devicePixelRatio >= 2 && (!dpr || dpr >= 2)) { dpr = 2 } else { dpr = 1 } } else { // 其他設(shè)備下,仍舊使用1倍的方案 dpr = 1 } scale = 1 / dpr } docEl.setAttribute('data-dpr', dpr) if (!metaEl) { metaEl = doc.createElement('meta') metaEl.setAttribute('name', 'viewport') metaEl.setAttribute('content', 'initial-scale=' + scale + ', maximum-scale=' + scale + ', minimum-scale=' + scale + ', user-scalable=no') if (docEl.firstElementChild) { docEl.firstElementChild.appendChild(metaEl) } else { var wrap = doc.createElement('div') wrap.appendChild(metaEl) doc.write(wrap.innerHTML) } } function refreshRem() { var width = docEl.getBoundingClientRect().width if (width / dpr > 540) { width = width * dpr } var rem = width / 10 docEl.style.fontSize = rem + 'px' flexible.rem = win.rem = rem } win.addEventListener( 'resize', function() { clearTimeout(tid) tid = setTimeout(refreshRem, 300) }, false ) win.addEventListener( 'pageshow', function(e) { if (e.persisted) { clearTimeout(tid) tid = setTimeout(refreshRem, 300) } }, false ) if (doc.readyState === 'complete') { doc.body.style.fontSize = 12 * dpr + 'px' } else { doc.addEventListener( 'DOMContentLoaded', function() { doc.body.style.fontSize = 12 * dpr + 'px' }, false ) } refreshRem() flexible.dpr = win.dpr = dpr flexible.refreshRem = refreshRem flexible.rem2px = function(d) { var val = parseFloat(d) * this.rem if (typeof d === 'string' && d.match(/rem$/)) { val += 'px' } return val } flexible.px2rem = function(d) { var val = parseFloat(d) / this.rem if (typeof d === 'string' && d.match(/px$/)) { val += 'rem' } return val } })(window, window['lib'] || (window['lib'] = {}))
上面的代碼與安裝的flexible.js不同
修改了
function refreshRem() { var width = docEl.getBoundingClientRect().width if (width / dpr > 540) { width = width * dpr } var rem = width / 10 docEl.style.fontSize = rem + 'px' flexible.rem = win.rem = rem }
在main.js中引入
import '路徑/flexible.js'
到此,相信大家對“vue項目適配大屏端的方法”有了更深的了解,不妨來實際操作一番吧!這里是億速云網(wǎng)站,更多相關(guān)內(nèi)容可以進(jìn)入相關(guān)頻道進(jìn)行查詢,關(guān)注我們,繼續(xù)學(xué)習(xí)!
免責(zé)聲明:本站發(fā)布的內(nèi)容(圖片、視頻和文字)以原創(chuàng)、轉(zhuǎn)載和分享為主,文章觀點不代表本網(wǎng)站立場,如果涉及侵權(quán)請聯(lián)系站長郵箱:is@yisu.com進(jìn)行舉報,并提供相關(guān)證據(jù),一經(jīng)查實,將立刻刪除涉嫌侵權(quán)內(nèi)容。