一、什么是響應(yīng)式布局?

      響應(yīng)式布局是Ethan Marcotte在2010年5月份提出的一個(gè)概念，簡(jiǎn)而言之，就是一個(gè)網(wǎng)站能夠兼容多個(gè)終端——而不是為每個(gè)終端做一個(gè)特定的版本。

      這個(gè)概念是為解決移動(dòng)互聯(lián)網(wǎng)瀏覽而誕生的。響應(yīng)式布局可以為不同終端的用戶提供更加舒適的界面和更好的用戶體驗(yàn)，而且隨著目前大屏幕移動(dòng)設(shè)備的普及，用大勢(shì)所趨來(lái)形容也不為過(guò)。

 隨著越來(lái)越多的設(shè)計(jì)師采用這個(gè)技術(shù)，我們不僅看到很多的創(chuàng)新，還看到了一些成形的模式。

二、響應(yīng)式布局有哪些優(yōu)點(diǎn)和缺點(diǎn)?

  優(yōu)點(diǎn)：

面對(duì)不同分辨率設(shè)備靈活性強(qiáng)
能夠快捷解決多設(shè)備顯示適應(yīng)問(wèn)題
  缺點(diǎn)：

兼容各種設(shè)備工作量大，效率低下
代碼累贅，會(huì)出現(xiàn)隱藏?zé)o用的元素，加載時(shí)間加長(zhǎng)
其實(shí)這是一種折衷性質(zhì)的設(shè)計(jì)解決方案，多方面因素影響而達(dá)不到最佳效果
一定程度上改變了網(wǎng)站原有的布局結(jié)構(gòu)，會(huì)出現(xiàn)用戶混淆的情況
 

三、響應(yīng)式布局該怎么設(shè)計(jì)?

1、 如何解決不同設(shè)備間的兼容問(wèn)題？

       CSS3中的Media Query（媒介查詢）可以解決這個(gè)問(wèn)題。

2、media query能夠獲取哪些值?

         設(shè)備的寬和高device-width，device-heigth顯示屏幕/觸覺(jué)設(shè)備。

              渲染窗口的寬和高width，heigth顯示屏幕/觸覺(jué)設(shè)備。

              設(shè)備的手持方向，橫向還是豎向orientation(portrait|lanscape)和打印機(jī)等。

              畫(huà)面比例aspect-ratio點(diǎn)陣打印機(jī)等。

              設(shè)備比例device-aspect-ratio-點(diǎn)陣打印機(jī)等。

              對(duì)象顏色或顏色列表color，color-index顯示屏幕。

              設(shè)備的分辨率resolution

     3、語(yǔ)法結(jié)構(gòu)及用法

              語(yǔ)法：@media 設(shè)備名 only (選取條件) not (選取條件) and(設(shè)備選取條件)，設(shè)備二{sRules}

          用法：

               a、示例一：在link中使用@media：

                       <link rel="stylesheet" type="text/css" media="only screen and (max-width: 480px),only screen and (max-device-width: 480px)" href="link.css" rel="external nofollow" />

                      上面使用中only可省略，限定于計(jì)算機(jī)顯示器，第一個(gè)條件max-width是指渲染界面最大寬度，第二個(gè)條件max-device-width是指設(shè)備最大寬度。

              b、在樣式表中內(nèi)嵌@media：

發(fā)表評(píng)論 共有條評(píng)論 用戶名: 密碼: 驗(yàn)證碼: 匿名發(fā)表