響應式開發的心得-網站建設

2023-11-06    分類: 網站建設

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

響應式布局是為了解決適配的問題。傳統的開發方式是pC端開發一套。手機端再開發一套。而使用響應式布局只要開發一套就好了。因為它是用的同樣html。所以它的JS邏輯交互也只需寫一套就好了。缺點是CSS比較重。傳統的手機端適配常見有三種解決方案。種是bootstrap的columns布局;第二種是使用全局的rem。先根據屏幕換算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思想一致。只是你可能要根據你自己的業務特點、用戶人群等做不同留白策略。2.屏幕變小時。一頭變窄。另一頭不變

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

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

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

所以就要借助CSS3的calc。如下所示:123input{width:calc((100%-20px)/2)}calc的兼容性IE10及以上支持。android 4及以下不支持。所以考慮到不支持的設備。可以簡單做個兼容。如下代碼所示:1234input{width:48%;width:calc((100%-20px)/2);}如果不支持calc就用48%。這樣差別其實不是很大。就是不是很精確。真的需要的話。你可以多寫幾個媒體查詢變得更精確。4.左右布局變成上下布局當屏幕拉得很小的時候。左欄已經縮得很小了。再變小就不協調了。所以這個時候要把左右布局改成上下布局。把右邊的內容往下面放。因為右欄在大屏的時候是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%。這樣就排成兩行了。這也是一種常用的辦法。但是在我們這個例子。如果數字比較小。在iphone6 375px的屏幕上還是排得下的。如果能保持在一行相對比較美觀。而且固定50%。如果當數字比較大時也有可能會有重疊的危險。這個也有辦法。就是別寫死寬度。而是寫死min-width為50%。這樣當內容比較長時。float的元素同一行排不下就會自動換行。但是知名還是要個辦法讓它能根據內容長度自動換行。當然可以用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;}

效果如下:

新聞標題:響應式開發的心得-網站建設
分享URL:http://m.kartarina.com/news46/292796.html

成都網站建設公司_創新互聯,為您提供外貿建站網站維護網站改版小程序開發動態網站品牌網站制作

廣告

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

成都做網站
主站蜘蛛池模板: 国产av无码久久精品| 永久免费无码网站在线观看| 免费无码又爽又刺激网站| 国产亚洲精久久久久久无码77777| 亚洲乱码无码永久不卡在线| 中文字幕无码成人免费视频| 国产AV无码专区亚汌A√| 亚洲中文字幕久久精品无码A| 日韩综合无码一区二区| 亚洲GV天堂GV无码男同| 国产成人无码精品一区二区三区| 毛片亚洲AV无码精品国产午夜| 无码av最新无码av专区| 中文字幕无码久久精品青草| 亚洲av永久无码天堂网| 日韩一区二区三区无码影院| 日韩人妻无码精品系列| 乱人伦人妻中文字幕无码久久网| 无码人妻一区二区三区免费手机| 中文字幕乱妇无码AV在线| 成人年无码AV片在线观看| 亚洲性无码AV中文字幕| AV无码久久久久不卡网站下载 | 亚洲精品无码专区在线| 久久精品成人无码观看56 | 内射人妻少妇无码一本一道| 成人毛片无码一区二区| 无码国产激情在线观看| 国产久热精品无码激情| 内射精品无码中文字幕| 无码中文人妻在线一区| 无码人妻久久一区二区三区免费丨| 人妻少妇伦在线无码专区视频| 无码137片内射在线影院| 亚洲AV无码乱码国产麻豆穿越| 亚洲精品无码成人AAA片| 无码中文字幕日韩专区视频| 精品无码人妻夜人多侵犯18 | 久久久久亚洲av无码专区导航 | 人妻无码久久中文字幕专区| 天堂无码在线观看|