|
文章目錄 當(dāng)今屏幕分辨率從 先看看它的效果在開始之前，點擊最終預(yù)覽來看看它的效果,。改變?yōu)g覽器的寬度,，你將會看到頁面布局會跟著自動改變。
概述當(dāng)屏幕分辨率大于
HTML 代碼以下只是代碼的主題結(jié)構(gòu),，我用了 復(fù)制 div id=”pagewrap”> header id=”header”> hgroup> h1 id=”site-logo”>Demoh1> h2 id=”site-description”>Site Descriptionh2> hgroup> nav> ul id=”main-nav”> li> a href=”#”>Homea>li> ul> nav> form id=”searchform”> input type=”search”> form> header> div id=”content”> article>blog postarticle> div> aside id=”sidebar”> section>widgetsection> aside> footer id=”footer”>footerfooter>div> HTML5.js上面我用了html5,，但低于IE9版本IE瀏覽器并不支持 復(fù)制 !–[if lt IE 9]>script src='http://html5shim./svn/trunk/html5.js'>/script>![endif]–>//國內(nèi)無法訪問，可替換成：http://apps./libs/html5shiv/3.7/html5shiv.min.jsCSS把HTMl5元素定義成塊（display: block;）下面將會用CSS吧HTML5元素 ( 復(fù)制 article, aside, details, figcaption, figure, footer, header, hgroup, menu, nav, section{display: block;}主體結(jié)構(gòu)的CSS樣式
復(fù)制 #pagewrap {width: 980px;margin: 0 auto;}#header {height: 160px;}#content {width: 600px;float: left;}#sidebar {width: 280px;float: right;}#footer {clear: both;}第一步效果預(yù)覽注意現(xiàn)在還不能自適應(yīng),，改變?yōu)g覽器寬度后網(wǎng)頁結(jié)構(gòu)并不會跟著改變。 CSS3媒體查詢（CSS3 Media Query）媒體查詢腳本（Media Queries Javascript）IE8或者更低的版本不支持CSS3媒體查詢,，但通過添加腳本 css3-mediaqueries.js來實現(xiàn)這一功能,。 復(fù)制 !–[if lt IE 9]>script src='http://css3-mediaqueries-js./svn/trunk/css3-mediaqueries.js'>/script>![endif]–>//國內(nèi)無法訪問，可替換成：http://cdn./livingston-css3-mediaqueries-js/1.0.0/css3-mediaqueries.js媒體查詢CSS（Media Queries CSS）為媒體查詢創(chuàng)建新的CSS樣式表,，媒體查詢?nèi)绾喂ぷ髡埐榭次乙郧暗慕坛蹋?a href='http:///tutorials/css3-media-queries' target='_blank'>media queries ） 復(fù)制 link href='media-queries.css' rel='stylesheet' type='text/css'>分辨率小于980px（流動布局）當(dāng)屏幕分辨率小于
復(fù)制 @media screen and (max-width: 980px) {#pagewrap {width: 95%;}#content {width: 60%;padding: 3% 4%;}#sidebar {width: 30%;}#sidebar .widget {padding: 8% 7%;margin-bottom: 10px;}}分辨率小于650px（一列布局）當(dāng)屏幕分辨率小于
復(fù)制 @media screen and (max-width: 650px) {#header {height: auto;}#searchform {position: absolute;top: 5px;right: 0;}#main-nav {position: static;}#site-logo {margin: 15px 100px 5px 0;position: static;}#site-description {margin: 0 0 15px;position: static;}#content {width: auto;float: none;margin: 20px 0;}#sidebar {width: 100%;float: none;margin: 0;}}分辨率小于480px下面是小于
復(fù)制 @media screen and (max-width: 480px) {html {-webkit-text-size-adjust: none;}#main-nav a {font-size: 90%;padding: 10px 8px;}}圖片的靈活顯示為了讓圖片顯示更加靈活，只需設(shè)置 復(fù)制 img {max-width: 100%;height: auto;width: auto\9; /* ie8 */}嵌入類視頻的靈活顯示為了讓嵌入視頻顯示更加靈活,，需要用上面同樣的方法。不知道是什么原因,， 復(fù)制 .video embed,.video object,.video iframe {width: 100%;height: auto;}初始化MeTa標(biāo)簽(iPhone)默認情況下，iPhone的Safari瀏覽器會自動縮小頁面來顯示,，下面來使用Meta標(biāo)簽讓網(wǎng)頁字節(jié)按CSS樣式顯示,。 復(fù)制 meta name='viewport' content='width=device-width; initial-scale=1.0'>最終預(yù)覽改變你的瀏覽器寬度將會看到媒體查詢讓版式的變化，別忘了在其他設(shè)備上檢驗這一效果,。
|
|
|
