響應式
設計與自適應
設計
相信從事前端頁面設計的人都知道，頁面呈現的效果及使用者體驗是非常重要的。當今社會移動裝置的使用已超過了pc端，面對不同解析度的裝置，怎樣做到頁面體驗的效果一樣呢？這就成了最頭疼的事情。
下面我們來看看響應式
設計與自適應
設計兩者
用法：
響應式web設計(
responsive web design
)：主要利用
css3
的媒介查詢（
media
query）
和viewport來
解決問題。
通過媒介查詢的設定，
根據螢幕寬度、螢幕方向等各個
屬性來載入不同
場景下不同的css檔案來渲染頁面的視覺風格。
具體使用方法如下：
1、meta標籤
的viewport
屬性
」viewport」 content=」width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0」
/>
視窗寬度
width=device-width
為裝置寬度
視窗縮放initial-scale=1
為不可縮放狀態
maximum-scale=1
為不可放大
user
-scalable=0
是否允許使用者調整縮放，
如果設定為yes則允許使用者對其改變，
反之則為no，如果
設定為no，那麼minimum-scale
和maximum-scale都將被
忽略，用為根本不
可能縮放。所有
縮放的值都必須在
0.01
-10的
範圍之內。
2、med
ia query
（兩種方式）
a
：通過link標籤
」stylesheet」 type=」text/css」 media=」screen and(max-width: 600px)」 href=」style1.css」/>
示例**
代表當前螢幕寬度小於
600px的時候，載入style1.css
檔案來渲染頁面。b：
css中
直接設定
@media screen and(max-width: 600px)
從上面的例子可以看出，
字元間以空格
相連，選取條件包含在
小括號內
。only
（限定某種裝置，
可省略）
，and
（邏輯與），
not（
排除某種裝置）為
邏輯關鍵字，多種裝置
用逗號分隔，這一點繼承了css基本語法。
3、優
點
面對不同
解析度裝置
靈活性強
能夠快捷解決多
裝置顯示
適應問題
4、缺點
相容各種裝置工作量大，效率低下
**累贅會出現
隱藏無用
的元素，
載入時間加長
一定程度
上改變了
**原有的布局
結構，會出現使用者
混淆的結果
自適應網頁設計（ad
aptive web design
）：指能使網頁自適應
顯示在不同大小終端裝置上
新網頁設計及技術。
主要
注意的問題
如下：
1、
首先在網頁**頭部，加入一行viewport元標籤
」viewport」 content=」width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0」
/>
所有主流瀏覽器
都支援這個設定，包括ie9
，對於那些
老式瀏覽器（
主要是ie6
、7、8），
需要使用css3-mediaqueries.js
—[if lt ie 9]>
2
、不使用
絕對寬度
，
由於網頁會根據螢幕寬度調整布局，不能使用width
: *** px具體
的畫素值，使用百分比width:*** %
或者width:auto
3
、相對大小
的字型，字型也不
能使用絕對大小（
px），而只能使用相對大小（
em）設定
body字型為
100%
，即字型
大小是頁面預設大小的
100%，
也是16px。
例如：p，
即p的大小是
預設大小的
1.5倍（24
px（ 24/16=1.5 ））。
4
、流動布局
：各個
區塊的位置都是
浮動的，不是固定不變的。
.left
.right f
loat的
好處是，如果寬度
太小放不下兩個元素，後面的元素會自動滾到前面元素的下方，不會再水平方向溢位，避免了水平滾動條的出現。
注：絕對定位
（position
: absolute）
的使用，也要非常小心。
5、
的自適應
i
mg 這行**
所以可以寫成：
img object
老版本的ie不支援max-width
，所以只好寫成：
img此外
，windows
平台縮放時，
可能出現
影象失真現象，這
時可以嘗試
使用ie
的專有命令：
img
或者ethan marcotte
的imgsizer.js
addloadevent(function())
注：自適應網頁設計的核心，就是css3引入的media query模組，與響應式布局設計的使用一樣。
兩者區別與選擇：
理論上說，響應式布局在任何情況下都比自適應布局好一些，但在某些情況下自適應布局更切實際。
自適應布局可以讓你的設計更加可控，因為你只需要考慮了了幾種狀態就萬事大吉了。但在響應式布局中你可能需要面對非常多狀態——是的，大部分狀態之間的區別很小，但它們又的確是不同的——這樣一來就很難確切搞清你的設計會是什麼樣。同時這也帶來了測試上的難題，你很難有絕對的把握**到它會怎樣。換個角度說，這也是響應式布局的魅力所在。通過允許表面上的不確定因素存在，你可以獲得更高層次上的確定。雖然你無法在精確到畫素級別準確預知你的設計如何在943px×684px視覺區域匯中展示，但你能確定的是它們一定能展示的很好——不管是表層特徵還是布局結構都有條不紊。
自適應布局有它自己的優勢，因為它們實施起來代價更低，測試更容易，這往往讓他們成為更切實際的解決方案。自適應布局可以看做響應式布局的「窮兄弟」，在資源有限的情況下就可以讓它出馬。特別是改進現有**的時候尤其奏效，因為全部重寫**在這時並不可行。這種案例中，採用自適應布局是乙個不錯的出發點。
其實無論是哪種設計理念都是各有優缺的，還是要從個人實際去求出發去選擇！
響應式與自適應設計
兩者的區別？首先，響應式和自適應最為關鍵的區別是什麼呢？簡而言之，響應式 百分比 就相當於液體，它可以自動適應不同尺寸的螢幕，無論你的裝置尺寸多麼奇葩。響應式使用css media queries的方法，根據目標裝置自動改變風格如顯示型別,寬度 高度等，這能很好解決不同螢幕尺寸的顯示問題。而自適應設...
UI設計中如何做響應式設計與自適應設計
ui設計中如何做響應式設計與自適應設計?由於科技在不斷的發展，小夥伴們上網就不單單只依靠台式電腦了，還有平板電腦膝上型電腦都是可供大家選擇的。面對不同的螢幕解析度 是如何進行適配的呢?今天aaa教育胡老師就和大家聊聊ui設計中如何做響應式設計與自適應設計?1.什麼是響應式設計?2.什麼是自適應設計?...
自適應網頁設計 響應式Web設計
一 自適應網頁設計 的概念 2010年，ethan marcotte提出了 自適應網頁設計 responsive web design 這個名詞，指可以自動識別螢幕寬度 並做出相應調整的網頁設計。他製作了乙個範例，裡面是 福爾摩斯歷險記 六個主人公的頭像。如果螢幕寬度大於1300畫素，則6張併排在一...