设为首页 加入收藏

手机版 郑州清新教育-郑州电脑设计培训学校典范,专业课程包括:室内家装建筑装饰设计培训学习班,平面广告网页美工动漫设计培训,淘宝开店美工运营推广网站手机开发培训等课程
郑州清新教育电话

当前位置:首页 > 网页美工设计

网页美工设计

网页设计flex布局浏览器兼容解决方案

编辑: 时间:2017-12-15 10:59:20

   虽然flex布局早在2009年就有了,而现在是2015年8月10日,使用最新的flex语法会发现支持程度并不好,即使是在“高端”浏览器上也是如此,比如Chrome、Firefox、Safari、Android、IOS Safari下支持程度各不相同

  网上现有的代码中充斥着各种版本,在Chrome下运行一般都没有问题,Firefox一般也还好,但Android与IOS Safari下就显得非常无力了。之所以会出现这样的局面,主要是历史原因,从2009年到2015年,期间W3C规范有了多次更新,浏览器支持程度也就有了差异。

  Flexbox布局的语法经过几年发生了很大的变化,也给Flexbox的使用带来一定的局限性,因为语法版本众多,浏览器支持不一致,致使Flexbox布局使用不多。

  Flexbox布局主要有三种语法版本:

  2009版本,我们称之为老版本,使用的是“display:box”或者“display:inline-box”;

  2011版本,我们称之为混合版本,使用的是“display:flexbox”或者“display:inline-flexbox”;

  2013版本,也就是最新语法版本,使用的是“display:flex”或者“display:inline-flex”。

  我们需要把Flexbox旧的语法、中间过渡语法和最新的语法混在一起使用,在这里他们的顺序显得非常重要。“display”属性本身并不添加任何浏览器前缀,我们需要确保我们老语法不要覆盖新语法让浏览器(可能总是会)同时支持。

  IE10部分支持2012,需要-ms-前缀

  Android4.1/4.2-4.3部分支持2009 ,需要-webkit-前缀

  Safari7/7.1/8部分支持2012, 需要-webkit-前缀

  IOS Safari7.0-7.1/8.1-8.3部分支持2012,需要-webkit-前缀

  建议在需要兼容Android时(2009版语法)采用flex-h/flex-v声明容器使用flex模式,在不需要兼容Android时(2012版语法)使用flex设置容器

  lex布局非常适宜当前的移动设备和大屏幕浏览器网页开发非常的便捷,是未来网页开发布局设计的方向,是一个未来技术。flex布局能够编写代码小,各种宽度、高度、位置都由浏览器自身按照既定规则完成适配,跨平台无障碍阅读体验。

  css3 flex特点

  一旦一个容器赋予了display:flex属性,将会有以下特点:

  项目无法设置浮动。

  列表的样式会被清除。

  无法使用vertical-align设置垂直对齐方式。

求学问答专业答复,快速响应
电话:0371-63218905
手机:13613841515
QQ:
有问题需要老师在线解答? 立即提问 马上回复
更多 热门课程排行榜
郑州清新教育电脑学校

室内家装设计知识平面广告设计知识网页美工设计知识

模具机械设计知识电脑办公文秘知识游戏动漫设计知识

郑州清新教育电脑学校

清新教育新闻资讯清新教育报班选课清新教育就业服务

关于清新教育联系清新教育清新教育乘车路线

关于我们 版权所有:郑州清新教育(www.qingxinedu.cn)备案号:豫ICP备11011661号