什么是響應式

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

需要用到的技術

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

利用@media進行斷點，在每個斷點中編寫css

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

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

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

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

三、禁止頁面縮放

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

四、屏幕尺寸響應

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

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

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

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

響應式設計注意事項

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

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

2.圖片處理

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

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

例子

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

答:
最好使用兩張不同大小的圖片去適配大屏幕和超小屏幕，這樣可以針對不同設備的屏幕大小，來加載響應的圖片，減少超小屏幕設備的網絡流量消耗，加快響應速度，同時防止圖片在大屏幕下分辨率不夠導致失真的問題。

轉自：http://blog.csdn.net/lxcao/article/details/52853093

總結

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

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