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

步驟：

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

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

如：

HTML部分：

<div class="box">
    <div>1</div>
    <div>2</div>
    <div>3</div>
    <div>4</div>
    <div>5</div>
    <div>6</div>
</div>

CSS部分：
 

@media screen and (min-width: 1000px) {
    .box{
        width: 500px;
        border: 1px solid;
        margin: auto;
    }
    .box>div{
        width: 50%;
        height: 100px;
        outline: 1px solid;
        float: left;
    }
}
@media screen and (max-width: 1000px) {
    .box{
        width: 250px;
        margin: auto;
    }
    .box>div{
        width: 100%;
        height: 100px;
        outline: 1px solid;
    }
}

在全屏下：

小於1000px:

顯然，這兩者的CSS分布是不同的，上圖的三欄顯示中，左右兩邊的column需要各自float到所需的方向上，而下圖的流式布局中，各個塊之間是串行向下顯示的。因此，可知至少對於每一個不同的CSS分布，應該有不同的策略。現在可以編輯兩個不同的CSS文件，然後使用<link>[email protected]，進行邏輯判斷。如下：

@media screen and (min-width:480px){/*css style*/}

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

響應式布局