如今的屏幕分辨率，小至320px(iPhone)，大到2560px甚至更高(大顯示器)，變化范圍極大。除了使用傳統(tǒng)的臺式機，用戶會越來越多的通過手機、上網(wǎng)本、iPad一類的平板設備來瀏覽頁面。這種情況下，固定寬度的設計方案將會顯得越發(fā)不合理。頁面需要有更好的適應性，其布局結構要做到根據(jù)不同的設備及屏幕分辨率進行響應調(diào)整。接下來，我們將了解一下怎樣通過html5和css3 Media Queries(媒介查詢)相關技術來實現(xiàn)跨設備跨瀏覽器的響應式web設計方案。 

我們需要在頁面中調(diào)用css3-mediaqueries.js文件，來幫助IE8或是之前的版本支持CSS3 media queries： 


接下來，我們要創(chuàng)建css樣式表，并在頁面中調(diào)用：

彈性圖片

img {max-width:100%;height:auto;width:auto\9; /* ie8 */}

CSS里width: auto\9 是什么意思？

彈性內(nèi)嵌元素(視頻)

.video embed,.video object,.video iframe {width: 100%;height: auto;}


字號自動調(diào)整的問題(通過-webkit-text-size-adjust:none禁用iPhone中Safari的字號自動調(diào)整)

html{-webkit-text-size-adjust:none;}

頁面寬度縮放的問題