实例代码：
废土坱行
* {
margin: 0;
padding: 0;
}
.downloadBtn {
width: 12rem;
height: 3.6rem;
background: red;
position: absolute;
left: 50%;
top: 29.6rem;
margin-left: -6rem;
font-size: 1rem;
}
立即下载
function initWidth() {
document.getElementById("contentImg").style.width = document.documentElement.clientWidth + 'px'
}
function initFontSize() {
const cw = document.documentElement.clientWidth
// width: 375px -> fontSize:16px
if (cw == 375) {
document.documentElement.style.fontSize = '16px'
} else {
document.documentElement.style.fontSize = cw / 375 * 16 + 'px'
}
}
initWidth()
initFontSize()
window.onresize = () => {
initWidth()
initFontSize()
}
思路简介：
1、首先，界面布局的尺寸采用rem单位。
2、然后，通过设置根节点(html)的 font-size 的 px 值 来影响 rem 的实际大小。
3、最后，通过 js 来实时控制font-size 的大小，等比例变换即可。
效果演示：
标准尺寸下(iphone6)：
其它设备上(比如iphone5)：
注：可以看到我这个“立即下载”的按钮位置基本上是可以和img对上的。
