西门的后花园

一个热爱网络的年轻人的博客

移动端网页制作入门之三:手机布局之美

本文主要讲手机网页布局新思维、新方法,让你摆脱PC端布局老思路,又一次享受布局带来的快乐!

兼容性

请允许我一上来就泼盆冷水。不知道是谁说的:搞移动端吧,移动端是webkit的天下,没有IE6,兼容性简单多了。话虽这样说,但未免太乐观了。我Android的UC浏览器到现在,怎么清除缓存,有个页面的某部分始终没有样式加载,我都想卸载了。。。很少人兼容Windows Phone,我一直在做兼容,也是一堆坑。手机端依旧有兼容性,只是一般不会去写hack而已。

我们公司需要兼容的系统为iOS 5+、Android 2.3+、Windows Phone 8+。对于普通页面来说,iOS比较好兼容;Android低版本有老规范,需要注意;Windows Phone 8里按道理说应该是IE11,结果QQ和百度浏览器还是IE10的内核。。。

所以一般CSS3的代码通常要写两至四句,兼容以上各种系统:

-webkit-transition: all 0.5s ease;
transition: all 0.5s ease;

-webkit-box-flex: 1;
-webkit-flex: 1;
-ms-flex: 1;
flex: 1;

这里没有火狐什么事。关于浏览器前缀支持,请看caniuse这个网站。

下面我将介绍五种常见的布局方式,希望给大家一点思路。理解原理,合理运用,不要照抄。→DEMO

固定布局

固定布局是第一次做移动端的朋友们最好的选择方式,思路沿用PC端,上手比较快。<head>里把viewport加好,然后设想整个网页的宽度为320px即可。其他地方PC端怎么布局,这里类似即可。

缺点也显而易见,大屏手机显示网页比较宽,而固定布局宽度参照永远是320px,导致左右两边会有空白。就像你用27寸显示器看980px宽度网页一样。另一个方面就是手机横屏的时候,两边空白更宽。

流动布局

以前PC端很少用到这种布局,因为我们需求要么网页就一种宽度,要么就两种宽度,分宽窄屏处理。而手机上不同,大部份手机默认宽度都不一样,所以流动布局可以很好解决自适应需求。

流动布局重点就是使用百分比来代替传统px作为单位(当前容器宽度除以父级容器实际宽度)。例如设计稿宽度为640px,上面有一个导航里包含四个菜单,四周边距为20px,四个菜单等宽,那么边距应该为20px/640px=3.125%,每个菜单的宽度为100%/4=25%。DEMO里还有边框,所以记得改变盒子模型,加box-sizing:border-box。

优点是无论网页宽度如何改变,四个菜单的宽度永远一样,并且等宽。缺点是不够灵活,如果菜单数量有变化,就满足不了了。

浮动布局

很多乐观的人,看到Flexbox最新一版的规范,满心欢喜的觉得移动端可以不用浮动布局了。但很遗憾,对于Android 2.3支持的Flexbox老规范,连最简单的多行商品按顺序排列,都实现不了。对于这种情况,我喜欢用传统的浮动方式。因为对于开发人员,这种循环是最简单的。再加上:nth-child伪类处理边距,干脆利落。所以,我并没有放弃浮动布局。

当然,因为不需要兼容老版本IE了,浮动的写法也变得简单许多。

.clearfix{
    content:"";
    display:table;
    clear:both;
}

我在Less的公共代码库里,也加了这个:

.clearfix(){
    &:after{
        content:"";
        display:table;
        clear:both;
    }
}

需要清除浮动,直接写.clearfix()即可。

Flexbox布局

上一篇入门文章已经提到这货了,不知道你有没有试过,是不是很神奇?现在我大部份布局都是用Flexbox,包括你以前用浮动的情况,大部份也可以用Flexbox代替。

例如上面流动布局用百分比做的宽,局限性就是无法增加删除菜单,改变菜单数量。如果改为用Flexbox布局,这个问题迎刃而解,不论菜单有多少个,都自动等宽排列成一行。

再说两点:

  1. Flexbox有好几版,所以会导致不兼容的情况,特别是Android 2.3。做了个小工具→Flexbox生成工具←。暂时只做了最简单的几种情况,但都兼容iOS 5+、Android 2.3+、Windows Phone 8+,满足日常需求没问题。
  2. 在Flexbox里,margin很神奇,所以会导致你频繁用margin:auto;。如果你养成了这个坏习惯,老iOS和老Android里会死得很惨。建议用Flexbox工具里的技术属性,来处理居中情况。

混合布局

把所有学到的知识,灵活运用在布局中,我称之为混合布局。

例如我上面DEMO里的混合布局示例,设计稿宽度640px,边距20px,左侧大图宽高390px,右侧小图宽高190px。首先外层容器Flexbox,让里面左右结构显示。容器640px去掉左右边距40px剩600px,左侧390px/600px=65%,右侧190px/600px=31.66666667%,两者之间边距20px/600px=3.33333333%。右侧里面小图片直接宽度100%,高度跟宽度1:1,最后通过Flexbox让两个图一上一下,完成。三张图片记得用图片自适应,比例1:1。

定位布局

定位在移动端也用得挺多,特别是弹窗。

position: fixed;
left: 50%;
top: 50%;
-webkit-transform:  translate3d(-50%,-50%,0);
transform:  translate3d(-50%,-50%,0);

如此简单就搞定水平垂直居中的弹窗。

实际使用中,有少数几个手机的浏览器居然不支持translate3d,实在无语。如果非要兼容这些浏览器,推荐使用Flexbox弹窗。

扩展一下,移动端建议用硬件加速的属性,相关链接1链接2,而不是直接用margin。(我测试过transition移动一个divmargin会卡顿)

常见问题

  1. 虽然移动端不用写:hover,但光写个:active是不够的。实测Android 2.3下按过的按钮会留下浏览器默认颜色,所以记得给:visited也加个颜色。
  2. 遇到写动画animation的时候,不要用到伪类上。不然Android是没效果的。
  3. 用Flexbox做等分时,记得给宽度。不然Android里如果内容字数不一样,会撑开。
  4. 待补充

常用网站

caniuse

二维码生成器,chrome插件

font-face 图标生成工具

CSS3动画手册

webkit css library

评论列表

  1. ❗ ❗ 看一半,水平太低,没看透彻

  2. 手机简单而美。

  3. 有没有图?这样更简便点,直观

  4. 我有个问题:移动端也有Firefox浏览器,但是为什么不用考虑对火狐的兼容,难道移动版火狐浏览器也是使用webkit 核心,亦或是其占有率太低无需考虑的原因?

  5. 五一劳动节快乐,祝在节日的日子里好好休息,节后继续奋斗!

  6. 不是有那么句话么:移动端是前端工程师继ie6后的又一噩梦

  7. 1024,已撸 ❗

  8. 移动端真的比IE6还坑爹。

  9. 这个得看看,继续学习中

  10. 看不懂,但学习了

  11. 如果私有前缀能回到统一的规范的话估计能简单一点吧。。。

  12. 我很认真地想了想,我的Lumia 920就是Windows Phone,然后不得不说,IE上网灭杀一切的感觉!
    尤其在其他手机上用浏览器登录某些网,默认显示出来的是很不爽的手机版
    而用Windows Phone的IE登录,基本都是电脑版,好用程度可见一斑

  13. 好文,学习了。

  14. 移动端要做得好非常之难!!

  15. translate3d 会启用gpu, 这样就不卡了

  16. 有用
    很实用的几段代码 ctrl+d

  17. 我想知道{display:table}有什么意义吗?

发表评论

分类目录