移动端-网易-rem适配

2016-08-23 | 阅读：次

第一步：

media标签写在head里面：

<meta name="viewport" content="width=device-width,initial-scale=1,maximum-scale=1,minimum-scale=1,user-scalable=no" />

第二步：加载头部script

<!--定义rem值：网易移动适配方案！-->
<script>
        document.documentElement.style.fontSize = document.documentElement.clientWidth / 7.5 + 'px';
</script>

附注：7.5是根据你的设计稿的width决定写多少，如果是640的，那就写6.4；其他道理一样！

第三部：在css样式里，一个div如果是宽500px 高200px；那么就是这样写：

div{
    width:5rem;
    height:2rem
}

字体不用rem；直接写像素！就是这么简单！

@media screen and (max-width:321px){
    .m-navlist{font-size:15px}
}

@media screen and (min-width:321px) and (max-width:400px){
    .m-navlist{font-size:16px}
}

@media screen and (min-width:400px){
    .m-navlist{font-size:18px}
}

转载请注明原地址，冼国基的博客：https://xianguoji.github.io 谢谢！