字体适配
2021-02-18 本文已影响0人
jluemmmm
原理：浏览器可以设置字体号大小而改成webview的根字体大小，因为采用rem单位，使得页面呈现比例放大，造成布局混乱，通过html标签增加attr增加size，通过选择器对应上相应的css
设置，获取浏览器字号大小
<html data-size="default"></html>
function getRootFontSize() {
let style = window.getComputedStyle( //返回css样式的属性值
document.getElementsByTagName('html')[0]
)
const map = {
small: '26.6667px',
default: '33.3333px',
middle: '40px',
large: '46.6667px'
}
let size = 'default'
Object.keys(map).forEach( key => {
if (map[key] === style.fontSize) {
size = key
}
})
return size
}
let size = getRootFontSize()
document.documentElement.dataset.size = size
配置各个模式下相应的尺寸
$size-config: (
small: (
scale: 0.8,
asize-width: 222px,
site-category-fontsize: 42px,
side-item-ul-pl: 24px
),
default: (
scale: 1,
asize-width: 222px,
site-category-fontsize: 48px,
side-item-ul-pl: 24px
),
small: (
scale: 1.2,
asize-width: 222px,
site-category-fontsize: 54px,
side-item-ul-pl: 24px
),
small: (
scale: 1.4,
asize-width: 222px,
site-category-fontsize: 66px,
side-item-ul-pl: 24px
)
)
引入sass包中含有layout-generate
import '@****browser/lib-browser-scss/srcminxin.scss'
对应css属性处调用sass函数
.mod-site-aside {
@include layout-generate(w)
}
