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

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

先一個(gè)頁(yè)面的主體內(nèi)容有大的寬度。當(dāng)屏幕超過(guò)這個(gè)寬度時(shí)這個(gè)中間的主體內(nèi)容大就這么大了。不會(huì)再變大了。也就是說(shuō)它固定一個(gè)大寬度。然后居中顯示。如大為1080px。然后當(dāng)大于1024px時(shí)。頁(yè)面主體內(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)、用戶(hù)人群等做不同留白策略。2.屏幕變小時(shí)。一頭變窄。另一頭不變

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

右邊的結(jié)果欄寬度保持不變。左邊的表單欄寬度縮小。因?yàn)橛疫呉坏┚驼缓每戳?。如果右邊變窄。那么字體也要相應(yīng)縮小。字號(hào)一縮小。右邊上下留白就變得太大。這樣就不美觀了。所以只能采取右邊保持不動(dòng)的策略去縮小左邊的內(nèi)容。這種場(chǎng)景比較常見(jiàn)。右邊如果是一個(gè)頭像的話(huà)。它也不能跟著縮小。它一縮小高度也要跟著縮小。導(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è)備?？梢院?jiǎn)單做個(gè)兼容。如下代碼所示：1234input{width:48%;width:calc((100%-20px)/2);}如果不支持calc就用48%。這樣差別其實(shí)不是很大。就是不是很精確。真的需要的話(huà)。你可以多寫(xiě)幾個(gè)媒體查詢(xún)變得更精確。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的屏幕上還是排得下的。如果能保持在一行相對(duì)比較美觀。而且固定50%。如果當(dāng)數(shù)字比較大時(shí)也有可能會(huì)有重疊的危險(xiǎn)。這個(gè)也有辦法。就是別寫(xiě)死寬度。而是寫(xiě)死m(xù)in-width為50%。這樣當(dāng)內(nèi)容比較長(zhǎng)時(shí)。float的元素同一行排不下就會(huì)自動(dòng)換行。但是知名還是要個(gè)辦法讓它能根據(jù)內(nèi)容長(zhǎng)度自動(dòng)換行。當(dāng)然可以用JS計(jì)算。但是有點(diǎn)麻煩。這個(gè)時(shí)候flex就派上用場(chǎng)了。很簡(jiǎn)單。只要設(shè)置兩個(gè)屬性：12345.result-container{display:flex;justify-content:space-between;flex-wrap:wrap;}

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

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

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

效果如下：

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

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

廣告

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