如何讓IE支持CSS3MediaQuery實現(xiàn)響應(yīng)式Web設(shè)計

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

成都創(chuàng)新互聯(lián)2013年開創(chuàng)至今，先為平遠(yuǎn)等服務(wù)建站，平遠(yuǎn)等地企業(yè)，進(jìn)行企業(yè)商務(wù)咨詢服務(wù)。為平遠(yuǎn)企業(yè)網(wǎng)站制作PC+手機+微官網(wǎng)三網(wǎng)同步一站式服務(wù)解決您的所有建站問題。

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

我們需要在頁面中調(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 是什么意思？

代碼如下:

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

彈性內(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;}

頁面寬度縮放的問題

代碼如下:

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

分享題目：如何讓IE支持CSS3MediaQuery實現(xiàn)響應(yīng)式Web設(shè)計
URL地址：http://muchs.cn/article8/jpship.html

成都網(wǎng)站建設(shè)公司_創(chuàng)新互聯(lián)，為您提供網(wǎng)站維護(hù)、網(wǎng)頁設(shè)計公司、面包屑導(dǎo)航、域名注冊、靜態(tài)網(wǎng)站、響應(yīng)式網(wǎng)站

聲明：本網(wǎng)站發(fā)布的內(nèi)容（圖片、視頻和文字）以用戶投稿、用戶轉(zhuǎn)載內(nèi)容為主，如果涉及侵權(quán)請盡快告知，我們將會在第一時間刪除。文章觀點不代表本網(wǎng)站立場，如需處理請聯(lián)系客服。電話：028-86922220；郵箱：631063699@qq.com。內(nèi)容未經(jīng)允許不得轉(zhuǎn)載，或轉(zhuǎn)載時需注明來源：創(chuàng)新互聯(lián)

猜你還喜歡下面的內(nèi)容