h5 移动端适配
2020-08-20 本文已影响0人
陈海辉
字体大小
设置 html 的 fontSize(设计稿 375px)
;(function (doc, win) {
var docEl = doc.documentElement
var resizeEvt = 'orientationchange' in win ? 'orientationchange' : 'resize'
// 添加监听事件
win.addEventListener(resizeEvt, refreshRem, false)
doc.addEventListener('DOMContentLoaded', refreshRem, false)
// 执行 设置 html 的 fontSize
refreshRem()
function refreshRem() {
var clientWidth = win.innerWidth || doc.documentElement.clientWidth || doc.body.clientWidth
// 当设备宽度为375(iPhone6)时，根元素font-size=16px;
clientWidth && (docEl.style.fontSize = (16 * clientWidth) / 375 + 'px')
}
})(document, window)
设置 px 转 rem(vue.config.js)
// npm i postcss-px2rem
const px2rem = require('postcss-px2rem')
const postcss = px2rem({ remUnit: 16 }) //基准大小 baseSize，需要和rem.js中相同
module.exports = {
css: {
loaderOptions: {
postcss: {
plugins: [
postcss, // 添加到插件里
],
},
},
},
}
安卓字体不居中
<!-- 设置 lang 属性 -->
<html lang="zh-cmn-Hans">
<head>
<style>
body {
// 设置中文字体(第三方UI库可能修改到字体)
font-family: sans-serif !important;
}
</style>
</head>
</html>
