什么是響應(yīng)式？響應(yīng)式的頁面在不同的屏幕有不同的布局，換句話說，使用相同的html在不同的分辨率有不同的排版。如下圖所示：

響應(yīng)式布局是為了解決適配的問題，傳統(tǒng)的開發(fā)方式是PC端開發(fā)一套，手機端再開發(fā)一套，而使用響應(yīng)式布局只要開發(fā)一套就好了。因為它是用的同樣html，所以它的JS邏輯交互也只需寫一套就好了，缺點是CSS比較重。
傳統(tǒng)的手機端適配常見有三種解決方案，種是bootstrap的columns布局；第二種是使用全局的rem，先根據(jù)屏幕換算1rem等于多少個px，然后設(shè)置html標(biāo)簽的font-size為多少個rem，屏幕越大，則font-size越大，然后頁面所有的元素的寬高和字體大小都用rem等比例縮放；第三種是阿里的flex box，這種方案和第二種類似，不同點是頁面內(nèi)容的字體大小是用的px，而不是比例縮放的rem。種需要額外引入一個框架。第三種相對第二種來說應(yīng)該更合理點，因為正文的字體常用的為14px或者16px，如果一個頁面在這個手機字號是15.5px，在另外一個手機又變成了14.9px，這樣可能會有點奇怪。
而使用響應(yīng)式布局就不需要進行rem的換算，下面通過上圖的那個例子一步一步地分析怎么做響應(yīng)式。
1.設(shè)置不同分辨率頁面兩邊留白

先一個頁面的主體內(nèi)容有大的寬度，當(dāng)屏幕超過這個寬度時這個中間的主體內(nèi)容大就這么大了，不會再變大了，也就是說它固定一個大寬度，然后居中顯示，如大為1080px。然后當(dāng)大于1024px時，頁面主體內(nèi)容小寬為960px，兩邊自動留白；在500px到1024px之間兩邊保持留白40px；而當(dāng)小于500px時就認為是手機，兩邊留白20px。所以計算一下，container的代碼如下：

總體的思想是留白要合適，既不能留太多，導(dǎo)致中間內(nèi)容太窄，也不能讓中間的內(nèi)容顯得太大。這個其實和bootstrap的container思想一致，只是你可能要根據(jù)你自己的業(yè)務(wù)特點、用戶人群等做不同留白策略。
2.屏幕變小時，一頭變窄，另一頭不變

當(dāng)屏幕變小或者瀏覽器窗口拉小時，中間內(nèi)容的寬度就不能保持1080px，它得跟著變小，而在變小的過程中，往往要保持一邊不變，另一邊隨頁面變窄，如下圖所示：

右邊的結(jié)果欄寬度保持不變，左邊的表單欄寬度縮小。因為右邊一旦就窄不好看了，如果右邊變窄，那么字體也要相應(yīng)縮小，字號一縮小，右邊上下留白就變得太大，這樣就不美觀了，所以只能采取右邊保持不動的策略去縮小左邊的內(nèi)容。這種場景比較常見，右邊如果是一個頭像的話，它也不能跟著縮小，它一縮小高度也要跟著縮小，導(dǎo)致上下太空，所以這種情況也不能動。
3.保持中間留白固定，縮小內(nèi)容寬度

左欄的寬度變小應(yīng)該怎么變呢？有一個原則，就是要保持中間的間距固定，而兩邊的內(nèi)容寬度相應(yīng)縮小，如下圖所示：

所以就要借助CSS3的calc，如下所示：
1
2
3
input{
width:calc((100%-20px)/2)
}
calc的兼容性IE10及以上支持，android 4及以下不支持，所以考慮到不支持的設(shè)備，可以簡單做個兼容，如下代碼所示：
1
2
3
4
input{
width:48%;
width:calc((100%-20px)/2);
}
如果不支持calc就用48%，這樣差別其實不是很大，就是不是很精確。真的需要的話，你可以多寫幾個媒體查詢變得更精確。
4.左右布局變成上下布局
當(dāng)屏幕拉得很小的時候，左欄已經(jīng)縮得很小了，再變小就不協(xié)調(diào)了，所以這個時候要把左右布局改成上下布局，把右邊的內(nèi)容往下面放。因為右欄在大屏的時候是float:right，所以在中屏的時候覆蓋掉這個浮動的屬性，變成float:none就可以了。原本右欄的內(nèi)容有四行，都比較短，可以考慮把它下面的三行排成一行，即讓它們浮動。如下面代碼所示：
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
.cal-result{
float:right;
width:330px;
}
1
media(max-width:800px){
.cal-result{
float:none;
width:100%;
}
.cal-result.result{
float:left;
width:33%;
}
}

讓每一個result占1/3，然后浮動，效果如下：

