Ethan Marcotte最早提出響應式網頁設計，Ethan Marcotte在AList Apart發(fā)表的一篇具有開(kāi)創性意義的文章中，三種(zhǒng)已有的開(kāi)發(fā)技巧被(bèi)他整合起(qǐ)來，命名爲響應式網頁。那麼(me)，沈陽做網站大熊科技就(jiù)說一說建立響應式布局應該考慮哪些因素呢?

一、浏覽器

首先要考慮到的是浏覽器，浏覽器是所有頁面(miàn)運行的環境，形象一點的說，網站是一個内容物，而浏覽器是存放這(zhè)個内容物的容器。所有的網頁必需通過(guò)浏覽器運行，因此進(jìn)行網頁設計的第一步就(jiù)是了解浏覽器，在pc端，常用的有5種(zhǒng)浏覽器，而手機上有浏覽器功能(néng)的軟件則有30種(zhǒng)之多。但需要注意的是，許多浏覽器并不能(néng)算作是一個完全獨立的浏覽器，很多都(dōu)隻是基于同一浏覽器，尤其是安卓WebKit的不同版本而已。

手機上有4種(zhǒng)浏覽器類型：内置浏覽器，可下載浏覽器，代理浏覽器，以及WebView。由于目前安卓和IOS占據著(zhe)移動端的大部分市場。因此，爲了減少工作量，我們進(jìn)行響應式網頁布局設計的時候可以先保證安卓和IOS上面(miàn)能(néng)運行，再根據實際情況和成(chéng)本考慮是否适配其他的浏覽器。

二、視口

響應式網站設計的另一個重點就(jiù)是視口，視口的概念并不是我們所理解的設備的屏幕尺寸，屏幕尺寸是設備的物理顯示區域。視口指的是浏覽器窗口内的内容區域，但不包含标簽欄，工具欄等，網頁實際顯示的區域就(jiù)是視口。在桌面(miàn)浏覽器中，隻有一個視口也就(jiù)是浏覽器窗口，在手機端中，有下面(miàn)三個視口：

1、布局視口：與移動端浏覽器屏幕寬度不關聯，僅限制CSS的布局。

2、理想視口：一種(zhǒng)對(duì)設備來說最理想的布局視口尺寸，由蘋果公司最先引入，擁有最理想的浏覽和閱讀寬度。

3、視覺視口：用戶看到網站的區域，用戶可以通過(guò)縮放來操作視覺視口。

響應式布局最基礎的工作，就(jiù)是把布局視口的尺寸設置爲理想視口。

所謂媒體查詢其實就(jiù)是CSS中的if語句，它讓我們可以根據設備顯示器的特性設置特定的CSS樣(yàng)式。通過(guò)合适的媒體查詢，就(jiù)可以很便捷的根據諸如設備屬性來改變在頁面(miàn)内的内容的顯示方式。

真正的響應式設計方法從整體上颠覆了我們當前設計網頁的方法，熟悉以上三個方面(miàn)，意味著(zhe)你已經(jīng)有了設計響應式網站的基礎，可以進(jìn)行進(jìn)一步學(xué)習了。