手机按照750px 的设计稿样式排版。页面在750px的屏幕上显示正常
1 var doc = document 2 var docEle = doc.documentElement 3 var width 4 function setRootFontSize(){ 5 width = docEle.getBoundingClientRect().width 6 doc.querySelector('#main').style = `transform: scale(${width / 750})` 7 } 8 setRootFontSize()
在其他尺寸的屏幕上，按照比例进行缩放。
遇到的问题： 由于在样式加载后进行了缩放，所以body的高度没有改变，仍然是缩放之前的高度，所以在页面加载之后需要设置重新设置body的高度，方法如下：
1 function setHeight() { 2 console.log(doc.querySelector('#main').clientHeight) 3 doc.body.style.height = (doc.querySelector('#main').clientHeight * width / 750) + 'px' 4 } 5 if (doc.readyState === "complete") { 6 setHeight() 7 } else { 8 window.onload = setHeight 9 }
document.readystatus 在加载中是loading状态，加载完成之后转为complate状态。需要在此时重新设置body的高度、
完整代码：
<script type="text/javascript">
void function (){
var doc = document
var docEle = doc.documentElement
var width
function setRootFontSize(){
width = docEle.getBoundingClientRect().width
doc.querySelector('#main').style = `transform: scale(${width / 750})`
}
setRootFontSize()
function setHeight() {
console.log(doc.querySelector('#main').clientHeight)
doc.body.style.height = (doc.querySelector('#main').clientHeight * width / 750) + 'px'
}
if (doc.readyState === "complete") {
setHeight()
} else {
window.onload = setHeight
}
}()
</script>
二： 使用rem适配
1: npm install postcss-pxtorem --save-dev
安装postcss的依赖
2: 修改配置文件 .postcssrc.js
1 // https://github.com/michael-ciniawsky/postcss-load-config 2 3 module.exports = { 4 5 "plugins": { 6 // to edit target browsers: use "browserslist" field in package.json 7 "autoprefixer": {}, 8 "postcss-pxtorem": { 9 rootValue: 16, 10 unitPrecision: 5, 11 propWhiteList: [], 12 selectorBlackList: ['className'], 13 replace: true, 14 mediaQuery: false, 15 minPixelValue: 2 16 } 17 } 18 }
这样样式以px为单位，输出的样式为rem单位
