国产欧美一级中文字幕_亚洲日韩欧美自拍他拍_影音先锋在线免费观看_精品中文亚洲自拍_亚洲免费福利视频_日本一区二区三区中文字幕视频_在线无码86超碰_亚洲第一站精品久久中文无码_A片高清免费观看视频_日韩激情无码免费毛片软件

網(wǎng)站建設(shè)聯(lián)系電話 010-52406013

全部新聞

新聞資訊

網(wǎng)站建設(shè)

網(wǎng)站制作

網(wǎng)站維護(hù)

常見問題

簽約動態(tài)

網(wǎng)站開發(fā)

想學(xué)習(xí)超流行的響應(yīng)式設(shè)計(jì)?來看看這篇教程

時間:2015-11-02 22:34:55 作者:北京網(wǎng)站建設(shè)公司 訪問量:1384

       

     

      網(wǎng)上關(guān)于響應(yīng)式設(shè)計(jì)的教程好復(fù)雜,我寫一個簡版的。

      簡單說呢就針對不同的屏幕分辨率應(yīng)用不同的CSS樣式。比如在電腦、Pad設(shè)備上,屏幕比較寬,就可以一行放2個Div。到了手機(jī)上,或者Pad豎著拿的的時候,一行就只放1個Div。

      這里有2個關(guān)鍵點(diǎn):

      一是如何在不修改Dom結(jié)構(gòu)的前提下調(diào)整布局。

      二是如何判斷屏幕分辨率并應(yīng)用對應(yīng)的CSS。

      以上兩點(diǎn)都應(yīng)該不依賴與JS。

      實(shí)現(xiàn)一點(diǎn)依靠的是流式布局。就是所有參與布局的DIV都用float:left,寬度都用百分比表示。比如下圖,黃色部分的寬度是60%,橘色寬度是40%。

      

     

      如果將黃色和橘色的寬度都width=,那么從1行變成2行了,如下圖。從而實(shí)現(xiàn)不修改Dom實(shí)現(xiàn)布局變化。

      

     

      那么如何不使用JS而實(shí)現(xiàn)動態(tài)調(diào)整CSS樣式就是第二個關(guān)鍵點(diǎn)。

      HTML5中提供了一種新的CSS語法——@media,學(xué)名是Media Query,可以為不同的分辨率設(shè)定不同的樣式。

      CSS

      /* Phone Portrait (320px) */

      @media only screen and (max-width: 320px) {

      #head { width: ; }

      #main { width: ; }

      #foot { width: ; }

      #left { width: ; }

      #right { width: ; }

      }

      復(fù)制代碼

      上面這段代碼的含義就是當(dāng)屏幕寬度小于等于320像素時應(yīng)用大括號中的樣式。

      下圖是在CSS生效時在瀏覽器中的效果:

      

     

      @media還有一些更復(fù)雜的用法,比如:

      CSS

      /* Phone Landscape (480px) */

      @media only screen and (min-width: 321px) and (max-width: 480px) and (orientation: landscape) {

      復(fù)制代碼

      這段語句就是針對iPhone橫屏的。即,瀏覽器寬度在321-480像素之間,且方向是“橫向”時生效。

      不過自從Retina這中妖艷的屏幕推出,分辨率已經(jīng)不能代表世界的真相了。小小的Note3的分辨率比一些17“顯示的分辨率還高。

      所以還有必要判斷一下設(shè)備的像素密度-device-pixel-ratio。

      CSS

      @media only screen and (-moz-min-device-pixel-ratio: 2), only screen and (-o-min-device-pixel-ratio: 2/1), only screen and (-webkit-min-device-pixel-ratio: 2), only screen and (min-device-pixel-ratio: 2)

      復(fù)制代碼

      比如上面的語句就是判斷終端的像素比是2的話,所渲染的樣式??梢赃m用于iPhone4,iPhone5等設(shè)備。

      除了上述兩點(diǎn),還需要在頁面上增加一個viewport的meta標(biāo)簽,否則在手機(jī)上可能會有頁面自動縮放的情況。例如:

      HTML

      復(fù)制代碼

      總結(jié)一下:響應(yīng)式布局有三個關(guān)鍵點(diǎn):

      流式布局 Liquid Layout

      Media Query

      viewport

      具體細(xì)節(jié)就請大家自己研究相關(guān)的語法了。

      Media Query的語法比較復(fù)雜,這里個大家推薦一個工具,可以方便的設(shè)計(jì)布局,并可以針對各種設(shè)備自動生成Media Query的語句:

      http://www.responsivewebcss.com/

      

     

      

     

      

     

聲明:轉(zhuǎn)載此文是出于傳遞更多信息的目的。若有來源標(biāo)注錯誤或侵犯了您的合法權(quán)益,請作者持權(quán)屬證明與本網(wǎng)聯(lián)系,我們將及時更正、刪除,謝謝!

相關(guān)新聞