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

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

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

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

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

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

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

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

　　讓每一個(gè)result占1/3，然后浮動(dòng)，效果如下：

　　5.寬度太小時(shí)，自動(dòng)換行
　　特別是當內容是列表ul形式的時(shí)候，排不下的li應當自動(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的時(shí)候，每個(gè)結果就占50%，這樣就排成兩行了。這也是一種常用的辦法，但是在我們這個(gè)例子，如果數字比較小，在iPhone6 375px的屏幕上還是排得下的，如果能保持在一行相對比較美觀(guān)。而且固定50%，如果當數字比較大時(shí)也有可能會(huì )有重疊的危險，這個(gè)也有辦法，就是別寫(xiě)死寬度，而是寫(xiě)死min-width為50%，這樣當內容比較長(cháng)時(shí)，float的元素同一行排不下就會(huì )自動(dòng)換行。但是知名還是要個(gè)辦法讓它能根據內容長(cháng)度自動(dòng)換行，當然可以用JS計算，但是有點(diǎn)麻煩。
　　這個(gè)時(shí)候flex就派上用場(chǎng)了，很簡(jiǎn)單，只要設置兩個(gè)屬性：
　　1
　　2
　　3
　　4
　　5
　　.result-container{
　　display:flex;
　　justify-content:space-between;
　　flex-wrap:wrap;
　　}

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

　　這樣還有一個(gè)小問(wèn)題，就是當內容如果剛剛好占滿(mǎn)時(shí)，兩個(gè)項之間就沒(méi)有間距了，如下圖所示：

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

　　效果如下：

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

http://ezekroy.com/jianzhanzhishi/6735.html 響應式開(kāi)發(fā)的心得-深圳網(wǎng)站建設