css設計中的不變與可變

“人活一世,有人成了面子,有人成了裡子,都是時勢使然。”——《一代宗師》

如果重構分裡子與面子的話，那麼html應該是負責裡子的，而css就是負責面子了。來說下css，這次我們從可變與不變的角度分析。

一個面試題

首先這是一個面試題，其次反正我是沒做過這個面試題，最後忘了是哪個廠的面試題。

具體的要求我忘了，大概的意思就是要這個內容在視窗內垂直方向置中，以圖片為參考，文字上下延伸，上面文字多了向上撐開，下面文字多了向下撐開，圖片大小固定，文字多少不固定（紅線是我加的，作為垂直方向的中間線，以輔助說明）。這裡文字屬於可變因子，而圖片屬於固定因子。

思路分析

首先，我們看到這裡的圖片都在同一水平線上，文字的多少根本不能影響圖片，所以我們得出可能的兩種方案，第一種文字正常文檔流，圖片絕對位置；第二種文字絕對位置，圖片正常文檔流。

其次，因為上面的文字延伸方向是朝上，本身就違反了正常的文檔流方向（正常的應該是隨著文字的增加向下延伸高度），所以得出上面的文字部分必然得絕對位置，設定bottom值

最後，結合上面兩個原因，我們先採用第二種方案實驗，文字絕對位置，圖片正常文檔流。

這裡，我們使用上篇文章中拆的思想得到html結構如下：

ul.demo    li        .text-top        img.img-center        .text-bottom

主要css代碼如下：

.demo{ position:absolute; top: 50%;} .demo li{ float: left; width: 120px; margin: 0 20px; position: relative;} .text-top{ position: absolute; bottom: 90px; left: 0;} .img-center{ margin-top: -34px; width: 120px; height: 68px;} .text-bottom{ position: absolute; top: 50px;}

常見執行個體

內容流體布局

這裡選擇側邊欄固定，內容為剩餘寬度的流體布局。側邊欄為固定因子，內容為可變因子。

section.section-main    .inner-center.clearfix        .main>.content        aside.aside-right

.main{ float: left; width: 100%;} .main .content{ margin-right: 320px;} .aside-right{ float: left; width: 300px; margin-left: -320px;}

圖文混排

還是之前的那個圖文混排，一般來說圖片是固定寬度的，而文字部分是不設定寬度的。固定因子為圖片的寬度，可變因子為文字的寬度。

.imgtext-mix    a.mix-img-link>img.mix-img    .mix-text        h3.mix-tt>a.mix-tt-link        .mix-intro

.mix-img-link{ float: left; width: 200px; margin-right: 20px;} .mix-text{ overflow: hidden;}

容器寬度不定，但寬高比一定

具體可參考：css中如何做到容器按比例縮放，這裡就不展開細說了，這個不變的因子是寬高比，可變的因子是寬度。

移動端的可變與不變

有很多剛入門移動端重構的人一般都會問一個問題，移動端是不是都要用百分比啊。其實拋開那些新的單位rem、vw、vh等，移動端除了百分比，px也是可以用的，根本不是你想象的那樣。用什麼單位，最主要的還是要把握好可變與不可變。如果你把握好了，那移動端重構其實跟pc也是一樣的。當然如果你習慣pc上的動不動就設定一個固定的寬高，那估計就得受挫了。

全屏的圖片滾動

全屏的這個東西，在vw還不能使用的情況下，那非100%莫屬了（這裡的全屏是指寬度鋪滿整個螢幕，不包括高度）。

ul.imgslide    li*4>img

// float布局.imgslide{    width: 400%;}.imgslide li{    width: 25%;    float: left;}// absoulte布局.imgslide{    width: 100%;    height: 100px;    position: relative;}.imgslide li{    width: 100%;    height: 100%;    position: absolute;    top: 0;    left: 0;}.imgslide li:nth-child(n+1){    transform: translate(100%, 0);}

圖文混排列表

還是前面的圖文混排，哈哈，對於pc也許你可以無視右邊文字的可變直接設定width，但是移動端那就對不起了，必須要考慮這個可變因子。

這個估計90%的移動端都有這個效果，當然不可能設計給你的是375px的稿子，然後你就做了個375px寬度的效果。但是如果按照設計稿的比例，然後設定圖片和寬度的百分比呢，這種情況圖片寬度的改變，當然會影響圖片高度的改變（如果是固定的高度那圖片估計就沒法看了，各種被展開或是變形），而圖片高度的改變就會影響整體行的改變，那估計拿著不同的手機，看到的右邊的文字內容或高或低也是醉了。

百分比效果大概如：

所以這裡一般設計的是圖片固定大小不變，右邊文字可變，佔滿其餘空間。實現跟上面的圖文混排一樣，當然技術上可以使用很多方法如flex，absolute，float等

單行列表

同樣單行列表，標題因為長度不一屬於可變因子，不宜直接控制其寬度。而右側的一些按鈕或輔助資訊相對來說使用絕對位置在右邊比較合理。

ul.line-list    li        p.title+i.icon-xxx

.line-list li{    position: relative;    padding-right: 40px;    line-height: 40px;}.line-list li .icon-xxx{    position: absolute;    right: 10px;    top: 50%;    tranform: translate(0, -50%);}// 如果文字比較長，需要做超出省略截斷.line-list li .title{    padding-left: 10px;    text-overflow: ellipsis;    white-space: nowrap;    overflow: hidden;}

等分

這裡的等分指水平的等分，可以使用的技術有flex，float，table-cell等，其中float應該是最low的，因為你必須要設定item的寬度，三等分設定33.33%，四等分設定25%等，這種重複利用性太low，已經不適合更進階的移動端了，所以flex和table-cell是不錯的選擇，根本不需要在意item的個數（當然得確定一行能顯示下，顯示不下那也是悲催）。所以這種情況下連單位都是多餘的。

ul.equal-list    li*n

// flex.equal-list{    display: flex;}.equal-list li{    flex: 1;}// table-cell.equal-list{    display: table;    table-layout: fixed;    width: 100%;}.equal-list li{    display: table-cell;}

translate

translate中使用的百分比單位是針對自己寬高的百分比，所以對於未知寬高的計算來說，是非常大的優勢，尤其用在水平和垂直置中上。

.center-translate{ position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%);}

當然這些變與可變的還有很多，總之，在移動端的可變因子比pc上更多，更多的對寬度或高度的不確定，就需要各種方法去避免直接設定死寬度或高度，當然慶幸的是，css3的支援讓這些不確定因素的控制變得趨向簡單。

變與不變之道

最後不管是移動端還是pc端，對於動不動就設定一個具體width或height的方式註定可擴充性欠缺。所以尤其是在做萬用群組件的時候，一定要進一步深挖掘，瞭解更多的使用情境，每個情境的一些特殊特徵，甚至於對未來的修改都有可預見性。

可能這裡說得更多的是寬度方面的控制，其實對於方法的選擇也一樣，同一種效果，可能有很多方法去實現，而每種方法都有各自的利弊，所以也要根據實際情況去靈活變通使用，這同樣也屬於可變的。如果你所有的都是一刀切，那就是固定的一個思維了，無所謂變通了。

如果從一個更高的角度來說，沒有什麼是恒定的不變，一切皆可變。也許這個網站的不可變，到了那個網站就得變，所以拒絕教條主義，一切從實際情況出發，根據需求分析，得出一個合理的實踐。

