題目點評

響應式開發是前端開發工作比較常見的工作內容，隨著移動端的發展，網頁設計必須考慮到移動端的設計，同一個網站為了兼容PC端和移動端顯示，響應式開發是前端開發人員必備的技術，所以響應式開發的技術必須掌握。

什么是響應式

顧名思義，同一個網站兼容不同的大小的設備。如PC端、移動端（平板、橫屏、豎排）的顯示風格。

需要用到的技術

1. Media Query（媒體查詢）

用于查詢設備是否符合某一特定條件，這些特定條件包括屏幕尺寸，是否可觸摸，屏幕精度，橫屏豎屏等信息。

2. 使用em或rem做尺寸單位

用于文字大小的響應和彈性布局。

3. 禁止頁面縮放

<meta name="viewport" content="initial-scale=1, width=device-width, maximum-scale=1, user-scalable=no" />

4. 屏幕尺寸響應

a) ?固定布局：頁面居中，兩邊留白，他能適應大于某個值一定范圍的寬度，但是如果太寬就會有很多留白，太窄會出現滾動條，在PC頁面上很常見。

b) ?流動布局：屏幕尺寸在一定范圍內變化時，不改變模塊布局，只改變模塊尺寸比例。比固定布局更具響應能力，兩邊不留白，但是也只能適應有限的寬度變化范圍，否則模塊會被擠（拉）得不成樣子。

c) ?自定義布局：上面幾種布局方式都無法跨域大尺寸變化，所以適當時候我們需要改變模塊的位置排列或者隱藏一些次要元素。

d) ?柵格布局：這種布局方式使得模塊之間非常容易對齊，易于模塊位置的改變用于輔助自定義布局。

響應式設計注意事項?

1.寬度不固定，可以使用百分比

#head{width:100%;} #content{width:50%;}

2. 圖片處理

? ?圖片的寬度和高度設置等比縮放，可以設置圖片的width為百分比，height:auto;

? ?背景圖片可以使用background-size 指定背景圖片的大小。

總結

以上是生活随笔為你收集整理的Web前端面试指导(四十四)：什么是响应式开发？的全部內容，希望文章能夠幫你解決所遇到的問題。

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