女人书籍排行榜,遮天辰东小说

新聞中心

這里有您想知道的互聯(lián)網(wǎng)營銷解決方案

利用媒體查詢進(jìn)行響應(yīng)式設(shè)計(jì)

如今屏幕分辨率的范圍已經(jīng)從320px（iPhone）涵蓋到2560px（大顯示器）或者更高了。用戶不單單在桌面電腦上瀏覽網(wǎng)站。用戶如今會(huì)使用移動(dòng)電話，小的筆記本，平板設(shè)備（比如iPad或者Playbook）來訪問互聯(lián)網(wǎng)。所以傳統(tǒng)的固定寬度設(shè)計(jì)不再適用了。web設(shè)計(jì)需要有自適應(yīng)能力。頁面布局要可以自動(dòng)的去適應(yīng)所有的分辨率和設(shè)備。這個(gè)教程將會(huì)告訴你如何利用HTML5和CSS3媒體查詢來創(chuàng)建一個(gè)跨瀏覽器的響應(yīng)式設(shè)計(jì)。

為平邑等地區(qū)用戶提供了全套網(wǎng)頁設(shè)計(jì)制作服務(wù)，及平邑網(wǎng)站建設(shè)行業(yè)解決方案。主營業(yè)務(wù)為成都做網(wǎng)站、成都網(wǎng)站設(shè)計(jì)、平邑網(wǎng)站設(shè)計(jì)，以傳統(tǒng)方式定制建設(shè)網(wǎng)站，并提供域名空間備案等一條龍服務(wù)，秉承以專業(yè)、用心的態(tài)度為用戶提供真誠的服務(wù)。我們深信只要達(dá)到每一位用戶的要求，就會(huì)得到認(rèn)可，從而選擇與我們長期合作。這樣，我們也可以走得更遠(yuǎn)！

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

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

更多例子

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

概覽

對于任何寬度大于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包裹在了一起。

 
 
 
   
  
  
     
  
  
         
  
  
             
  
  
              Demo   
  
  
              Site Description   
  
  
             
  
  
             
  
  
                 
  
  
                  
Home   
  
  
                 
  
  
             
  
  
             
  
  
                 
  
  
             
  
  
         
  
  
     
  
  
         
  
  
             
  
  
              blog post

widget

footer

HTML5.js

注意一下我在demo中使用了HTML5標(biāo)簽。低于9的IE瀏覽器不支持HTML5中引入的新元素，比如

，

等等。在HTML文檔中包含html5.js這個(gè)Javscript文件可以使IE識(shí)別這些新元素。

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

#p#

***步的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文件來使其支持媒體查詢。

包含媒體查詢的CSS文件

為媒體查詢創(chuàng)建一個(gè)新的樣式表?？聪挛抑暗慕坛虂砀闱宄襟w查詢是如何工作的。

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

對于窄于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（一欄布局）

接下來對窄于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 */   
  
  
  }

#p#

彈性的嵌入視頻

為了使嵌入視頻具有彈性，可以使用上面所提到的相同技巧。由于未知原因，（嵌入元素的）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的寬度，并且禁用初始縮放比例。

最終Demo

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

總結(jié)

媒體查詢的Javascript備胎：

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

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和初始縮放比例：

當(dāng)前題目：利用媒體查詢進(jìn)行響應(yīng)式設(shè)計(jì)
URL標(biāo)題：http://fisionsoft.com.cn/article/dhspdoe.html

新聞中心

其他資訊