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

什么是響應(yīng)式

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

1. Media Query（媒體查詢）

<media=”screenand(max-device-width:400px)” href=”tinyScreen.css”/>

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

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

3. 禁止頁面縮放

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

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

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

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

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

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

5、不使用絕對(duì)寬度

轉(zhuǎn)載于:https://www.cnblogs.com/xiaoan0705/p/8612317.html

總結(jié)

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

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