那些年，我們一起玩過的響應式布局

的資源很豐富，也很精彩。不過這些精彩的東西放到一些移動終端上閱覽就不堪入目了，體驗相當不好。

你可以忍受每一次開啟部落格，還得放大螢幕閱讀麼？整個螢幕都擠滿了很小很小的文字，反正我是受夠了。

所以，我們需要改變！！！先看看什麼是響應式布局，你所看的這篇文章就是採用響應時布局~ （現代瀏覽器才能看到效果）

我的理解就是，為了讓使用者享受更好的體驗效果，給使用者展現最有價值的資訊，讓同乙個頁面在不同終端上有不一樣的展現效果。比如你正在閱讀的這篇部落格，當你縮小（放大）瀏覽器視窗時（先滾動頂部，因為頂部做了比較多的修改，效果比較明顯），你會看到這些神奇的效果。

正常情況下，頂****的：

稍微縮小一點，是這樣的：

再縮小一點：

還可以再小一點，

這個變化就相當大了，很多東西都不見了，元素的位置也改變了

那麼，什麼是響應式布局，你有了一定的理解麼~

技術太普遍了，大家都會用，可是真正讓使用者感到舒適的，還是好的設計。我是這樣考慮的：

1. 螢幕分類：

根據移動終端的尺寸（解析度），我大概做了這麼些分類：

←480px 481px~700px 701px~960px 961px→

首先搞清楚你的使用者群所使用的終端型別和比例，這是2023年第二季度的統計資料

iphone、nokia、htc、samsung和moto 五個品牌的移動終端位居前五位，佔比分別為22.13%、13.98 和11.69%、10.87% 和7.47%，其次為huawei、sony 和zte 等。

感興趣的話，可以去搜搜這些終端的解析度是多少，然後針對這些資料做乙個分類~我不多說了。

2. 不同的需求

乙個比較小的螢幕能夠容納多少資料，展現多少資訊，這一點必須把握住，比如當裝置寬度是480畫素的時候，我們沒必要展現太多的資訊，因為你展現出來使用者也不會看，這些冗餘資訊只會影響使用者對資訊主次的判斷，甚至他們會覺得這些冗餘資訊太多，而跳過你的內容。

我的設計是這樣的：

再比如：剛開始的時候，那個推薦&反對的塊及貼在文章的右側，當視窗縮小之後，我把他放到了右下角，再小些，為了展示更多的內容，直接把他給隱藏了~

技術核心是media query，網上都說爛了。

給推薦兩篇博文：

這兩個部落格的布局也是響應式布局。

需要注意的幾個點：

1. head中記得加上這句話：

<
meta 
name
="viewport"
content
="width=device-width; initial-scale=1.0"
/>

如果不加，效果就是本文第一章圖所示，文字會很小很多的擠在乙個頁面上。

2. media query雖然好用，但是低版本ie不支援，不要糾結，咱把他給忽視掉~o(∩_∩)o~

如果你太固執一定要考慮的話，推薦這個：

把這句話加到你的**頂部，我試過了，相當不好用，響應式效果甚微。

1. 這個**，你可以試試，戳測試工具

說了半天，有些童鞋可能等不及想去試試了~

曬曬我弄的幾行**，有興趣的可以參考下：../file/media-480.css

響應式布局是這幾年很流行的乙個設計理念，隨著移動網際網路的盛行，為解決如今各式各樣的瀏覽器解析度以及不同移動裝置的顯示效果，響應式布局顯得十分重要。設計雖好，我覺得也存在諸如一下的一些弊端：

1. 頁面需要載入更多額外的內容，比如我們的手機看這個頁面的話，體驗效果還行，但是那些次要的內容依然被載入進來了，沒看看見是因為被我display:none給隱藏了。

所以，如果想得到好的使用者體驗，同時節省流量的話，應該在載入之前做一些判斷。

2. 還是存在相容性問題，要知道，現在ie6-8所佔的市場份額仍然在40%+，這麼龐大的使用者群我們暫時是不能忽略的，若引用其他的js來矯正，這個太費資源，不可取，而且事實表明這些js並不好用。

p.s：本文都是直接截圖，沒有做優化處理，整個頁面體積過於龐大，看來的優化和lazyload很有必要啊！！！下次弄乙個簡潔版的lazyload用用~~

最後。。。來一張萌圖，哈哈哈~