題目點(diǎn)評(píng)

響應(yīng)式開(kāi)發(fā)是前端開(kāi)發(fā)工作比較常見(jiàn)的工作內(nèi)容，隨著移動(dòng)端的發(fā)展，網(wǎng)頁(yè)設(shè)計(jì)必須考慮到移動(dòng)端的設(shè)計(jì)，同一個(gè)網(wǎng)站為了兼容PC端和移動(dòng)端顯示，響應(yīng)式開(kāi)發(fā)是前端開(kāi)發(fā)人員必備的技術(shù)，所以響應(yīng)式開(kāi)發(fā)的技術(shù)必須掌握。

什么是響應(yīng)式

顧名思義，同一個(gè)網(wǎng)站兼容不同的大小的設(shè)備。如PC端、移動(dòng)端（平板、橫屏、豎排）的顯示風(fēng)格。

需要用到的技術(shù)

1. Media Query（媒體查詢）

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

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

用于文字大小的響應(yīng)和彈性布局。

3. 禁止頁(yè)面縮放

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

4. 屏幕尺寸響應(yīng)

a) ?固定布局：頁(yè)面居中，兩邊留白，他能適應(yīng)大于某個(gè)值一定范圍的寬度，但是如果太寬就會(huì)有很多留白，太窄會(huì)出現(xiàn)滾動(dòng)條，在PC頁(yè)面上很常見(jiàn)。

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

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

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

響應(yīng)式設(shè)計(jì)注意事項(xiàng)?

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

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

2. 圖片處理

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

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

總結(jié)

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

如果覺(jué)得生活随笔網(wǎng)站內(nèi)容還不錯(cuò)，歡迎將生活随笔推薦給好友。