移动端rem适配,最简单的方法!!!设计师都能用的!!!

原创 1549607208 随笔 移动端rem适配 1.5k阅读 2017-05-23 17:49:08 举报

个人是个UI设计师,公司前段时间需要做个移动端商城的项目,正好前端有事,主管之前知道我会点前端,就让我做,可把我害惨了。在网上看了很多移动端适配的方案,文章前后几千字,罗里吧嗦的一大段,看到结尾只懂点概念!所以我直接把我的办法写出了!

第一步:
media标签写在head里面:
[color=#ff0000]<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}
}

评论 ( 5 )
最新评论
zkfkevin 2F 2017-06-16 15:09:01 5F

移动端,字体还是用px的比较好,其他的度量都用rem

1549607208 2F 2017-05-24 17:34:08 4F

人家网易用的都是像素,个人习惯个人爱好,用rem大分辨率字体比小屏幕大啊 !

1549607208 1F 2017-05-24 17:30:35 3F

根部字体1rem是100px,取100更好算!

河北秦皇岛88 2017-05-24 16:47:30 2F

移动端适配你说字体不用rem还用px?

bingbing2bb 2017-05-24 10:30:53 1F

500px 换算成rem应该是10rem吧?
5rem 是250px