基於CSS3的自適應布局技術

前端html(結構)+css(表現)這部分，無非是兩大問題，裝飾與布局。裝飾某個widget就算再難，我們也可以用搞定。布局就不是這回事了，別的不說，display:inline-block有3px bug，定位布局與浮動布局相關的bug也不在10以下，關鍵是用起來非常麻煩，需要許多額外的元素。早些年夠為著名的是聖杯布局，雙飛翼布局，近一點的是960grids提倡的欄柵布局，但這些布局都很難與@media配合使用。而@media是面向移動裝置響應式布局的利器。 @media無非是在css引入條件判定，讓相同的幾個元素在分支不同時，呈現不同的布局。另，已經的浮動布局，定位布局是無法解決多列等高問題，而浮動時要求出現浮動條的需要，這也是過去不能解決的。這正是我提倡大膽試用css3屬性的原因。

css3引入了新三種布局，grid布局，伸縮盒布局，多列布局。其中grid布局的文件繁文縟節，可用性不強，目前只有ie10實現了，未來是否完蛋或重來不可知，放棄。多列布局是針對文字與行內元素的，是為了實現報紙那種布局，與我們這種多widget的富應用不符合，暫不起用。剩下就是伸縮盒布局，是我見過的最操蛋的規範，從2009發布到去年最終定下來，更弦換轍了三次。

flexbox 規範時間表：

瀏覽器商為了自救，搞了個私有字首，因此定義乙個伸縮盒特別麻煩：

div

因此我在定下第2個規範，css統一用less來寫。less是一種動態的樣式表語言，它為css增加變數，組合，函式，運算等語法，讓css更便於編寫，復用與維護。有了less，上面那一坨東西可以封裝成乙個函式，用不著每次都寫這麼多讓你狂抓的候選值。

.flexbox() 
div

我已經把與伸縮盒相關的東西都封裝為乙個less庫，大家可以到這裡下

當然想實現自適應布局，光是伸縮盒是不夠的（伸縮盒本來就是一打東西，本文不是入門教程，想學可以看看這篇）,還有box-sizing:border-box(防止設定padding 時撐開父元素）， visibility(用它實現顯示隱藏，因為css3的動畫對display:none的元素不起作用)。不過本文也介紹一下如何使用table-cell實現垂直居中。本文涉及到伸縮盒的例子都用less，請自行編譯。

main

@import "flexbox.less";
html,body
@color: pink;
background-color: @color;
height:100%;
.flexbox();
.menu
.main
}

這是三欄布局，上下兩欄固定大小，中間的自適應，佔滿剩餘空間 safari 5.1.7(window平台支援的最高版本safari)不認main標籤，需要你將它的display設定為block或乙個伸縮容器

@import "flexbox.less";
html,body
@value: 1 1 auto;
.flexbox();
.flex-direction(column);
background:black;
height:100%;
header
main
footer
}

這是三欄三列布局，上下兩欄固定大小，中間的自適應，佔滿剩餘空間; safari 5.1.7(window平台支援的最高版本safari)不認main標籤，需要你將它的display設定為block或乙個伸縮容器白色部分，如果不設定overflow屬性，以當我們收窄瀏覽器時，裡面的文字會溢位；設定為overflow:hidden時，所有瀏覽器都能達到預期效果；設定overflow:auto 時，只有safari5.1.7失敗

@import "flexbox.less";
html,body
.flexbox();
.flex-direction(column);
background: pink;
height:100%;
header
main
>:nth-child(2)
>:nth-child(3)
} footer
}

11111 22222 33333 aaaaa bbbbb ccccc 第乙個用於做放多個按鈕的容器

table-cell有個缺點是，它的overflow樣式不起作用，因此子元素會一直撐大父元素。想出現滾動條，就要用到伸縮盒。

11111 22222 33333 第乙個用於做放多個按鈕的容器

@import "flexbox.less";
html,body
.aaa
}

yyyzzz

@import "flexbox.less";
html,body
width:50%;
height:100%;
.flexbox();
.box-sizing(border-box);
border:10px solid #b7b7b7;
overflow-x:auto;
overflow-y: hidden;
@value: 1 1 auto;//ie get the height of v-scrollbar into the total height;
header
main
footer
}

header footer

@import "flexbox.less";
html 
body 
header, footer 
ul li 
li:nth-child(odd)

基於CSS3的自適應布局技術

CSS3響應自適應布局Media Queries

css3自適應布局單位vw,vh

css3自適應布局單位vw,vh

基於CSS3的自適應布局技術

CSS3響應自適應布局Media Queries

css3自適應布局單位vw,vh

css3自適應布局單位vw,vh

相關推薦