響應式的WEB設計（一）

現在移動裝置越來越普及，使用者使用智慧型手機、pad上網頁越來越普遍。但是傳統的fix型的頁面在移動終端上無法很好的顯示。因此，ethan marcotte提出一種響應式web設計的概念。

響應式web設計的英文為responsive web design，簡寫為rwd。

在圖書館借到一本o'reilly的《head first moblie web》，裡面講到了一些做rwd的技巧。

今天學到的兩招是：

1、使用media資訊來幫助判斷螢幕尺寸

2、使用百分比來替換以前使用的畫素來宣告寬度等與尺寸相關的資訊

看看今天試驗的成果（

全螢幕顯示頁面時

將瀏覽器拉窄模仿移動裝置時：

如何做到呢？

首先，在css檔案中使用media語句

要想想讓網頁可以根據不同的裝置尺寸做出相應，就需要事先為各種尺寸做好準備。例如，在正常的pc顯示器中，可能會分三欄顯示，如：

而在移動裝置，比如智慧型手機中可能就需要分布成流式，如下：

顯然，這兩者的css分布是不同的，上圖的三欄顯示中，左右兩邊的column需要各自float到所需的方向上，而下圖的流式布局中，各個塊之間是序列向下顯示的。因此，可知至少對於每乙個不同的css分布，應該有不同的策略。現在可以編輯兩個不同的css檔案，然後使用指令做引入。但是還可以使用@media語句，進行邏輯判斷。如下：

@media screen and (min-width:480px)

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

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

**********desktop structural css************

*/@media screen and (min-width:481px)

/***********mobile structural css************

*/@media screen and (max-width:480px)

語句中，and代表的是邏輯「and」，如果想表示邏輯「or」可以使用「,」，例如

@media print, screen and (monochrome)

就表示處於「print裝置上」或「單色的螢幕裝置」中時，使用大括號中的css設定。

其次，將與尺寸相關的畫素單位替換成百分比形式。

初次設計時，就直接按照百分比進行設計，如

另外，也可以按照傳統網頁的設計方法，先定好各個區域的畫素，如main區域為460px，那麼如果設定的整個網頁寬度為960px的話，則main的寬度為460/960=47.92%，重構網頁的話可以採用這種換算的方法。

響應式的WEB設計（一）

響應式web設計（一）

響應式web設計

響應式web設計

相關推薦