我的第一個響應式頁面

圖片我就不一個一個複製過來了，想看圖的直接點擊原文。見諒。

----

Long long ago…

後面通常會緊接一個迭盪起伏，錯綜複雜，深刻細膩的故事。

就像我寫出第一個響應式頁面的心路歷程一般。

當我看到一個頁面長成這樣，以前我會以為就像畫畫一樣簡單，把哪個塊畫在哪，上什麼色，按何種比例構造，想加什麼描述就加什麼，只要看起來形象生動，文 圖相配就成。多麼簡單的一件小事……

一個前端的響應式頁面，它需要考慮的細節很多：

一，首先要考慮到它適配在哪些客戶端，拿到的設計搞是否可行以及合理就很關鍵了

上面兩張圖片，是一個響應式頁面的logo區和slogan導航條區與banner主題說明區，需要理解各部分在客戶端呈現的意義是什麼，我起初是一臉懵的，這需要經驗以及該項目所要呈現的內容，圓形部分被認為是logo呈現，那麼就需要一張logo圖，圖片由方形切成圓形

slogan在屏寬改變時，由一兩行變成一行，用列表會比較容易實現這一塊區域，對每一行列表 設置 min-width,當屏寬不夠，自然就會跳轉成兩行排列

inline-block元素的居中，包括內容的垂直居中與它本身位置的居中可以用下面幾條實現

而內聯元素的水平居中，一般在父元素里設置

好了，logo區終於初步完成，後面只需要填充內容進去就可以了，下面，真正難以實現的塊就是主題說明的一行兩行隨心變了，起初我以為 跟slogan會一樣，不夠寬自己就跳轉了嘛，但是很難所想即所得，它只是一個主題，就一行區或，要不夠也太難了點，而且它不是本來就幾塊內容，而是一塊內容在手機屏顯示不夠才變成兩塊內容，一個神奇的屬性就出現了，叫display的小朋友，既然你內容一樣，我就建兩部分一樣的內容好了，一部分只有一樣，一部分是兩行，只是過一行的內容 分在兩行里，超過多少屏寬，我就讓兩行這一部分display:none;而另一部分display:block;邏輯簡單，不過很難想到，就會多做一些無用功，再一次說明，多寫，多練才能有解決問題的合理思維，代碼塊如下

二，這裡引入了一個很重要的樣式，響應式頁面的精髓@media(至少在我目前所學的知識水平是這樣認識的)

好了，這一塊的難點也算是解決了，最後我們就是要對主要內容區products進行布局了，看起來雖然占的頁面比例大，但是結構單一，做起來並不算太複雜，好吧，這只是我初步判斷，但是一在填充圖片的時候，讓我無論如何也舒服不起來，如果圖片只用div塊的樣式寫出來，倒是沒發現，一旦用img元素填充後，問題一大堆一大堆滴。

首先我是網路找圖，寬高比例都不一至，很難在不限制高度的情況下，讓它們排成整齊的一樣，圖片寬度一般用max-width:100%;樣式就可以實現隨著屏寬改變自適應，不公出現很難看的界面，但是高如果不限定絕對值，就會把下一排的元素往下擠，最後整個頁面會相當難看，尤其是寬屏時，一橫排顯示多張圖時，在網路上搜了不少建議，都不大能理解，難道只能由設計師給我們設計好同樣比例的圖填充進去才能解決？

產品區，同樣也引入@media來解決響應式頁面屏寬改變的顯示效果

寫樣式前的設計搞是這樣的

上面幾部分的樣子也是按照這幾種客戶端來分類寫的。

三，寫這樣的頁面，如果全都加上box-sizing:border-box;代碼會更清晰些。會省去對諸多塊的padding，margin的加加減減，這樣減少出錯的機會，默認width,height是content-box的寬高，一般兩個block元素margin會重疊，而inline-block元素margin是不重疊的.

content-box ，默認值，標準盒子模型。width與height只包括內容的寬和高， 不包括邊框（border），內邊距（padding），外邊距（margin）。注意: 內邊距, 邊框 & 外邊距 都在這個盒子的外部。 比如. 如果 .box {width: 350px}; 而且 {border: 10px solid black;} 那麼在瀏覽器中的渲染的實際寬度將是370px;

尺寸計算公式：width = 內容的寬度，height = 內容的高度。寬度和高度都不包含內容的邊框（border）和內邊距（padding）。

border-box

width和height屬性包括內容，填充和邊框，但不包括邊距。這是當文檔處於 Quirks模式 時Internet Explorer使用的盒模型。注意，填充和邊框將在盒子內 , 例如,.box {width: 350px; border: 10px solid black;}導致在瀏覽器中呈現的寬度為350px的盒子。內容框不能為負，並且被分配到0，使得不可能使用border-box使元素消失。

這裡的維度計算為：

width = border + padding + 內容的 width，

height = border + padding + 內容的 height。

而在對block元素設置居中的時候，它的寬高明確也是很重要的一點，如果只要水平居中的話，就設置margin-left:auto;margin-right:auto;這是塊級元素包含塊級元素的方式。塊元素垂直居中的設置也可直接上下margin或padding。內聯元素的垂直居中，需要明確height=line-height。

總之，對頁面整體把握不夠，不熟悉，顯得顧頭不顧尾，需要學習的地方還有太多了，做一個靜態頁面也許不難，但是如果不做響應式布局，那就 OUT了，加油吧，尤其是移動端一用戶越來越取代pc端，那響應式頁面的掌握程度就直接影響了生產力呀，熟能生巧，熟能生巧……

推薦閱讀：