移动端布局的问题
如今手机设备多种多样,屏幕大小各不相同,下面说一下如今的几种移动端布局.
1. 宽度百分比布局 + px布局.
先说一下,这种布局虽然我现在没有用,但是还是有见到过,这种布局如果你按照750设计图来做的话其实在主流手机屏幕上展示都挺不错的,但是如果屏幕非主流的话,那显示出来的效果就很差了,所以这种布局不建议使用.
2. 媒体查询 + px布局
这种布局用的话还是可以的,但是媒体查询毕竟也是在一个区间内,而且不同的区间段应该写多大的px呢?这也是一个问题.
3. rem布局 + flex布局
ok,说到正题了,这是我现阶段采用的布局,关于flex布局,强烈推荐阮一峰的关于flex布局这一章,或者菜鸟教程内的内容也可以,跟阮一峰的一样。现在重点说一下rem布局.
为什么采用rem布局
rem布局的原理
首先说一下rem这个单位,rem这个单位是根据html的根字体来确定的,现在的浏览器默认的html根字体是16px,也就是1rem = 16px,你可以做一下实验:html { font-size: 100px; } div { width: 1rem; }
这样最后div呈现出来的宽度其实是100px,知道了这个原理,那么如果我们使用rem单位布局,然后根据手机屏幕大小改变html的根字体的大小,这样不就实现了手机屏幕适配吗?
如何动态改变html根字体的大小.
网上关于这类的js很多,我说一下我正在使用的js,感觉比较简单而且容易理解:
function rem(doc, win) {
var docEl = doc.documentElement,
resizeEvt = 'onorientationchange' in window ? 'onorientationchange' : 'resize',
recalc = function() {
var clientWidth = docEl.clientWidth;
if (!clientWidth) return;
if (clientWidth >= 750) {
docEl.style.fontSize = '100px';
} else {
docEl.style.fontSize = 100 * (clientWidth / 750) + 'px';
}
};
if (!doc.addEventListener) return;
win.addEventListener(resizeEvt, recalc, false);
doc.addEventListener('DOMContentLoaded', recalc, false);
}
rem(document, window);
一般设计稿都是按照750来给的,750也就是iphone6的设计稿,是实体手机宽度的2倍,所以上面的函数在iphone6上面设置的根字体其实是50px,那样我们在写css的时候,直接按照设计稿量出的px单位除以100,然后得出的值就是rem的值,关于rem转换,sublime和vscode上面有css转rem的插件,然后也可以写一个scss的转换函数来进行转换:
@function rem($px){
@return ($px / 100) * 1rem;
}