NEXT
PREV
您現在的位置:首頁/知識中心

什么是自適應網頁設計,響應式Web設計

文章作者:道成科技發布時:2014-10-26點擊:2460次

現在移動互聯網越來越熱,用手機上網的人數大量增加。現在大家常用的手機的屏幕通常在600像素以下,PC的屏幕寬度一般都在1000-2000像素。同樣的內容,要在大小迥異的屏幕上,都呈現出滿意的效果,并不是一件容易的事。 很多網站的解決方法,是為不同的設備提供不同的網頁,比如專門提供一個手機版本,或者iPhone / iPad版本。這樣做固然保證了效果,但是比較麻煩,同時要維護好幾個版本,會大大增加架構設計的復雜度。 于是,很早就有人設想,能不能”一次設計,普遍適用”,讓同一張網頁自動適應不同大小的屏幕,根據屏幕寬度,自動調整布局?

2010年,Ethan Marcotte提出了“自適應網頁設計”(Responsive Web Design)這個名詞概念,這個自適應設計就是可以自動識別屏幕寬度、并做出相應調整的網頁設計。保證了用戶在不同終端瀏覽網頁的兼容效果。

響應式 Web 設計工作原理:

為了應用響應式 Web 設計,您需要創建一個包含適應各種設備尺寸樣式的 CSS。一旦頁面在特定的設備上加載,該頁面上使用了各種字體和 Web 開發技術,比如媒體查詢(Media Queries),此時,會先檢測設備的視口大小,然后加載特定于設備的樣式。

響應式網站設計的CSS3代碼原理:

現在在響應式 CSS 文件中必須有 '@media' 開始的樣式。

'@media (max-width: 480px)' 開始,為最大寬度為 480 像素的設備設置樣式

'@media (max-width: 767px)' 開始,為最大寬度為 767像素的設備設置樣式。

'@media (min-width: 768px) 和 (max-width: 979px)' 開始,為最大寬度為 768 像素和最大寬度為 979 像素的設備設置樣式。

'@media (max-width: 979px)'

最后兩個區域分別以 '@media (min-width: 980px)' 和 '@media (min-width: 1200px)' 開始,前一個是為最小寬度為 980 像素的設備設置樣式,后一個是為最小寬度為 1200 像素的設備設置樣式。

在PC端顯示效果:

在手機移動端顯示效果:

您可以用不同的終端來打開我公司網站。域名:www.daowweb.cn,一看和測試就明白了。也可以在PC 上拖動瀏覽器窗口,改變瀏覽器的寬度大小來測試體驗。

0
加拿大快乐8开奖网站