如何讓IE支持CSS3 Media Query實現響應式Web設計

這篇文章將為大家詳細講解有關如何讓IE支持CSS3 Media Query實現響應式Web設計，小編覺得挺實用的，因此分享給大家做個參考，希望大家閱讀完這篇文章后可以有所收獲。

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

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

代碼如下:

<!--[if lt IE 9]><script src="http://css3-mediaqueries-js.googlecode.com/svn/trunk/css3-mediaqueries.js"></script><![endif]-->

接下來，我們要創建css樣式表，并在頁面中調用：

代碼如下:

<link href="media-queries.css" rel="stylesheet" type="text/css">

彈性圖片

代碼如下:

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

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

代碼如下:

這是專門針對ie的hack寫法“\9&Prime;
在IE6/IE7/IE8/IE9/IE10下生效
“\0” 在 IE8/IE9/IE10下生效
“\9\0” 在IE9/IE10下生效

彈性內嵌元素(視頻)

代碼如下:

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

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

代碼如下:

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

頁面寬度縮放的問題

代碼如下:

<meta name="viewport" content="width=device-width, user-scalable=no, initial-scale=1.0; maximum-scale=1.0; user-scalable=0;">

關于“如何讓IE支持CSS3 Media Query實現響應式Web設計”這篇文章就分享到這里了，希望以上內容可以對大家有一定的幫助，使各位可以學到更多知識，如果覺得文章不錯，請把它分享出去讓更多的人看到。