響應(yīng)式開發(fā)的心得-網(wǎng)站建設(shè)

什么是響應(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時就認(rèn)為是手機。兩邊留白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.保持中間留白固定?？s小內(nèi)容寬度

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

所以就要借助CSS3的calc。如下所示：123input{width:calc((100%-20px)/2)}calc的兼容性IE10及以上支持。android 4及以下不支持。所以考慮到不支持的設(shè)備?？梢院唵巫鰝€兼容。如下代碼所示：1234input{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)容有四行。都比較短?？梢钥紤]把它下面的三行排成一行。即讓它們浮動。如下面代碼所示：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.寬度太小時。自動換行特別是當(dāng)內(nèi)容是列表ul形式的時候。排不下的li應(yīng)當(dāng)自動換到下一行。當(dāng)然也可以手動控制。如下：1234567891011 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è)置兩個屬性：12345.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：123.result:not(:last-child){margin-right:10px;}

效果如下：

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

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

廣告

聲明：本網(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)