響應式布局是什么？ 響應式布局就是同一頁面在不同的屏幕上有不同的布局，即只需要一套代碼使頁面適應不同的屏幕（也可以說是一套代碼實現多種設備訪問一致性(pc、平板、手機)）。ie8及其以下不兼容。 如何實現響應式布局？ 方案一：百分比布局 利用對屬性設置百分比來適配不同屏幕，百分比是相對于父容器。能夠設置的屬性有：padding、margin、width、height。 注意：當屏幕大于圖片的寬度時，會進行拉伸；解決拉伸方法就是改為max-width: 50%，但當屏幕大于圖片的寬度時，兩邊會有空白。欄目是利用設置單欄目 width: 25%來適應不同的分辨率。 方案二：使用媒體查詢 (CSS3 @media 查詢) 根據媒體查詢設置不同分辨率下的css樣式，來適配不同屏幕。 @media的語法格式： ?? ?//例如設備小于700像素.... ?? ?@media only screen and (max-width:700px){ ?? ?} ?? ?， ： ?? ?and ： ?? ?not ： ?? ?only : 可以排除不支持媒體查詢的瀏覽器 ?? ?screen ：設備類型? ?? ?? ?max-width ：設備特性 ?? ?//可選設備 ????-all 所有設備 ????-print 打印設備 ????-screen 帶屏幕的設備 ????-speech 屏幕閱讀器 ?? ? ?? ?//例如設備大于300但小于700像素.... ?? ?@media only screen and (max-width:700px) and (min-width:300px){ ?? ?} 媒體查詢相對于百分比布局，可以對布局進行更細致的調整，但需要在每個分辨率下面都寫一套 css 樣式，視具體情況而定。? 注意：IE6、7、8 不支持媒體查詢。 方案三：rem 響應式布局 當前頁面中元素的rem 單位的樣式值都是針對于html 元素的font-size 的值進行動態計算的，所以有兩種方法可以達到適配不同屏幕：①可以利用媒體查詢，在不同分辨率下給 html 的 font-size 賦值，②也可以利用 js 動態計算賦值。 缺點：打開頁面時候，元素大小會有一個變化過程。 方案四：vw 響應式布局 根據 PSD 文件寬度或高度作為標準，元素單位 px 轉換為 vw 或 vh，比如font-size: 12px，PSD 文件寬度 375，轉換公式 12 * 100 / 375，則樣式改為font-size: 3.2vw，下面是我經常使用的工具，有利于提高轉換效率。 現階段手機端用的最多就是這個方法，能保持不同屏幕下元素顯示效果一致， 也不用寫多套樣式。 vw單位 1.移動端不能使用px來進行布局，固定的像素長度在不同手機中的表現是不一樣的。 2.vw表示的是視口的寬度。（100vw = 一個視口寬度、1vw = 1%視口寬度） 3.和百分比不同，vw單位永遠都是相對于視口寬度進行計算，百分比相對于父元素。 vw適配 1.網頁中字體大小最小是12，除0外不能設置比12像素還小的字體，如果我們設置了一個小于12px的字體網頁自動設置為12px。 方案五：flex 彈性盒子布局 方案六：利用UI框架實現響應式布局 其實，現在的主流UI框架都會考慮到響應式布局這個問題，比如elementUI,iview等框架提供了柵格系統，<row>搭配<col>來實現響應式布局。所以在工作中直接哪來使用就完事了。 方案七：移動端響應式布局viewport <meta name = "viewport" content = "width=device-width,initial-scale-1.0, maxmum-scale-1.0, user-scalable-no" /> width= device-width:是自適應手機屏幕的尺寸寬度。? maximum-scale:是縮放比例的最大值。? minimum-scale:是縮放比例的最小值。? inital-scale:是縮放的初始化。 user-scalable:是用戶的可以縮放的操作。 這個寫法是用戶不同縮放的頁面設計。因為，如果頁面能縮放的話，就會影響用戶的體驗，在手機端，我們都可以找到點擊的按鈕或者自己感興趣的菜單進行操作。其二：就是我們如果讓頁面縮放的話，就萬全暴露了我們手機app的程序是html的架構了。所以，我們專為移動端的設計頁面的時候，就不需要用戶進行縮放了。 方案八：flexible.js flexible.js是阿里手淘團隊開發的。用來解決移動端的適配問題。 假設現在要適配一個iphone6的設備。設計師給了一個750px款的的設計稿(注意這里是750px而不是375px)前端工程師用750px的這個比例開始還原把寬高是px的轉換成rem字體使用px而不使用remflexible.js會自動判斷dpr進行整個布局視口的縮放，至于flexible.js怎么使用的可以自行搜索。

總結

以上是生活随笔為你收集整理的响应式布局实现方案的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。