移动端是怎么做适配的？

1.移动端可以使用媒体查询来区分手机和PC，格式为

@media(查询条件1) and (查询条件2){

      selector{           }

}

查询的结果也可以是一个css文件，如<link rel="stylesheet" href="./style.css" media="(max-width: 320px)">

2.手机端需要在head里加<meta name="viewport" content="width=device-width,user-scalable=no,initial-scale=1.0,maximum=1.0,minimum-scale=1.0">来控制手机不能缩放

3.PC端可以直接设置宽度，但手机根据机型的不同会有不同的宽度，可以使用动态rem解决这一问题，var pageWidth = document.innerWidth

document.write('<style>html{font-size:' + pageWidth + 'px;}</style>')可以设置1rem等于根元素的font-size，也等于页面宽度，也可以设置1rem等于页面宽度的十分之一，这样通过rem就可以控制宽度和高度。