element 手机适配_关于手机适配的方案（transform）

手机按照750px 的设计稿样式排版。页面在750px的屏幕上显示正常

1 var doc =document2 var docEle =doc.documentElement3 varwidth4 functionsetRootFontSize(){5 width =docEle.getBoundingClientRect().width6 doc.querySelector('#main').style = `transform: scale(${width / 750})`7 }8 setRootFontSize()

在其他尺寸的屏幕上，按照比例进行缩放。

遇到的问题： 由于在样式加载后进行了缩放，所以body的高度没有改变，仍然是缩放之前的高度，所以在页面加载之后需要设置重新设置body的高度，方法如下：

1 functionsetHeight() {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 =setHeight9 }

document.readystatus 在加载中是loading状态，加载完成之后转为complate状态。需要在此时重新设置body的高度、

完整代码：

void function(){var doc =documentvar docEle =doc.documentElementvarwidthfunctionsetRootFontSize(){

width=docEle.getBoundingClientRect().width

doc.querySelector('#main').style = `transform: scale(${width / 750})`

}

setRootFontSize()functionsetHeight() {

console.log(doc.querySelector('#main').clientHeight)

doc.body.style.height= (doc.querySelector('#main').clientHeight * width / 750) + 'px'}if (doc.readyState === "complete") {

setHeight()

}else{

window.οnlοad=setHeight

}

}()

二： 使用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单位