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

69 阅读 0 评论 46 点赞

我是靠谱客的博主幸福鞋子，最近开发中收集的这篇文章主要介绍关于手机适配的方案（transform），觉得挺不错的，现在分享给大家，希望可以做个参考。

概述

手机按照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 }