本篇內(nèi)容主要講解“怎么利用媒體查詢進(jìn)行web響應(yīng)式設(shè)計(jì)”，感興趣的朋友不妨來看看。本文介紹的方法操作簡單快捷，實(shí)用性強(qiáng)。下面就讓小編來帶大家學(xué)習(xí)“怎么利用媒體查詢進(jìn)行web響應(yīng)式設(shè)計(jì)”吧!

我們一直強(qiáng)調(diào)成都網(wǎng)站設(shè)計(jì)、成都網(wǎng)站制作對(duì)于企業(yè)的重要性,如果您也覺得重要,那么就需要我們慎重對(duì)待,選擇一個(gè)安全靠譜的網(wǎng)站建設(shè)公司,企業(yè)網(wǎng)站我們建議是要么不做，要么就做好,讓網(wǎng)站能真正成為企業(yè)發(fā)展過程中的有力推手。專業(yè)網(wǎng)站制作公司不一定是大公司,成都創(chuàng)新互聯(lián)作為專業(yè)的網(wǎng)絡(luò)公司選擇我們就是放心。

首先看個(gè)實(shí)例

在你開始之前，看下最終demo是什么樣子。改變你瀏覽器的大小，然后看看頁面布局在基于viewport（瀏覽器可視區(qū)域）寬度的情況下是如何自動(dòng)的進(jìn)行浮動(dòng)的。

更多例子

如果你想看更多的例子，看一下下面我用媒體查詢?cè)O(shè)計(jì)的WordPress模板：Tisa，Elemin，Suco，iTheme2，F(xiàn)unki，Minblr和Wumblr。

概覽

對(duì)于任何寬度大于1024px的分辨率，頁面容器的寬度會(huì)為980px。媒體查詢被用來檢查如果viewport窄于980px，那么頁面布局會(huì)變 成流動(dòng)寬度而不是固定寬度。如果viewport窄于650px，那么頁面布局將會(huì)把內(nèi)容容器和側(cè)邊欄展開為整體寬度，從而形成一個(gè)單欄的布局。

HTML代碼

我不會(huì)去講HTML代碼的細(xì)節(jié)。下面是頁面布局的整體結(jié)構(gòu)。我擁有一個(gè)pagewrap容器，它把header，content，sidebar，footer包裹在了一起。

<div id="pagewrap">     <header id="header">         <hgroup>             <h2 id="site-logo">Demo</h2>             <h3 id="site-description">Site Description</h3>         </hgroup>         <nav>             <ul id="main-nav">                 <li><a href="#">Home</a></li>             </ul>         </nav>         <form id="searchform">             <input type="search">         </form>     </header>      <div id="content">         <article class="post">             blog post         </article>     </div>      <aside id="sidebar">         <section class="widget">              widget         </section>     </aside>      <footer id="footer">         footer     </footer> </div>

HTML5.js

注意一下我在demo中使用了HTML5標(biāo)簽。低于9的IE瀏覽器不支持HTML5中引入的新元素，比如 <header>，<article>，<footer>，<figure>等等。在HTML文檔中包含html5.js這個(gè)Javscript文件可以使IE識(shí)別這些新元素。

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

CSS

重置HTML5元素為塊元素

下面的CSS將會(huì)把HTML元素（article，aside，figure，header，footer等等）重置為塊元素。

article, aside, details, figcaption, figure, footer, header, hgroup, menu, nav, section {      display: block; }

主結(jié)構(gòu)CSS

這次我還是不會(huì)去講細(xì)節(jié)。主容器pagewrap是980px寬。Header擁有一個(gè)固定的160px高度。容器content是600px寬并且向左浮動(dòng)。sidebar是280px寬并向右浮動(dòng)。

#pagewrap {     width: 980px;     margin: 0 auto; }  #header {     height: 160px; }  #content {     width: 600px;     float: left; }  #sidebar {     width: 280px;     float: right; }  #footer {     clear: both; }

***步的Demo

這里是這個(gè)設(shè)計(jì)demo。注意媒體查詢還沒有實(shí)現(xiàn)。改變?yōu)g覽器窗口的尺寸，你應(yīng)該看到頁面布局并不具有擴(kuò)展能力。

有關(guān)CSS3媒體查詢

現(xiàn)在是有趣的部分－－媒體查詢

包含媒體查詢的JavaScript文件

Internet Explorer8或者更老的版本不支持CSS3媒體查詢。你可以通過添加css3-mediaqueries.js這個(gè)Javascript文件來使其支持媒體查詢。

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

包含媒體查詢的CSS文件

為媒體查詢創(chuàng)建一個(gè)新的樣式表。看下我之前的教程來搞清楚媒體查詢是如何工作的。

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

Viewport小于980px（流動(dòng)布局）

