網(wǎng)頁(yè)美工設計

網(wǎng)頁(yè)設計flex布局瀏覽器兼容解決方案

編輯：時(shí)間：2017-12-15 10:59:20

　　雖然flex布局早在2009年就有了，而現在是2015年8月10日，使用最新的flex語(yǔ)法會(huì )發(fā)現支持程度并不好，即使是在“高端”瀏覽器上也是如此，比如Chrome、Firefox、Safari、Android、IOS Safari下支持程度各不相同

　　網(wǎng)上現有的代碼中充斥著(zhù)各種版本，在Chrome下運行一般都沒(méi)有問(wèn)題，Firefox一般也還好，但Android與IOS Safari下就顯得非常無(wú)力了。之所以會(huì )出現這樣的局面，主要是歷史原因，從2009年到2015年，期間W3C規范有了多次更新，瀏覽器支持程度也就有了差異。

　　Flexbox布局的語(yǔ)法經(jīng)過(guò)幾年發(fā)生了很大的變化，也給Flexbox的使用帶來(lái)一定的局限性，因為語(yǔ)法版本眾多，瀏覽器支持不一致，致使Flexbox布局使用不多。

　　Flexbox布局主要有三種語(yǔ)法版本：

　　2009版本，我們稱(chēng)之為老版本，使用的是“display:box”或者“display:inline-box”;

　　2011版本，我們稱(chēng)之為混合版本，使用的是“display:flexbox”或者“display:inline-flexbox”;

　　2013版本，也就是最新語(yǔ)法版本，使用的是“display:flex”或者“display:inline-flex”。

　　我們需要把Flexbox舊的語(yǔ)法、中間過(guò)渡語(yǔ)法和最新的語(yǔ)法混在一起使用，在這里他們的順序顯得非常重要。“display”屬性本身并不添加任何瀏覽器前綴，我們需要確保我們老語(yǔ)法不要覆蓋新語(yǔ)法讓瀏覽器(可能總是會(huì ))同時(shí)支持。

　　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時(shí)(2009版語(yǔ)法)采用flex-h/flex-v聲明容器使用flex模式，在不需要兼容Android時(shí)(2012版語(yǔ)法)使用flex設置容器

　　lex布局非常適宜當前的移動(dòng)設備和大屏幕瀏覽器網(wǎng)頁(yè)開(kāi)發(fā)非常的便捷，是未來(lái)網(wǎng)頁(yè)開(kāi)發(fā)布局設計的方向，是一個(gè)未來(lái)技術(shù)。flex布局能夠編寫(xiě)代碼小，各種寬度、高度、位置都由瀏覽器自身按照既定規則完成適配，跨平臺無(wú)障礙閱讀體驗。

　　css3 flex特點(diǎn)

　　一旦一個(gè)容器賦予了display:flex屬性，將會(huì )有以下特點(diǎn)：

　　項目無(wú)法設置浮動(dòng)。

　　列表的樣式會(huì )被清除。

　　無(wú)法使用vertical-align設置垂直對齊方式。

1/2 1 2 下一頁(yè) 尾頁(yè)

<< 上一篇：自己學(xué)習網(wǎng)站制作的步驟有哪些

>> 下一篇：網(wǎng)頁(yè)設計中flex布局垂直水平居中

推薦資訊