移动端适配方案

Posted on | In |

关于移动端适配方案

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

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;
}

未完待续…