移动端rem使用

版权声明:本文为博主原创文章,未经博主允许不得转载。

 

前言

移动端适配常见方案,em、rem、媒体查询(media)、百分比,今天简单说一下rem的使用。

设计稿

移动端设计稿和PC有些不同,因为需要适配,不像PC定死宽度,写死就好了,所以设计稿不管是320、640、750还是多少,都需要一个公式去转换,这样每个分辨率显示出的效果才会是一样的。

设计稿最小字体问题

这个是我最近写页面时候发现的,750的设计稿,上面发现了12px的字体,可能你会觉得很正常,这能出现什么问题呢?问题就在于适配,因为浏览器正常支持的最小字体是12px,这样假如你的设计稿是750或者更高,这里就涉及到一个最小字体的问题,这种设计稿到底最小设计多大的字体,适配或者说是转换字体的时候才会转换成12px的字体呢,我去做了一下测试,结果就不发了,很好理解,设计稿尺寸越大,所支持的最小字体也就越大。

如果还有不明白的我来举个栗子:如果页面是1000px的设计稿,里面的字体最小是12px,然后1000px的设计稿在320的屏幕上放要等比例缩小,试问12px的字体等比例缩小是什么效果呢?缩小到4px?3px?还是2px?别闹了~大兄弟,别说浏览器不支持这么小的字体,就算是支持,你能看得清2px的字体吗?所以设计需谨慎~

原理

rem是根据html元素的font-size去进行解析的,所以记得提前设置一个默认的值,例如62.5%.

meta标签

手机端我们还需要加入viewport的meta标签,如下:

1
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">

使用

先来看一段代码:

1
2
3
4
5
6
7
8
9
10
11
12
13
(function(doc, win) {
var docEl = doc.documentElement,
resizeEvt = 'orientationchange' in window ? 'orientationchange' : 'resize',
recalc = function() {
var clientWidth = docEl.clientWidth;
if (!clientWidth) return;
docEl.style.fontSize = 100 * (clientWidth / 720) + 'px';
};
if (!doc.addEventListener) return;
win.addEventListener(resizeEvt, recalc, false);
doc.addEventListener('DOMContentLoaded', recalc, false);
})(document, window);

这是把rem值转换成px的js代码,其中里面的720是设计稿的尺寸,100是基数,设计稿是640就把720改成640,基数尽量不要太小,太小转换完会出问题;

计算公式

css元素宽度(rem) = 设计稿元素宽度(px)/基数(100)

总结

rem适合纯移动端web站,em其实和rem差不多,不知道的自行百度吧,百分比在一些等分布局中可以用,我们常说的响应式网站就是媒体查询了,响应式的优点和缺点都很明显,优点是不用维护两份程序,缺点是一份程序兼容pc,移动。程序明显臃肿,更费流量!