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

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

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

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

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

右邊的結(jié)果欄寬度保持不變。左邊的表單欄寬度縮小。因?yàn)橛疫呉坏┚驼缓每戳恕Ｈ绻疫呑冋?。那么字體也要相應(yīng)縮小。字號一縮小。右邊上下留白就變得太大。這樣就不美觀了。所以只能采取右邊保持不動(dòng)的策略去縮小左邊的內(nèi)容。這種場景比較常見。右邊如果是一個(gè)頭像的話。它也不能跟著縮小。它一縮小高度也要跟著縮小。導(dǎo)致上下太空。所以這種情況也不能動(dòng)。3.保持中間留白固定。縮小內(nèi)容寬度

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

所以就要借助CSS3的calc。如下所示：123input{width:calc((100%-20px)/2)}calc的兼容性IE10及以上支持。android 4及以下不支持。所以考慮到不支持的設(shè)備?？梢院唵巫鰝€(gè)兼容。如下代碼所示：1234input{width:48%;width:calc((100%-20px)/2);}如果不支持calc就用48%。這樣差別其實(shí)不是很大。就是不是很精確。真的需要的話。你可以多寫幾個(gè)媒體查詢變得更精確。4.左右布局變成上下布局當(dāng)屏幕拉得很小的時(shí)候。左欄已經(jīng)縮得很小了。再變小就不協(xié)調(diào)了。所以這個(gè)時(shí)候要把左右布局改成上下布局。把右邊的內(nèi)容往下面放。因?yàn)橛覚谠诖笃恋臅r(shí)候是float:right。所以在中屏的時(shí)候覆蓋掉這個(gè)浮動(dòng)的屬性。變成float:none就可以了。原本右欄的內(nèi)容有四行。都比較短?？梢钥紤]把它下面的三行排成一行。即讓它們浮動(dòng)。如下面代碼所示：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%;}}

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

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

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

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

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

效果如下：

新聞標(biāo)題：響應(yīng)式開發(fā)的心得-網(wǎng)站建設(shè)
分享URL：http://www.ekvhdxd.cn/news46/292796.html

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

廣告

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