Long long ago…
后面通常會緊接一個跌蕩起伏，錯綜復雜，深刻細膩的故事价卤。
就像我寫出第一個響應式頁面的心路歷程一般赤赊。
當我看到一個頁面長成這樣闯狱，以前我會以為就像畫畫一樣簡單，把哪個塊畫在哪抛计，上什么色哄孤，按何種比例構(gòu)造，想加什么描述就加什么吹截，只要看起來形象生動瘦陈，文圖相配就成凝危。多么簡單的一件小事……
一個前端的響應式頁面，它需要考慮的細節(jié)很多：
一晨逝，首先要考慮到它適配在哪些客戶端蛾默，拿到的設計搞是否可行以及合理就很關(guān)鍵了
上面兩張圖片，是一個響應式頁面的logo區(qū)和slogan導航條區(qū)與banner主題說明區(qū)捉貌，需要理解各部分在客戶端呈現(xiàn)的意義是什么支鸡，我起初是一臉懵的，這需要經(jīng)驗以及該項目所要呈現(xiàn)的內(nèi)容趁窃，圓形部分被認為是logo呈現(xiàn)牧挣，那么就需要一張logo圖，圖片由方形切成圓形
slogan在屏寬改變時醒陆，由一兩行變成一行瀑构，用列表會比較容易實現(xiàn)這一塊區(qū)域，對每一行列表 設置 min-width,當屏寬不夠刨摩，自然就會跳轉(zhuǎn)成兩行排列
inline-block元素的居中检碗，包括內(nèi)容的垂直居中與它本身位置的居中可以用下面幾條實現(xiàn)
而內(nèi)聯(lián)元素的水平居中，一般在父元素里設置
好了码邻，logo區(qū)終于初步完成折剃，后面只需要填充內(nèi)容進去就可以了，下面像屋，真正難以實現(xiàn)的塊就是主題說明的一行兩行隨心變了怕犁，我下意只以為跟slogan會一樣，不夠?qū)捵约壕吞D(zhuǎn)了嘛己莺，但是很難所想即所得奏甫，它只有一個主題，就一行區(qū)域凌受，要不夠也太難了點阵子，而且它不是本來就幾塊內(nèi)容，而是一塊內(nèi)容在手機屏顯示不夠才變成兩塊內(nèi)容胜蛉，一個神奇的屬性就出現(xiàn)了挠进，叫display的小朋友，既然你內(nèi)容一樣誊册，我就建兩部分一樣的內(nèi)容好了领突，一部分只有一行，一部分是兩行案怯，只是一行的內(nèi)容分布在兩行里君旦，超過多少屏寬，我就讓兩行這一部分display:none;而另一部分display:block;邏輯簡單，不過很難想到金砍，就會多做一些無用功局蚀，再一次說明，多寫恕稠，多練才能有解決問題的合理思維琅绅，代碼塊如下
二，這里引入了一個很重要的樣式谱俭，響應式頁面的精髓@media(至少在我目前所學的知識水平是這樣認識的)
好了奉件，這一塊的難點也算是解決了，最后我們就是要對主要內(nèi)容區(qū)products進行布局了昆著，看起來雖然占的頁面比例大县貌，但是結(jié)構(gòu)單一，做起來并不算太復雜凑懂，好吧煤痕，這只是我初步判斷，但是一旦填充圖片的時候接谨，讓我無論如何也舒服不起來摆碉，如果圖片只用div塊的樣式寫出來，倒是沒發(fā)現(xiàn)脓豪，一旦用img元素填充后巷帝，問題一大堆一大堆滴。
首先我是網(wǎng)絡找圖扫夜，寬高比例都不一致楞泼，很難在不限制高度的情況下，讓它們排成整齊的一排笤闯，圖片寬度一般用max-width:100%;樣式就可以實現(xiàn)隨著屏寬改變自適應堕阔，不會出現(xiàn)很難看的界面，但是高如果不限定絕對值颗味，就會把下一排的元素往下擠超陆，最后整個頁面會相當uncomfortable，尤其在寬屏一排顯示多張圖時浦马。在網(wǎng)絡上搜了不少建議时呀，都不大能理解，難道只能由設計師給我們設計好同樣比例的圖填充進去才能解決捐韩？
產(chǎn)品區(qū)退唠，同樣也引入@media來解決響應式頁面屏寬改變的顯示效果
寫樣式前的設計搞是這樣的
整個頁面的自適應也是按照這幾種客戶端來分類寫的。
三荤胁，寫這樣的頁面，如果全都加上box-sizing:border-box;代碼會更清晰些屎债。會省去對諸多塊的padding仅政，margin的加加減減垢油，這樣減少出錯的機會，默認width,height是content-box的寬高圆丹，一般兩個block元素margin會重疊滩愁，而inline-block元素margin是不重疊的.
content-box ，默認值辫封，標準盒子模型硝枉。width與height只包括內(nèi)容的寬和高， 不包括邊框（border）倦微，內(nèi)邊距（padding）妻味，外邊距（margin）。注意: 內(nèi)邊距, 邊框 & 外邊距 都在這個盒子的外部欣福。 比如. 如果 .box {width: 350px}; 而且 {border: 10px solid black;} 那么在瀏覽器中的渲染的實際寬度將是370px;
尺寸計算公式：width = 內(nèi)容的寬度责球，height = 內(nèi)容的高度。寬度和高度都不包含內(nèi)容的邊框（border）和內(nèi)邊距（padding）拓劝。
border-box
width和height屬性包括內(nèi)容雏逾，填充和邊框，但不包括邊距郑临。這是當文檔處于 Quirks模式 時Internet Explorer使用的盒模型栖博。注意，填充和邊框?qū)⒃诤凶觾?nèi) , 例如,.box {width: 350px; border: 10px solid black;}導致在瀏覽器中呈現(xiàn)的寬度為350px的盒子厢洞。內(nèi)容框不能為負仇让，并且被分配到0，使得不可能使用border-box使元素消失犀变。
這里的維度計算為：
width = border + padding + 內(nèi)容的? width妹孙，
height = border + padding + 內(nèi)容的 height。
而在對block元素設置居中的時候获枝，它的寬高明確也是很重要的一點蠢正，如果只要水平居中的話，就設置margin-left:auto;margin-right:auto;這是塊級元素包含塊級元素的方式省店。塊元素垂直居中的設置也可直接上下margin或padding嚣崭。內(nèi)聯(lián)元素的垂直居中，需要明確height=line-height懦傍。
總之雹舀，對頁面整體把握不夠，不熟悉粗俱，顯得顧頭不顧尾说榆，需要學習的地方還有太多了，做一個靜態(tài)頁面也許不難，但是如果不做響應式布局签财，那就 OUT了串慰，加油吧，尤其是移動端的用戶越來越取代pc端唱蒸，那響應式頁面的掌握程度就直接影響了生產(chǎn)力呀邦鲫，熟能生巧，熟能生巧……
