成人国产在线小视频_日韩寡妇人妻调教在线播放_色成人www永久在线观看_2018国产精品久久_亚洲欧美高清在线30p_亚洲少妇综合一区_黄色在线播放国产_亚洲另类技巧小说校园_国产主播xx日韩_a级毛片在线免费

資訊專欄INFORMATION COLUMN

解決flex布局新舊版本的兼容性寫(xiě)法

raoyi / 2004人閱讀

摘要：最新開(kāi)發(fā)的項(xiàng)目用了的新特性布局，遇到了兼容性的問(wèn)題。那么新舊版本是什么布局分為舊版本，過(guò)渡版本，以及現(xiàn)在的標(biāo)準(zhǔn)版本。所以如果你只是寫(xiě)新版本的語(yǔ)法形式，是肯定存在兼容性問(wèn)題的。

最新開(kāi)發(fā)h5的項(xiàng)目用了css的新特性flex布局，遇到了CSS兼容性的問(wèn)題。在網(wǎng)上找到了如下的解決辦法。

我寫(xiě)頁(yè)面的時(shí)候用到過(guò)很多的flex布局，覺(jué)得非常好用。下面附上一篇不錯(cuò)的flex布局介紹的文章。?
Flex 布局教程想了解的可以自己去看看這篇博文，或者自己百度，這里先部多做介紹，我們主要來(lái)說(shuō)一說(shuō)flex布局的兼容性問(wèn)題。

why?

大家可能想問(wèn)了，flex布局為什么會(huì)存在兼容性問(wèn)題??？

之所以存在兼容性問(wèn)題，是因?yàn)榧夹g(shù)在不斷的更新，有些舊的瀏覽器只支持舊語(yǔ)法的書(shū)寫(xiě)方式，所以就出現(xiàn)所謂的兼容性問(wèn)題。

what？

那么新舊版本是什么？

flex布局分為舊版本dispaly: box;，過(guò)渡版本dispaly: flex box;，以及現(xiàn)在的標(biāo)準(zhǔn)版本display: flex;。所以如果你只是寫(xiě)新版本的語(yǔ)法形式，是肯定存在兼容性問(wèn)題的。

Android?

2.3 開(kāi)始就支持舊版本?display:-webkit-box;

4.4 開(kāi)始支持標(biāo)準(zhǔn)版本?display: flex;

IOS?

6.1 開(kāi)始支持舊版本?display:-webkit-box;

7.1 開(kāi)始支持標(biāo)準(zhǔn)版本display: flex;

PC?
ie10開(kāi)始支持，但是IE10的是-ms形式的。

下面是各個(gè)瀏覽器的支持情況

how？

所以我們?cè)撊绾芜M(jìn)行兼容性的寫(xiě)法呢？

盒子的兼容性寫(xiě)法

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

子元素的兼容性寫(xiě)法

.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+ */}
這種兼容寫(xiě)法不一定起效的。尤其是在底版本安卓系統(tǒng)中。因?yàn)槭裁茨?因?yàn)樗卸际窍蛳录嫒莸?，所以?xiě)法的順序一定要寫(xiě)好了才起作用。就是把舊語(yǔ)法寫(xiě)在底下，個(gè)別不兼容的移動(dòng)設(shè)置才會(huì)識(shí)別，哪些是舊的語(yǔ)法，你懂的。那些帶box的一定要寫(xiě)在最下面即可。

所以上面的兼容寫(xiě)法應(yīng)該是這樣的才對(duì):

.box{
    display: -webkit-flex;  /* 新版本語(yǔ)法: Chrome 21+ */
    display: flex;          /* 新版本語(yǔ)法: Opera 12.1, Firefox 22+ */
    display: -webkit-box;   /* 老版本語(yǔ)法: Safari, iOS, Android browser, older WebKit browsers. */
    display: -moz-box;      /* 老版本語(yǔ)法: Firefox (buggy) */
    display: -ms-flexbox;   /* 混合版本語(yǔ)法: 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- */       
 }
總結(jié)

這樣來(lái)試試吧，保證不會(huì)再出現(xiàn)返工修改的問(wèn)題。?
good luck！

最后

我不是大神，也不是什么牛人，寫(xiě)這個(gè)號(hào)的目的是為了記錄我自學(xué) web全棧 的筆記。

有興趣的朋友可以掃下方二維碼公眾號(hào)—— 愛(ài)寫(xiě)bugger的阿拉斯加

分享 web 開(kāi)發(fā)相關(guān)的技術(shù)文章，熱點(diǎn)資源，全棧程序員的成長(zhǎng)之路

