移动端适配方案

关于移动端适配方案

方案一:根据设计稿切分单位像素

js脚本控制根元素字体。

1
2
let html = document.getElementsByTagName('html')[0];
html.style.fontSize = (window.innerWidth/750) +'px';

以上750是根据设计稿尺寸设定的,这是为了方便CSS设定尺寸。

原理:将屏幕尺寸宽(window.innerWidth)分成750份,而CSS中我们可以根据每一份设对应的Rem值。

1
2
3
4
5
.header {
font-size: 35rem;
width: 750rem;
height: 127rem;
}

以上对应的即是

1
2
3
4
5
.header {
font-size: 35px;
width: 750px;
height: 127px;
}

未完待续…