對(duì)于窄于980px的viewport，如下的規(guī)則將會(huì)被應(yīng)用：

• pagewrap = 重置width為95%

• content = 重置width為60%

• sidebar = 重置width為30%

提示: 使用百分比（%）的值來使容器變得流動(dòng)。

@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;     } }

Viewport小于650px（一欄布局）

接下來對(duì)窄于650px的viewport我擁有另一個(gè)CSS集合：

• header = 重置height為auto

• searchform = 重新定位searchform為離頂部5px

• main-nav = 重置position為static

• site-logo = 重置position為static

• site-description =  重置position為static

• content = 重置width為auto（這會(huì)使得容器展開為整體寬度）并且不進(jìn)行浮動(dòng)

• sidebar = 重置width為100%并且不進(jìn)行浮動(dòng)

@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的Viewport

下面的CSS將會(huì)在viewport寬度小于480px（即橫屏模式下iPhone屏幕的寬度）的時(shí)候生效。

• html = 禁止文本大小調(diào)整（text size adjustment）。默認(rèn)情況下，iPhone放大了文本大小，這樣讀起來更加舒服。你可以通過添加-webkit-text-size-adjust: none來禁止文本大小調(diào)整。

• main-nav = 重置字體大小為90%

media screen and (max-width: 480px) {      html {         -webkit-text-size-adjust: none;     }      #main-nav a {         font-size: 90%;         padding: 10px 8px;     }  }

彈性圖片

為了使圖片具有彈性，只需要添加max-width:100%和height:auto。給圖片加上max-width:100%和height:auto在IE7中是工作的，但是在IE8中不工作（是的，另一個(gè)奇怪的IE　bug）。為了解決這個(gè)問題，你需要為IE8添加width:auto\9。

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

彈性的嵌入視頻

為了使嵌入視頻具有彈性，可以使用上面所提到的相同技巧。由于未知原因，（嵌入元素的）max-width:100%在Safari中不工作。解決方式是使用width:100%做為替代。

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

進(jìn)行初始縮放的Meta標(biāo)簽（iPhone）

默認(rèn)情況下，iPhone中的Safari會(huì)收縮HTML頁面來適應(yīng)iPhone屏幕。下面的meta標(biāo)簽告訴iPhone中的Safari使用設(shè)備的寬度做為viewport的寬度，并且禁用初始縮放比例。

<meta name="viewport" content="width=device-width; initial-scale=1.0">

最終Demo

查看最終demo并且調(diào)整你瀏覽器窗口的大小來看看真實(shí)工作的媒體查詢。不要忘記用iPhone，iPad，Blackberry（新版本）和Android電話來訪問demo，以便看看移動(dòng)版本的樣子。

總結(jié)

• 媒體查詢的Javascript備胎：

css3-mediaqueries.js是使那些不支持媒體查詢的瀏覽器可以使用媒體查詢所必需的。

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

• CSS媒體查詢：

創(chuàng)建自適應(yīng)設(shè)計(jì)的手段是根據(jù)viewport的寬度來用CSS重寫頁面布局結(jié)構(gòu)。

@media screen and (max-width: 560px) { 
 
    #content { 
        width: auto; 
        float: none; 
    } 
 
    #sidebar { 
        width: 100%; 
        float: none; 
    } 
 
}

• 具有彈性的圖片：

使用max-width:100%和height:auto來使圖片變得具有彈性。

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

• 具有彈性的嵌入視頻：

使用width:100%和height:auto使嵌入視頻具有彈性。

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

• Webkit字體大小調(diào)整（Text Size Adjust）：

在iPhone上使用-webkit-text-size-adjust:none來禁用文本大小調(diào)整。

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

• 重置iPhone的Viewport和初始縮放比例：

下面的meta標(biāo)簽在iPhone上重置viewport和初始縮放比例：

<meta name="viewport" content="width=device-width; initial-scale=1.0">

到此，相信大家對(duì)“怎么利用媒體查詢進(jìn)行web響應(yīng)式設(shè)計(jì)”有了更深的了解，不妨來實(shí)際操作一番吧！這里是創(chuàng)新互聯(lián)網(wǎng)站，更多相關(guān)內(nèi)容可以進(jìn)入相關(guān)頻道進(jìn)行查詢，關(guān)注我們，繼續(xù)學(xué)習(xí)！

分享題目：怎么利用媒體查詢進(jìn)行web響應(yīng)式設(shè)計(jì)
文章轉(zhuǎn)載：http://www.chinadenli.net/article38/igphsp.html

成都網(wǎng)站建設(shè)公司_創(chuàng)新互聯(lián)，為您提供標(biāo)簽優(yōu)化、定制網(wǎng)站、外貿(mào)建站、響應(yīng)式網(wǎng)站、電子商務(wù)、網(wǎng)站改版

廣告

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