現(xiàn)在移動設(shè)備越來越普及，用戶使用智能手機、pad上網(wǎng)頁越來越普遍。但是傳統(tǒng)的fix型的頁面在移動終端上無法很好的顯示。因此，Ethan Marcotte提出一種響應(yīng)式web設(shè)計的概念。

響應(yīng)式web設(shè)計的英文為Responsive Web Design，簡寫為RWD。

在圖書館借到一本O'REILLY的《Head First Moblie Web》，里面講到了一些做RWD的技巧。

今天學(xué)到的兩招是：

1、使用media信息來幫助判斷屏幕尺寸

2、使用百分比來替換以前使用的像素來聲明寬度等與尺寸相關(guān)的信息

看看今天試驗的成果（本文最后有試驗例子的下載鏈接）：

視頻：

全屏幕顯示頁面時

將瀏覽器拉窄模仿移動設(shè)備時：

如何做到呢？

首先，在css文件中使用media語句

要想想讓網(wǎng)頁可以根據(jù)不同的設(shè)備尺寸做出相應(yīng)，就需要事先為各種尺寸做好準(zhǔn)備。例如，在正常的PC顯示器中，可能會分三欄顯示，如：

而在移動設(shè)備，比如智能手機中可能就需要分布成流式，如下：

顯然，這兩者的CSS分布是不同的，上圖的三欄顯示中，左右兩邊的column需要各自float到所需的方向上，而下圖的流式布局中，各個塊之間是串行向下顯示的。因此，可知至少對于每一個不同的CSS分布，應(yīng)該有不同的策略。現(xiàn)在可以編輯兩個不同的CSS文件，然后使用<link>指令做引入。但是還可以使用@media語句，進(jìn)行邏輯判斷。如下：@media screen and (min-width:480px){/*css style*/}

其中，screen是media眾多類型的一種，其他常見的media類型還有print。而min-width是media的feature之一。media有很多feature可以用來幫助我們做邏輯判斷，常見的還有monochrome（單色的）、max-width等。

借助這個@media語句，我們就可以做出類似if-else的邏輯判斷了。例如，例子中給出的兩種不同情況的判定，分別使用如下語句：

發(fā)表評論 共有條評論 用戶名: 密碼: 驗證碼: 匿名發(fā)表