屏幕適配尺寸:
① 室內(nèi)P1.5全彩屏:尺寸3.84 * 2.5 = 9.6平米白对;分辨率2064 * 1290
② 顯示尺寸98inch,分辨率3840 * 2160迁沫,顯示比例16 : 9
適配按16:9
1、px 轉(zhuǎn)換 rem:
使用統(tǒng)一的轉(zhuǎn)換插件 flexible.js
(function(win, lib) {
let doc = win.document
let docEl = doc.documentElement
let metaEl = doc.querySelector('meta[name="viewport"]')
let flexibleEl = doc.querySelector('meta[name="flexible"]')
let dpr = 0
let scale = 0
let tid
let flexible = lib.flexible || (lib.flexible = {})
if (metaEl) {
console.warn('將根據(jù)已有的meta標(biāo)簽來(lái)設(shè)置縮放比例')
let match = metaEl.getAttribute('content').match(/initial\-scale=([\d\.]+)/)
if (match) {
scale = parseFloat(match[1])
dpr = parseInt(1 / scale)
}
} else if (flexibleEl) {
let content = flexibleEl.getAttribute('content')
if (content) {
let initialDpr = content.match(/initial\-dpr=([\d\.]+)/)
let 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) {
let isAndroid = win.navigator.appVersion.match(/android/gi)
let isIPhone = win.navigator.appVersion.match(/iphone/gi)
let devicePixelRatio = win.devicePixelRatio
if (isIPhone) {
// iOS下,對(duì)于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 {
let wrap = doc.createElement('div')
wrap.appendChild(metaEl)
doc.write(wrap.innerHTML)
}
}
function refreshRem() {
let width = docEl.getBoundingClientRect().width
if (width / dpr > 540) {
width = width * dpr
}
let 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(e) {
doc.body.style.fontSize = 12 * dpr + 'px'
}, false)
}
refreshRem()
flexible.dpr = win.dpr = dpr
flexible.refreshRem = refreshRem
flexible.rem2px = function(d) {
let val = parseFloat(d) * this.rem
if (typeof d === 'string' && d.match(/rem$/)) {
val += 'px'
}
return val
}
flexible.px2rem = function(d) {
let val = parseFloat(d) / this.rem
if (typeof d === 'string' && d.match(/px$/)) {
val += 'rem'
}
return val
}
})(window, window['lib'] || (window['lib'] = {}))
安裝 px2rem-loader
npm install px2rem-loader --save-dev
配置 px2rem-loader
vue-cli 2.x
在build/utils.js中肠鲫,找到exports.cssLoaders
const px2remLoader = {
loader: 'px2rem-loader',
options: {
// 以設(shè)計(jì)稿1920為例, 1920 / 10 = 192.0
remUnit: 192.0
}
}
繼續(xù)找到generateLoaders中的loaders配置或粮,作出如下配置:
// 注釋掉這一行
// const loaders = options.usePostCSS ? [cssLoader, postcssLoader] : [cssLoader]
// 修改為
const loaders = options.usePostCSS ? [cssLoader, postcssLoader,px2remLoader] : [cssLoader,px2remLoader]
vue-cli 3.x
vue.config.js
module.exports = {
css: {
loaderOptions: {
css: {},
postcss: {
plugins: [
require('postcss-px2rem')({
// 以設(shè)計(jì)稿1920為例导饲, 1920 / 10 = 192.0
remUnit: 192.0
}),
]
}
}
},
}
注意說(shuō)明:
1、有關(guān)px的樣式不能寫(xiě)內(nèi)聯(lián)樣式(style),只能寫(xiě)class
2、最外層圖層寬高可使用100vw渣锦,100vh硝岗。內(nèi)部模塊視情況而定(可采用百分比或者px),建議高度使用vh袋毙。
3型檀、自適應(yīng)屏幕的前提需要保證最終大屏尺寸完整適配,在兼容其他設(shè)備屏幕適配听盖。
4胀溺、文字的大小,圖片的大小不能默認(rèn)適配皆看,必須設(shè)置寬高尺寸仓坞,文字尺寸,不然無(wú)法轉(zhuǎn)換rem腰吟。切換大屏尺寸大小不會(huì)改變无埃。
2、Echarts 適配方案:
1毛雇、畫(huà)布的大小可設(shè)置百分比嫉称,讓畫(huà)布隨著父視圖改變,也可設(shè)置px灵疮。
2澎埠、Echarts 文字大小,布局位置可按函數(shù)(echartsSize)轉(zhuǎn)換始藕。
/* Echarts圖表字體蒲稳、間距自適應(yīng) */
// 以設(shè)計(jì)稿1920為例
export const echartsSize = (size, defalteWidth = 1920) => {
let clientWidth = window.innerWidth || document.documentElement.clientWidth || document.body.clientWidth
if (!clientWidth) return size
let scale = (clientWidth / defalteWidth)
return Number((size * scale).toFixed(3))
}
// 將其掛載到原型鏈上,方便全局可使用
Vue.prototype.echartsSize = echartsSize
使用說(shuō)明:
fontSize: this.echartsSize(12),
radius: [this.echartsSize(30), this.echartsSize(140)],
3伍派、 px 轉(zhuǎn) vh vw
使用@mixin @include
$defalteWidth: 1920; // 設(shè)計(jì)尺寸
$defalteHeight: 1080;
$widthScale: 100/$defalteWidth;
$heightScale: 100/$defalteHeight;
@mixin height($radius) {
height:($radius*heightScale)*1vh;
}
@mixin line-height($radius) {
// line-height: $radius;
line-height:($radius*heightScale)*1vh;
}
@mixin width($radius) {
// width: $radius;
width:($radius*defalteWidth)*1vw;
}
@mixin p-l($radius) {
// padding-left: $radius;
padding-left:($radius*defalteWidth)*1vw;
}
@mixin p-r($radius) {
// padding-right: $radius;
padding-right:($radius*defalteWidth)*1vw;
}
@mixin p-t($radius) {
// padding-top: $radius;
padding-top:($radius*defalteWidth)*1vh;
}
@mixin p-b($radius) {
// padding-bottom: $radius;
padding-bottom:($radius*defalteWidth)*1vh;
}
@mixin m-l($radius) {
// margin-left: $radius;
margin-left:($radius*defalteWidth)*1vw;
}
@mixin m-r($radius) {
// margin-right: $radius;
margin-right:($radius*defalteWidth)*1vw;
}
@mixin m-t($radius) {
// margin-top: $radius;
margin-top:($radius*defalteWidth)*1vh;
}
@mixin m-b($radius) {
// margin-bottom: $radius;
margin-bottom:($radius*defalteWidth)*1vh;
}
@mixin top($radius) {
// margin-bottom: $radius;
top:($radius*defalteWidth)*1vh;
}
@mixin bottom($radius) {
// margin-bottom: $radius;
bottom:($radius*defalteWidth)*1vh;
}
@mixin right($radius) {
// margin-bottom: $radius;
right:($radius*defalteWidth)*1vh;
}
@mixin left($radius) {
// margin-bottom: $radius;
left:($radius*defalteWidth)*1vh;
}
// 自行添加需要的屬性
@include height(240px);
使用建議
寬高可使用vw/vh,但是需要設(shè)置最小寬高度江耀,以免小屏壓縮排班錯(cuò)位
字體尺寸使用rem
Echarts圖標(biāo)尺寸使用echartsSize轉(zhuǎn)換