網(wǎng)頁(yè)設計flex布局瀏覽器兼容解決方案
雖然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設置垂直對齊方式。
<< 上一篇:自己學(xué)習網(wǎng)站制作的步驟有哪些 | >> 下一篇:網(wǎng)頁(yè)設計中flex布局垂直水平居中 |
- 2017-11-21室內效果圖vray渲染常見(jiàn)問(wèn)題解決方案
- 2017-10-27網(wǎng)頁(yè)設計為什么在不同電腦顯示不一樣
- 2017-10-23室內效果圖中的常見(jiàn)問(wèn)題及解決方案
- 2017-09-01網(wǎng)頁(yè)設計博客類(lèi)的靈感源于借鑒
- 2017-09-01網(wǎng)頁(yè)設計師的靈感主要從哪里來(lái)
- 2017-08-11室內裝修設計中如何合理布局家具
- 2017-07-26毛坯房裝修水電改造布局注意事項
- 2017-07-11網(wǎng)頁(yè)設計移動(dòng)端H5前端性能優(yōu)化方案
- 2017-07-11h5移動(dòng)端頁(yè)面怎么根據設計稿布局
- 2017-06-26怎么把網(wǎng)頁(yè)設計的更有視覺(jué)效果
- 2017-06-22網(wǎng)頁(yè)設計中的樣式單位px、em、rem區別
- 2017-05-24室內設計平面布局方案和技巧
- 2017-05-09網(wǎng)頁(yè)設計中圖片有哪些常見(jiàn)的使用技巧
- 2017-05-04鄭州哪里可以學(xué)網(wǎng)頁(yè)設計培訓班
- 2017-05-04自適應網(wǎng)頁(yè)設計制作的方法和技巧
- 1 室內設計培訓課程 人咨詢(xún)中 19
- 2 平面設計培訓課程 人咨詢(xún)中 18
- 3 網(wǎng)頁(yè)設計培訓課程 人咨詢(xún)中 18
- 4 淘寶開(kāi)店培訓課程 人咨詢(xún)中 15
- 5 動(dòng)漫設計培訓課程 人咨詢(xún)中 12
- 6 淘寶美工培訓課程 人咨詢(xún)中 17
- 7 電腦辦公培訓課程 人咨詢(xún)中 15
- 8 網(wǎng)絡(luò )營(yíng)銷(xiāo)培訓課程 人咨詢(xún)中 13
- 9 模具設計培訓課程 人咨詢(xún)中 10
- 10 網(wǎng)站開(kāi)發(fā)培訓課程 人咨詢(xún)中 16