讓IE支持CSS3 Media Query實(shí)現(xiàn)響應(yīng)式Web設(shè)計(jì)
我要評(píng)論如今的屏幕分辨率，小至320px(iPhone)，大到2560px甚至更高(大顯示器)，變化范圍極大。除了使用傳統(tǒng)的臺(tái)式機(jī)，用戶會(huì)越來越多的通過手機(jī)、上網(wǎng)本、iPad一類的平板設(shè)備來瀏覽頁(yè)面。這種情況下，固定寬度的設(shè)計(jì)方案將會(huì)顯得越發(fā)不合理。頁(yè)面需要有更好的適應(yīng)性，其布局結(jié)構(gòu)要做到根據(jù)不同的設(shè)備及屏幕分辨率進(jìn)行響應(yīng)調(diào)整。接下來，我們將了解一下怎樣通過html5和css3 Media Queries(媒介查詢)相關(guān)技術(shù)來實(shí)現(xiàn)跨設(shè)備跨瀏覽器的響應(yīng)式web設(shè)計(jì)方案。
我們需要在頁(yè)面中調(diào)用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]-->
接下來，我們要?jiǎng)?chuàng)建css樣式表，并在頁(yè)面中調(diào)用：
<link href="media-queries.css" rel="stylesheet" type="text/css">
彈性圖片
img {max-width:100%;height:auto;width:auto\9; /* ie8 */}
CSS里width: auto\9 是什么意思？
這是專門針對(duì)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;}
字號(hào)自動(dòng)調(diào)整的問題(通過-webkit-text-size-adjust:none禁用iPhone中Safari的字號(hào)自動(dòng)調(diào)整)
html{-webkit-text-size-adjust:none;}
頁(yè)面寬度縮放的問題
<meta name="viewport" content="width=device-width, user-scalable=no, initial-scale=1.0; maximum-scale=1.0; user-scalable=0;">
原文轉(zhuǎn)載自WEB前端開發(fā)(www.css119.com)
相關(guān)文章
CSS3 media queries + jQuery實(shí)現(xiàn)響應(yīng)式導(dǎo)航
這篇文章主要介紹了CSS3 media queries + jQuery實(shí)現(xiàn)響應(yīng)式導(dǎo)航的相關(guān)資料,非常不錯(cuò)，具有參考借鑒價(jià)值，需要的朋友可以參考下2016-09-30css3 media 響應(yīng)式布局的簡(jiǎn)單實(shí)例
下面小編就為大家?guī)硪黄猚ss3 media 響應(yīng)式布局的簡(jiǎn)單實(shí)例。小編覺得挺不錯(cuò)的，現(xiàn)在就分享給大家，也給大家做個(gè)參考。一起跟隨小編過來看看吧2016-08-03- 下面小編就為大家?guī)硪黄猚ss3media響應(yīng)式布局實(shí)例。小編覺得挺不錯(cuò)的，現(xiàn)在就分享給大家，也給大家做個(gè)參考。一起跟隨小編過來看看吧2016-07-08
css3的@media屬性實(shí)現(xiàn)頁(yè)面響應(yīng)式布局示例代碼
使用css3的@media屬性可以實(shí)現(xiàn)頁(yè)面響應(yīng)式布局，下面有個(gè)不錯(cuò)的示例，大家可以參考下2014-02-10CSS3 Media Queries(響應(yīng)式布局可以讓你定制不同的分辨率和設(shè)備)
Media Queries這功能是非常強(qiáng)大的，他可以讓你定制不同的分辨率和設(shè)備，并在不改變內(nèi)容的情況下，讓你制作的web頁(yè)面在不同的分辨率和設(shè)備下都能顯示正常，并且不會(huì)因此而丟2013-06-06詳解使用CSS3的@media來編寫響應(yīng)式的頁(yè)面
這篇文章主要介紹了詳解使用CSS3的@media來編寫響應(yīng)式的頁(yè)面,小編覺得挺不錯(cuò)的，現(xiàn)在分享給大家，也給大家做個(gè)參考。一起跟隨小編過來看看吧2017-11-01