电脑技术网——专业手机电脑知识平台,关注科技、手机、电脑、智能硬件
HTMLCSSHTML5Bootstrap

熟悉阐释CSS系列之flex向下兼容

2021-01-27 22:23:25 出处:[ 菜菜电脑网 ] 人气:次阅读
随着自己寄给过的页面的增高,也碰见了很多CSS兼容性的问题。这些兼容性问题,都是必然的,因为技术在不断进步,那么为了不被无缘,我们就要认真些兼容性处理过程。这篇文章主要简介了CSS中flex的适配,必须的朋友可以参照独创,下面来一起进去吧。

前言

我写成页面的时候加到过很多的flex布局,想到非常好用。下面附上一篇极好的flex布局简述的文章。

Flex 布局教程就让探究的可以自己去进去这篇博文,或者自己百度,这里先部多认真解说,我们主要来说一话说flex布局的兼容性问题。

why?

大家可能会想问了,flex布局为什么但会长期存在兼容性问题啊?

之所以发挥作用兼容性问题,是因为技术在不断的更新,有些原来的浏览器只反对上新语法的书写方式,所以就浮现所谓的兼容性问题。

what?

那么新旧版本是什么?

flex布局分别为旧版本dispaly: box;,过渡阶段版本dispaly: flex box;,以及现在的标准版本display: flex;。所以如果你只是写就新版本的语法形式,是认同发挥作用兼容性问题的。

Android

2.3 开始就大力支持旧版本 display:-webkit-box;

4.4 开始赞同标准版本 display: flex;

IOS

6.1 开始背书旧版本 display:-webkit-box;

7.1 开始支持者标准版本display: flex;

PC

ie10开始赞同,但是IE10的是-ms形式的。

下面是各个浏览器的背书情况

how?

所以我们该如何开展兼容性的用法呢?

盒子的兼容性读音


.box{    display: -webkit-box;  /* 据传版本语法: Safari, iOS, Android browser, older WebKit browsers. */    display: -moz-box;     /* 从前版本语法: Firefox (buggy) */    display: -ms-flexbox;  /* 混合版本语法: IE 10 */    display: -webkit-flex; /* 新版本语法: Chrome 21+ */    display: flex;         /* 新版本语法: Opera 12.1, Firefox 22+ */}

子元素的兼容性读法


.flex1 {      -webkit-box-flex: 1   /* OLD - iOS 6-, Safari 3.1-6 */      -moz-box-flex: 1;     /* OLD - Firefox 19- */                  -webkit-flex: 1;      /* Chrome */      -ms-flex: 1           /* IE 10 */      flex: 1;              /* NEW, Spec - Opera 12.1, Firefox 20+ */}

这种适配用法不一定很慢的。尤其是在底版本安卓系统中。因为什么呢?因为所有都是向下兼容的,所以发音的顺序一定要写就好了才起发挥作用。就是把上新语法写成在底下,个别不并行的移动设置才不会识别系统,哪些是原先的语法,你懂得的。那些上头box的一定要写下在最下面即可。

所以上面的接口用字一定会是这样的才对:


.box{    display: -webkit-flex;  /* 新版本语法: Chrome 21+ */    display: flex;          /* 新版本语法: Opera 12.1, Firefox 22+ */    display: -webkit-box;   /* 杨家版本语法: Safari, iOS, Android browser, older WebKit browsers. */    display: -moz-box;      /* 外公版本语法: Firefox (buggy) */    display: -ms-flexbox;   /* 混合版本语法: IE 10 */    }.flex1 {                -webkit-flex: 1;        /* Chrome */      -ms-flex: 1             /* IE 10 */      flex: 1;                /* NEW, Spec - Opera 12.1, Firefox 20+ */    -webkit-box-flex: 1     /* OLD - iOS 6-, Safari 3.1-6 */      -moz-box-flex: 1;       /* OLD - Firefox 19- */       }

以上就是全面性思考CSS系列之flex并行的简略内容,更多再三高度重视php中文网其它无关文章!

关于我们 - 广告合作 - 联系我们 - 免责声明 - 网站地图 - 投诉建议 - 在线投稿

©CopyRight 2008-2020 caicaipc.com Inc All Rights Reserved.
菜菜电脑网 版权所有 联系QQ:173533152