和大家一起交流成長(zhǎng)。

只要關(guān)注公眾號(hào)并回復(fù) 福利 便送你六套、并且每套價(jià)值 3999 元的視頻資源： Python、Java、Linux、Go、vue、react、javaScript

文章版權(quán)歸作者所有，未經(jīng)允許請(qǐng)勿轉(zhuǎn)載,若此文章存在違規(guī)行為，您可以聯(lián)系管理員刪除。

轉(zhuǎn)載請(qǐng)注明本文地址：http://systransis.cn/yun/116849.html

相關(guān)文章

  • Flexbox布局的正確使用姿勢(shì)

    摘要：分配空間原理影響布局分配空間的屬性有三個(gè)，分別是和。伸縮項(xiàng)目擴(kuò)展寬度項(xiàng)目容器寬度項(xiàng)目寬度或項(xiàng)目設(shè)置的總和對(duì)應(yīng)的比例拉伸后伸縮項(xiàng)目寬度原伸縮項(xiàng)目寬度擴(kuò)展寬度我們來(lái)計(jì)算一下上面栗子中第一個(gè)伸縮項(xiàng)目拉伸后的寬度。 在項(xiàng)目中，我們還會(huì)大量使用到flexbox的新舊屬性，但大多數(shù)人一般只會(huì)寫(xiě)新屬性，舊屬性交由autoprefixer處理，但其實(shí)完成同樣功能的新舊屬性表現(xiàn)形式卻不盡相同。還有部分人...

    GitCafe 評(píng)論0 收藏0

  • HTML-CSS

    摘要：但是，從字體上來(lái)說(shuō)雪碧圖制作，使用以及相關(guān)，圖文。由于采用了編譯，所以能夠保證在瀏覽器不支持標(biāo)準(zhǔn)布局的情況下，回滾到舊版本的，保證移動(dòng)設(shè)備中能呈現(xiàn)出一樣的布局效果。我不想陷入和的紛爭(zhēng)，但是有一件事是確定的極大的提升了移動(dòng)端 一勞永逸的搞定 flex 布局 尋根溯源話布局 一切都始于這樣一個(gè)問(wèn)題：怎樣通過(guò) CSS 簡(jiǎn)單而優(yōu)雅的實(shí)現(xiàn)水平、垂直同時(shí)居中。記得剛開(kāi)始學(xué)習(xí) CSS 的時(shí)候，看到 ...

    xiaokai 評(píng)論0 收藏0

  • HTML-CSS

    摘要：但是，從字體上來(lái)說(shuō)雪碧圖制作，使用以及相關(guān)，圖文。由于采用了編譯，所以能夠保證在瀏覽器不支持標(biāo)準(zhǔn)布局的情況下，回滾到舊版本的，保證移動(dòng)設(shè)備中能呈現(xiàn)出一樣的布局效果。我不想陷入和的紛爭(zhēng)，但是有一件事是確定的極大的提升了移動(dòng)端 一勞永逸的搞定 flex 布局 尋根溯源話布局 一切都始于這樣一個(gè)問(wèn)題：怎樣通過(guò) CSS 簡(jiǎn)單而優(yōu)雅的實(shí)現(xiàn)水平、垂直同時(shí)居中。記得剛開(kāi)始學(xué)習(xí) CSS 的時(shí)候，看到 ...

    CHENGKANG 評(píng)論0 收藏0

  • css - 收藏集 - 掘金

    摘要：絕對(duì)底部前端掘金來(lái)自國(guó)外的設(shè)計(jì)達(dá)人，純，可以實(shí)現(xiàn)當(dāng)正文內(nèi)容很少時(shí)，底部位于窗口最下面。有效解決圖片使用單位邊角缺失的問(wèn)題前端掘金起因在移動(dòng)端使用布局時(shí)圖片也需要用單位。 CSS 絕對(duì)底部 - 前端 - 掘金來(lái)自國(guó)外的設(shè)計(jì)達(dá)人，純CSS，可以實(shí)現(xiàn): 當(dāng)正文內(nèi)容很少時(shí)，底部位于窗口最下面。當(dāng)改變窗口高度時(shí)，不會(huì)出現(xiàn)重疊問(wèn)題。甚至，創(chuàng)造該CSS的人還專門(mén)成立一個(gè)網(wǎng)站介紹這個(gè)CSS底部布局方案...

    phpmatt 評(píng)論0 收藏0

發(fā)表評(píng)論

0條評(píng)論

最新活動(dòng)
閱讀需要支付1元查看
<