适配移动端

移动端是怎么做适配的？

1.针对移动端的页面须添加viewport元标签
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
用width设置视口的宽度，设为device-width即设为设备宽度。用initial-scale设置页面最初加载时的缩放比例。用maximum-scale或者minimum-scale，user-scalable设置允许用户以怎样的方式放大或缩小页面。
2.针对用于移动端的样式添加媒体查询。
比如可引入外部 CSS 文件，该文件仅在设备宽度小于 500 像素时生效，只要在<link></link>中添加media="(max-width:500px)"属性即可。
或者把用于移动端的样式写在

<style>
@media(max-width:500px) and (min-width:200px){  
   // 这里的样式只对视口宽度在200px~500px之间起效
    }
</style>

3.使用动态REM实现自适应
在js中使用window.innerWidth获取到视口的宽度pageWidth

<meta name="viewport" content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
 <script>
var pageWidth = window.innerWidth
document.write('<style>html{font-size:}'+pageWidth+'px;</style>')  //将rem设为与pageWidth的值相等。
 </script>
//将需要实现的布局使用rem为单位的比例设置即可实现完美响应。