什么是響應(yīng)式

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

需要用到的技術(shù)

一、 Media Query（媒體查詢）
用于查詢設(shè)備是否符合某一特定條件，這些特定條件包括屏幕尺寸，是否可觸摸，屏幕精度，橫屏豎屏等信息。

利用@media進(jìn)行斷點(diǎn)，在每個(gè)斷點(diǎn)中編寫css

@media (max-width:768px){//css }

在MDN,@media上，發(fā)現(xiàn)很多值都可以做判斷的。寬，高，寬高比，顏色（這個(gè)是指定輸出設(shè)備每個(gè)像素單位的比特值），是否橫屏或豎屏，還有很多，可以去MDN看看。

二、 使用em或rem做尺寸單位

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

三、禁止頁面縮放

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

四、屏幕尺寸響應(yīng)

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

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

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

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

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

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

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

2.圖片處理

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

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

例子

響應(yīng)式布局的時(shí)候，輪播圖使用兩張不同的圖片去適配大屏幕和超小屏幕，還是一張圖片進(jìn)行壓縮適配不同終端，說明原因？

答:
最好使用兩張不同大小的圖片去適配大屏幕和超小屏幕，這樣可以針對不同設(shè)備的屏幕大小，來加載響應(yīng)的圖片，減少超小屏幕設(shè)備的網(wǎng)絡(luò)流量消耗，加快響應(yīng)速度，同時(shí)防止圖片在大屏幕下分辨率不夠?qū)е率д娴膯栴}。

轉(zhuǎn)自：http://blog.csdn.net/lxcao/article/details/52853093

總結(jié)

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

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