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

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

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

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

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

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

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

所以就要借助CSS3的calc。如下所示：123input{width:calc((100%-20px)/2)}calc的兼容性IE10及以上支持。android 4及以下不支持。所以考慮到不支持的設備?？梢院唵巫鰝€兼容。如下代碼所示：1234input{width:48%;width:calc((100%-20px)/2);}如果不支持calc就用48%。這樣差別其實不是很大。就是不是很精確。真的需要的話。你可以多寫幾個媒體查詢變得更精確。4.左右布局變成上下布局當屏幕拉得很小的時候。左欄已經(jīng)縮得很小了。再變小就不協(xié)調了。所以這個時候要把左右布局改成上下布局。把右邊的內容往下面放。因為右欄在大屏的時候是float:right。所以在中屏的時候覆蓋掉這個浮動的屬性。變成float:none就可以了。原本右欄的內容有四行。都比較短。可以考慮把它下面的三行排成一行。即讓它們浮動。如下面代碼所示：123456789101112131415.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.寬度太小時。自動換行特別是當內容是列表ul形式的時候。排不下的li應當自動換到下一行。當然也可以手動控制。如下：1234567891011 media(max-width:800px){.result{width:33%;}}1 media(max-width:400px){.result{width:50%;}}在屏幕寬度小于400的時候。每個結果就占50%。這樣就排成兩行了。這也是一種常用的辦法。但是在我們這個例子。如果數(shù)字比較小。在iphone6 375px的屏幕上還是排得下的。如果能保持在一行相對比較美觀。而且固定50%。如果當數(shù)字比較大時也有可能會有重疊的危險。這個也有辦法。就是別寫死寬度。而是寫死m(xù)in-width為50%。這樣當內容比較長時。float的元素同一行排不下就會自動換行。但是知名還是要個辦法讓它能根據(jù)內容長度自動換行。當然可以用JS計算。但是有點麻煩。這個時候flex就派上用場了。很簡單。只要設置兩個屬性：12345.result-container{display:flex;justify-content:space-between;flex-wrap:wrap;}

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

這樣還有一個小問題。就是當內容如果剛剛好占滿時。兩個項之間就沒有間距了。如下圖所示：

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

效果如下：

新聞標題：響應式開發(fā)的心得-網(wǎng)站建設
分享URL：http://jinyejixie.com/news46/292796.html

成都網(wǎng)站建設公司_創(chuàng)新互聯(lián)，為您提供外貿建站、網(wǎng)站維護、網(wǎng)站改版、小程序開發(fā)、動態(tài)網(wǎng)站、品牌網(wǎng)站制作

廣告

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