关闭

css之flexbox

657人阅读 评论(0) 收藏 举报
分类:

移动端部分浏览器对于fixed支持颇为棘手,经过亲身实践和查阅大量资料,得到以下兼容列表:


  • ios safari    --ios5+强力支持,ios4及更早版本不支持

  • android 2.1   --及更早版本不支持

  • android 2.2    --支持

  • android 2.3    --支持,需要设置页面不可缩放,即:<meta name="viewport" content="width=device-width, initial-scale=1.0,  maximum-scale=1.0, user-scalable=0" /> 

  • android 3.0+    --支持,不需要屏蔽页面缩放

  • blackberry 5.0    --支持

  • blackberry 7.0    --支持(仅仅是在模拟器中测试)

  • blackberry Playbook (1.0.7)    --支持、存在bug(可忽略)

  • firefox mobile    --支持

  • opera mobile    --支持、存在bug

  • opera mini    --不支持

  • windows phone 7    --不支持

  • webos    --2.0+支持

  • amazon kindle fire    --android2.3类似

  • amazon kindle(netfront)    --甚至不支持字体颜色,对fixed支持很给力


由此可知,使用fixed并不能很好满足固定布局的需求,不过要做到渐进增强使用fixed依然是不错的选择,即fixed在支持浏览器中将降级为static。

 

除此之外,html5规范中新增了flexbox布局,如在webkit中的实现display: -webkit-box,规范了CSS盒模型,在flexbox布局模型里,子元素可以在任何方向(横向、纵向)上排列,它们的大小可以智能缩放以适应父元素的宽度或高度。同样也可以对其中任何一个或多个元素设置fix宽或高度,其余元素通过设置比例实现智能缩放。

 

再从需求入手,只要设置页面包裹器为flexbox且等高于浏览器视口,规定子元素排列方式为纵向(-webkit-box-orient:vertical),应用导航和底部工具栏设置固定像素,应用主体(中间部分)能自适应页面高度且可滚动即可。


代码实现如下:


1)DOM结构

1
2
3
4
5
<div id="L-box">
    <div class="L-header"></div>
    <div class="L-content" id="iscroll"></div>
    <div class="L-footer">应用工具栏<input type="tel" placeholder="测试虚拟键盘" style="width:120px;" /></div>
</div>

2)css设置

1
2
3
4
5
html , body { overflowhidden; }
#L-box { height100%display: -webkit-box; -webkit-box-orient:vertical; }
.L-header { background#fc0height50pxline-height50px;}
.L-content { -webkit-box-flex: 1background#f1f1f1overflowauto;}
.L-footer { background#fc0height50pxtext-aligncenterline-height50px; }

具体demo地址:



demo代码详解:


  • 在demo中由于要兼顾ios最大化应用界面的问题,即隐藏浏览器地址栏,添加了一小段js应用代码,建议在实际应用中继续保留,提高ios用户的使用体验

  • 应用主体部分滚动利用iscroll库实现

 

说到此处,或许有人会疑问,既然应用主体部分滚动利用iscroll实现,关于导航栏和工具栏位置固定,用absolute定位一样可以实现,事实上也是如此。不过在使用absolute定位地址栏位置时,有两个地方需要注意:


  1. 额外的js计算得出主体部分的高度

  2. 在绝对定位元素上的input在获取焦点后,移动终端的虚拟键盘经常出现诡异的问题(慎重)


因此,综合考虑多方面元素,使用flexbox布局依然是最佳实践。 



三,流体布局


1,介绍


流体布局在这里是指横向排列布局元素,兼容布局元素边框、内填充等因素,适应手机横竖屏切换和不同终端分辨率的一种页面布局方式。



图上所示功能分解:


  • 横向排列7个子元素,长度均等

  • 第一和最后子元素离视口左右边界分别为20px

  • 每个子元素包含边框

  • 适应手机横竖屏切换、不同终端分辨率


2,设计思路


分析以上功能点,其实用inline-block、float配置子元素,使之横向排列,再辅以百分比宽度即可。但由于每个元素均有外边框(一定意义上说不可设置百分比),要实现上述需求,则需在每个子元素外嵌一层dom节点,如此势必增加了设计复杂度,出于对节省代码量及dom渲染速率的考虑,这并算不得合理的设计。


对于这种百分比类表格结构,使用table是个不错的选择。table本身必须设置宽度(百分比、px均可),但在视口宽度不固定前提下,设置table宽度为px值显然是行不通,若设置百分比,则对于需求第二点(左右边界20px),又有点黔驴技穷。不过在此基础上稍作变通亦可,即在table外嵌一层block元素如div,设置div的左右边距20px,再次设定table宽度为100%即可。这种做法,先不考虑多嵌套一层包裹器,单就table本身而言,并不符合w3c新的规范,同时即使用它也略显老土了。


除此之外,在讲述固定布局时,曾提到flexbox布局,可满足在任意方向上排列子元素并使之适应父元素宽高,这无疑是实现此种布局的利器。


实现代码如下:


1)DOM结构

1
2
3
4
5
6
7
8
9
10
11
<section id="container">
     <ul>
         <li>31</li>
         <li>32</li>
         <li>33</li>
         <li>34</li>
         <li>35</li>
         <li>36</li>
         <li>37</li>
     </ul>
</section>

2)CSS设置

1
2
3
4
#container { height58pxmargin20px 20px 0border1px solid #000; }
#container ul { height58pxdisplay: -webkit-box; }
#container ul li { -webkit-box-flex: 1text-aligncenterline-height58px;     border-right1px solid #000;}
#container ul li:last-child { border-right0 none; }

流体布局demo:传送门


小结:flexbox的强大之处,不在于可对布局元素按比例分配宽高,而在于重新定义CSS盒模型,在使用百分比的同时,可以兼容边框、内填充等因素。

0
0

查看评论
* 以上用户言论只代表其个人观点,不代表CSDN网站的观点或立场
    个人资料
    • 访问:113905次
    • 积分:907
    • 等级:
    • 排名:千里之外
    • 原创:26篇
    • 转载:37篇
    • 译文:1篇
    • 评论:12条
    文章分类
    最新评论
  • 众筹平台网站

    zhang0605lei: 众筹第三方平台 众筹之家不错http://www.zczj.com

  • 众筹平台网站

    juziaichengzi: 还是很全面的,不过还有宏筹网哦,还独创了合约众筹。www.redcooo.com

  • 众筹平台网站

    runner2002: 目前在成都特别火的创意生活类众筹——天府众筹网http://www.tfzcw.com值得去看看,上...

  • 众筹平台网站

    ranmannic: 楼主这些也太不全了吧,还有一个进口商品众筹平台www.haichoula.com 上面有很多直接面向...

  • 众筹平台网站

    u011235133: 目前影视众筹融资速度最快的还是版权众筹形式,梦想+影视版权众筹已有很多成功案例了,www.dream...

  • 众筹平台网站

    aniwo41: 众众投 http://www.zzt9.com 是一个线上实体连锁股权众筹平台,专业股权众筹网站

  • 众筹平台网站

    lp6277: 统计确实不全,最近兴起的<九九众筹网也很火爆,很多好的项目。大家可以加入我们的众筹群:2253658...

  • 众筹平台网站

    cid1233: 还有很多没收录!www.yuanmengcun.com圆梦村也是众筹网站!

  • 众筹平台网站

    sufuq: 人人投呢?我想筹资一起投资股票应该选哪家?

  • 众筹平台网站

    ztddjj: 嗯,楼主统计比较全面,最近好像冒出一个众筹之家和大家投比较火,大家投感觉玉米比较好。借楼主宝地打个广...