移动端rem适配最简单的方法

智联前端开发模板
web前端开发模板百度云
前端开发模板推荐

第一步:
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设置/
@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}
}

前端开发讲解 ppt模板
.net前端开发模板
前端界面开发模板
赞(0)
前端开发者 » 移动端rem适配最简单的方法
64K

评论 抢沙发

评论前必须登录!