單蓴de噯

首先了解下什麼是響應式佈局

所謂的響應式佈局就是在同一個頁面下在不同的設備下有不同的佈局。傳統的開發方式就是電腦PC端開發一套CSS ,然後手機端在弄一套CSS，這樣搞非常費時費力，如果在多幾個端的設備，麻煩程度可想而知。而今天我們討論的響應式佈局只需要開發一套CSS即可。

第一種方案：使用CSS3 Media Query,rem，vw 這些新特性

我們可以使用rem來做字體的適配，用 srcset 屬性來做圖片的設置圖片的響應式，寬度可以用rem，佈局可以使用flex，柵格系統等來實現網站的響應式佈局，然後配合使用Media Query 媒體查詢。因此完成響應式佈局你需要注意以下幾點：

• 設置viewport
• 媒體查詢
• 字體的適配（字體單位）
• 百分比佈局
• 圖片的適配（圖片的響應式）
• 結合flex，grid，BFC，柵格系統等已經成型的方案

Media Query （媒體查詢）

使用CSS3媒體查詢的功能，可以讓我們針對不同的屏幕分辨率（媒體類型）定義不同的樣式，當我們隨意放大縮小瀏覽器的窗口大小時，頁面也會根據瀏覽器的寬度和高度選擇對應範圍的CSS樣式。

移動佈局優先還是PC佈局優先

不管我們選擇哪種方式優先 ，都是根據隨著屏幕的變化，後面的樣式會覆蓋前面的樣式，因此如果你選擇移動優先的化，首選是min-width屬性，PC端優先使用max-width。以下圖片展示了移動優先佈局的示例代碼，僅供參考。

百分比佈局

通過百分比佈局，是我們想到最常用的佈局方式，簡單又容易理解。通過百分比單位，可以使得瀏覽器大小的變化其DOM元素內容也隨著等比變化，從而實現響應式的效果。由於其子元素的寬高使用的百分比依賴於父元素的寬和高。這只是簡單一方面，因為頁面裡不光有寬高百分比，還涉及到top、bottom、padding、margin、border-radius這些屬性你要搞清楚這些是相對父元素還是相對自身的概念。這就意味著設計稿出來了，你要進行一些列的百分比運算，還要搞清楚這些百分比是相對於父元素還是自身，大大增加了問題的複雜性。

rem

REM是CSS3新增的單位，並且移動端的支持度很高，Android2.x+,ios5+都支持。rem單位都是相對於根元素html的font-size來決定大小的,根元素的font-size相當於提供了一個基準，當頁面的size發生變化時，只需要改變font-size的值，那麼以rem為固定單位的元素的大小也會發生響應的變化。為了方便大家理解，簡單舉個示例：如果我們每一層div都使用1.2rem，最內層就會是16px x 1.2 = 19.2px。(根元素指的是html的font-size，預設為16px )。如下圖所示：

視口單位

css3中引入了一個新的單位vw/vh，與視圖窗口有關，vw表示相對於視圖窗口的寬度，vh表示相對於視圖窗口高度，除了vw和vh外，還有vmin和vmax兩個相關的單位。例如，在桌面端瀏覽器視口尺寸為650px，那麼 1vw = 650 * 1% = 6.5px（這是理論推算的出，如果瀏覽器不支持0.5px，那麼實際渲染結果可能是7px）。

圖片響應式

所謂的圖片響應式，就是屏幕在不同的分辨率下顯示不同對應尺寸的圖片。一個通常的情況就是根據不同的屏幕分辨率和設備像素比來儘可能選擇高分辨率的圖片，也就是當在小屏幕上不需要高清圖或大圖，這樣我們用小圖代替，就可以減少網絡帶寬了。

這是我提供的一個自行DIY的響應式方案，不需要藉助第三方框架，但是你需要掌握我剛才提及的一些概念，學會靈活運用，但是有點需要強調的是你需要考慮到兼容性的問題，比如Flex彈性佈局，Grid網格佈局的兼容性，比如在ie低版本瀏覽器上不支持。

第二種方案：使用Columns柵格系統，藉助第三方庫比如Bootstrap

如果你覺得我上述說的那一大堆比較麻煩，你可以學習Bootstrap這個CSS框架，這個就需要你們的設計需要了解什麼是柵格佈局，做的產品設計需要嚴格按照柵格佈局的思路進行設計。Bootstrap 目前是最受歡迎的 HTML、CSS 和 JS 框架，用於開發響應式佈局、移動設備優先的 WEB 項目。目前國外好多主流的網站都在使用Bootstrap。

小節

今天的分享就給大家介紹到這裡，我們一起了解了使用兩種方案實現響應式的佈局，方案一你需要了解的新內容會更多些，還需要多實踐。方案二，你只要學會 Bootstrap這個框架即可，同時設計還需要理解柵格佈局這個概念，設計稿要符合柵格佈局的思路。

前端達人

這樣就只能做響應式佈局了，不過不是以js 來主導，得用css 來主導，目前我瞭解到的有：

1. 媒體查詢

CSS 媒體查詢可以讓我們針對不同的媒體類型定義不同的樣式，當重置瀏覽器窗口大小的過程中，頁面也會根據瀏覽器的寬度和高度重新渲染頁面。

2.百分比佈局

3. rem佈局

當然還有其他方案，這個就有待各位大咖的發揮了，希望我的回覆能幫到你

一個小DD

做一個網頁，不僅只靠js，主要分為結構層，樣式層，交互層。針對您所說，那就是需要響應式的網頁了，響應式包括：頁面窗口的大小，字體，圖片等。需要在不同的窗口中讓不同的瀏覽者感受同一樣的效果與體驗，窗口響應式需要視窗viewport 與css的媒體查詢結合來實現，字體圖片等需要rem與css媒體查詢結合來實現。當然我說的都是用原生的寫法，現在都有不同的框架可以實現你要的效果，像bootstrap 、vue等都是比較好的，希望能夠幫到你。

清風破送

放大縮小不改變排版，這一般是指前端的響應式技術。

當然，響應式技術也有一定的界限範圍的。如果將電腦端的網頁，縮小放到手機端也不改變排版，這樣出來的效果會很差。

響應式技術核心是通過媒體查詢，實現一套設計，適配不同尺寸的屏幕。在尺寸的某個區間內，其排版不變，而超出區間，則排版發生改變。

如果確實希望怎樣縮小放大排版均不會發生變化，直接使用百分比佈局即可，不需要額外的技術，但用戶體驗肯定不夠好。

前端面試題

PC端添加以下meta內容即可： .... 2. Mobile端添加以下meta內容即可： ..... 說明： target-densitydpi=device-dpi，指定屏幕像素密度DPI，device-dpi 為設備原本的DPI值，不會有任何縮放。

關鍵字: 響應 排版 科技