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%;樣式就可以實現隨著屏寬改變自適應，不會出現很難看的界面，但是高如果不限定絕對值，就會把下一排的元素往下擠，最后整個頁面會相當uncomfortable，尤其在寬屏一排顯示多張圖時。在網絡上搜了不少建議，都不大能理解，難道只能由設計師給我們設計好同樣比例的圖填充進去才能解決？
產品區，同樣也引入@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端，那響應式頁面的掌握程度就直接影響了生產力呀，熟能生巧，熟能生巧……
