移动端的适配

1.js适配

屏幕尺寸适配

window.onload =function () {

/*720代表设计师给的设计稿的宽度，你的设计稿是多少，就写多少;100代表换算比例，这里写100是

  为了以后好算,比如，你测量的一个宽度是100px,就可以写为1rem,以及1px=0.01rem等等*/

  getRem(750, 100);

};

window.onresize =function () {

getRem(750, 100);

};

function getRem(pwidth, prem) {

var html =document.getElementsByTagName("html")[0];

  var oWidth =

document.body.clientWidth ||document.documentElement.clientWidth;

  html.style.fontSize = (oWidth / pwidth) * prem +"px";

}

---

2.css适配

@media (min-width: 320px) {

html{

font-size:42.67px;

}

}

@media (min-width: 360px) {

html{

font-size: 48px;

}

}

@media (min-width: 375px) {

html{

font-size: 50px;

}

}

@media (min-width: 414px) {

html{

font-size: 55.2px;

}

}