5.寬度太小時，自動換行
特別是當(dāng)內(nèi)容是列表ul形式的時候，排不下的li應(yīng)當(dāng)自動換到下一行。當(dāng)然也可以手動控制，如下：
1
2
3
4
5
6
7
8
9
10
11
media(max-width:800px){
.result{
width:33%;
}
}
1
media(max-width:400px){
.result{
width:50%;
}
}
在屏幕寬度小于400的時候，每個結(jié)果就占50%，這樣就排成兩行了。這也是一種常用的辦法，但是在我們這個例子，如果數(shù)字比較小，在iPhone6 375px的屏幕上還是排得下的，如果能保持在一行相對比較美觀。而且固定50%，如果當(dāng)數(shù)字比較大時也有可能會有重疊的危險，這個也有辦法，就是別寫死寬度，而是寫死m(xù)in-width為50%，這樣當(dāng)內(nèi)容比較長時，float的元素同一行排不下就會自動換行。但是知名還是要個辦法讓它能根據(jù)內(nèi)容長度自動換行，當(dāng)然可以用JS計算，但是有點麻煩。
這個時候flex就派上用場了，很簡單，只要設(shè)置兩個屬性：
1
2
3
4
5
.result-container{
display:flex;
justify-content:space-between;
flex-wrap:wrap;
}

space-between讓子元素挨著容器的兩邊等間距排列，而wrap屬性讓子元素自動換行，當(dāng)容器寬度不夠的時候，就有了以下的效果：

這樣還有一個小問題，就是當(dāng)內(nèi)容如果剛剛好占滿時，兩個項之間就沒有間距了，如下圖所示：

這樣就貼在一起了，由于flex的space-between不能指定小的space，所以只通過margin或者padding的方法，如給元素添加margin-right：
1
2
3
.result:not(:last-child){
margin-right:10px;
}

效果如下：

這樣比貼在一起顯示的效果好。
還有從大屏變成成小屏的時候有些字號主要是標(biāo)題的字號和間距要相應(yīng)調(diào)小，這種變小是階梯變化的，而不是像rem一樣連續(xù)變化，而且這種階梯一般只要有兩個就夠了，一個大屏的，一個小屏的。如果你需要做很多階梯的話，那你的排版很可能有問題。
6.使用響應(yīng)式圖片
如相同的頭圖，在電腦上需要使用大圖，但是手機上面使用小圖就好了，不然會造成手機上加載慢浪費流量等問題，一個辦法是使用backgound-image結(jié)合媒體查詢，如下所示：
1
2
3
4
5
6
7
.banner{
background-image:url(/static/large.jpg);
}
media(max-width:500px){
background-image:url(/static/small.jpg);
}
這種方法的缺點是對SEO不太友好，因為如果使用img標(biāo)簽還可以寫個alt屬性。
第二種常用辦法是使用img的srcset或者picture標(biāo)簽做響應(yīng)式圖片，這個我在《Effective前端7：加快頁面打開速度》已經(jīng)提到，這里不再重復(fù)。
這種響應(yīng)式圖片除了大小屏之外，還可以兼顧視網(wǎng)屏即dpr為2及以上的和普通屏dpr為1的屏幕，即在高dpr的屏幕使用2倍圖，而普通屏幕使用1倍圖。
7.其它問題處理
有些地方大小屏的排版差異比較大，例如有些內(nèi)容大屏的時候是挨在一起，而小屏離得比較遠，這個時候你可能得重復(fù)html，寫兩份的標(biāo)簽，大屏的時候隱藏掉小屏的html標(biāo)簽，小屏的時候隱藏掉大屏的html標(biāo)簽。并且這種情況不應(yīng)該是常例，如果你經(jīng)常要寫兩套，那說明你這個頁面可能不太適合寫響應(yīng)式，還不如直接寫兩套呢。
還有個問題，有時候你可能要借助rem/transform:scale做大小縮放，但這一定是下策，我們的原則還是要保持字號和間距不變，當(dāng)屏幕的跨度不是很大的時候。使用transform的后果是屏幕拉小的時候，內(nèi)容跟著變小了，但是由于transform不會造成重排，它占據(jù)的高度還是那么大，下面的內(nèi)容不會跟上來。這樣就得手動計算內(nèi)容的高度。另外如果使用rem，就和響應(yīng)式的思想沖突了。如果頁面的一部分字號使用了rem，另一部分字號使用了px，這樣就不協(xié)調(diào)了，如果你全部寫rem那就不需要使用響應(yīng)式開發(fā)了。這個時候你可能要想一想，是不是UI出得有問題。讓UI重新調(diào)整。
還有，有時候可能會用到高度的媒體查詢，例如在高度小于多少的時候，不能讓彈框超出頁面的高度；在高度大于多少的時候，讓footer的定位fixed在底部，不然footer的下面可能會留白。

網(wǎng)站欄目：響應(yīng)式開發(fā)的心得
分享鏈接：http://jinyejixie.com/news0/216100.html

成都網(wǎng)站建設(shè)公司_創(chuàng)新互聯(lián)，為您提供響應(yīng)式網(wǎng)站、移動網(wǎng)站建設(shè)、小程序開發(fā)、網(wǎng)站內(nèi)鏈、網(wǎng)站設(shè)計公司、App設(shè)計

廣告

聲明：本網(wǎng)站發(fā)布的內(nèi)容（圖片、視頻和文字）以用戶投稿、用戶轉(zhuǎn)載內(nèi)容為主，如果涉及侵權(quán)請盡快告知，我們將會在第一時間刪除。文章觀點不代表本網(wǎng)站立場，如需處理請聯(lián)系客服。電話：028-86922220；郵箱：631063699@qq.com。內(nèi)容未經(jīng)允許不得轉(zhuǎn)載，或轉(zhuǎn)載時需注明來源： 創(chuàng)新互聯(lián)