最近项目重构,又扯到移动端的适配问题。
移动端适配的方式也很多, 什么媒体查询呀,百分比,响应式布局等等,这里就不多说了,小伙伴可以自行去网上看看。
这里提到的是通过 rem 来适配移动端。
提到rem,首先想到的是 rem是什么?
rem(font size of the root element)是指相对于根元素的字体大小的单位。简单的说它就是一个相对单位。看到rem大家一定会想起em单位,em(font size of the element)是指相对于父元素的字体大小的单位。它们之间其实很相似,只不过一个计算的规则是依赖根元素一个是依赖父元素计算。
如下代码,相信很多做移动端的都见过,这段js代码可以有效适配任何移动端设备没有问题。缺点是页面需要加载js代码,这里我们能否想到只通过css来适配呢(当然排除媒体查询,因为媒体查询毕竟不能完美满足所有设备)
(function(doc,win){
var docEl =doc.documentElement,
resizeEvt = 'orientationchange' in window ? 'orientationchange' : 'resize',
recalc = function(){
var clientWidth = docEl.clientWidth>750 ? 750 :docEl.clientWidth;
if (!clientWidth) {return};
docEl.style.fontSize = 100 * (clientWidth/750) + 'px';
};
recalc();
if (!doc.addEventListener) return;
win.addEventListener(resizeEvt, recalc, false);
doc.addEventListener('DOMContentLoaded', recalc, false);
})(document,window)
想到这里,扯回rem是什么。 他是指相对于根元素(html)的字体大小的单位。
css3中一个单位:vw我们可以完美适配移动端
vw: 1vw 等于视口宽度的1%! 那我们可以用上vw来适配移动端吗?接下来看看吧!
我们以750*1334 iphone6的设计稿为例。之前提到rem和vw 我们将两者融合。
可以知道 每1VW = 750px * 1% = 7.5px 。
我们添加如下代码
<meta name="viewport" content="width=device-width, initial-scale=0.5, maximum-scale=0.5, user-scalable=0">
为了方便计算,我们用 100px为例 100/7.5px = 13.33333。
我们可以给common.css或者reset.css直接设置如下代码
html {
font-size: 13.333333333333334vw; /* 100vw / 750 * 100 */
}
接下来我们使用单位就直接可以按照100px = 1rem来做页面了。
总结: 首先我们想到的rem是根据html标签来计算的, 再者vw将视口分成100份,每一份代表当前1%; 这样外面可以完全使用css实现移动端适配!