.png)
相關(guān)關(guān)鍵詞
關(guān)于我們
最新文章
- ThinkPHP 5.1、6.0、6.1 與 8.0 版本對比分析
- 涉嫌侵權(quán)的人只復(fù)制了版權(quán)軟件，沒有傳播給其他人，是否符合復(fù)制侵權(quán)的判定？
- 網(wǎng)站域名備案到企業(yè)名下后，即表明是商業(yè)使用了嗎？
- 軟件中使用了GPL & MIT 協(xié)議的文件 和 使用了 GPL | MIT 的有什么區(qū)別？
- 網(wǎng)站版權(quán)糾紛中的來源非法是否有嚴(yán)格的司法定義？
- [確定有效] ECSHOP后臺登錄不了的問題解決 https打不開
- 免費搜索代碼：如何利用百度做一個企業(yè)網(wǎng)站內(nèi)搜索？
- MySQL 中 HAVING 與 REPLACE 的用法解析
- 深入理解 MySQL 的連接操作：-h、-P、-u、-p 詳解
- 在 MySQL Workbench 中自定義導(dǎo)出文件格式的解決方案
讓IE支持CSS3 Media Query實現(xiàn)響應(yīng)式Web設(shè)計
如今的屏幕分辨率，小至320px(iPhone)，大到2560px甚至更高(大顯示器)，變化范圍極大。除了使用傳統(tǒng)的臺式機，用戶會越來越多的通過手機、上網(wǎng)本、iPad一類的平板設(shè)備來瀏覽頁面。這種情況下，固定寬度的設(shè)計方案將會顯得越發(fā)不合理。頁面需要有更好的適應(yīng)性，其布局結(jié)構(gòu)要做到根據(jù)不同的設(shè)備及屏幕分辨率進行響應(yīng)調(diào)整。接下來，我們將了解一下怎樣通過html5和css3 Media Queries(媒介查詢)相關(guān)技術(shù)來實現(xiàn)跨設(shè)備跨瀏覽器的響應(yīng)式web設(shè)計方案。
我們需要在頁面中調(diào)用css3-mediaqueries-js/" rel="external nofollow" style="color: blue; text-decoration: none;" target="_blank">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]-->
接下來，我們要創(chuàng)建css樣式表，并在頁面中調(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 是什么意思？
這是專門針對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;}
頁面寬度縮放的問題
<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)