移动端布局基础
最近iphone7一下出了两款尺寸的手机,导致的移动端的屏幕种类更加的混乱,设计图之前以320*2为设计基准,现在一般以375*2为设计基准。
另外各种品牌的android机混乱了市场,加上最近新出的win系统。
解决之道
固定宽度做法
A:直接在header里写死<meta name="viewport" conent="width=375,user-scalable=no">,页面单位直接以px为基准
优点:开发方便,设计图用ps量下直接就可以写上去单位
缺点:太多了,例如在小宽度手机上出现横向滚动屏,大手机上出现白边,1px像素处理等等
响应式布局
A:用媒体查询语句在320,375为界限处进行适配处理
写法:@media only screen and (min-width: 750px) and (max-width: 640px) {
...
}
@media and screen(max-width: 640px) {
....
}
@media and screen(min-width: 750px){
...
}
优点:页面处理稍微更精细些
缺点:最多的缺点就是css查询语句写的比较多,且开发速度较慢
rem方案
本人使用过两种方式,都还不错
1.脚本动态计算
html {font-size: 50px;}
/* javascript */
!(function(win, doc){
function setFontSize() {
// 获取window 宽度
// zepto实现 $(window).width()就是这么干的
var winWidth = window.innerWidth;
// doc.documentElement.style.fontSize = (winWidth / 640) * 100 + 'px' ;
// 2016-01-13 订正
// 640宽度以上进行限制 需要css进行配合
var size = (winWidth / 640) * 100;
doc.documentElement.style.fontSize = (size < 100 ? size : 100) + 'px' ;
}
var evt = 'onorientationchange' in win ? 'orientationchange' : 'resize';
var timer = null;
win.addEventListener(evt, function () {
clearTimeout(timer);
timer = setTimeout(setFontSize, 300);
}, false);
win.addEventListener("pageshow", function(e) {
if (e.persisted) {
clearTimeout(timer);
timer = setTimeout(setFontSize, 300);
}
}, false);
// 初始化
setFontSize();
}(window, document));
2.用现成的flexible.js的解决方案,较推荐,毕竟是淘宝大厂的,可以参考大漠的文章
flexible.js: http://www.w3cplus.com/mobile/lib-flexible-for-html5-layout.html,另外就是使用的时候看情况需要改下js代码里的配置项,我们是以750为设计基准的,折合最大7.5rem,有相同的只需改
这里,另外,需要注意的是字体大小建议使用px的方式,用less/scss中的mixin进行处理。
优点:太多
缺点:暂未发现
强大的单位——vw
html {
font-size: 31.25vw; /* 表达式:100*100vw/320 */
}
兼容性问题比较大,没用过,没太多的发言权
总结:建议使用rem的解决方案,具体哪一种视情况而定。