您好,歡迎來到一站式眾包服務(wù)平臺-威客牛網(wǎng)!
當前位置:威客牛首頁 > 知識百科 > IT軟件 > UI設(shè)計 > 響應(yīng)式網(wǎng)頁設(shè)計基礎(chǔ)

響應(yīng)式網(wǎng)頁設(shè)計基礎(chǔ)

2022-12-04作者:網(wǎng)友投稿
響應(yīng)式網(wǎng)頁設(shè)計,毫無疑問地變得越來越重要了。如果你還沒聽說過響應(yīng)式設(shè)計,可以先看看我之前發(fā)的文章響應(yīng)式網(wǎng)站。對新手來說, 響應(yīng)式設(shè)計聽起來可能會有點復(fù)雜, 但事實上,它比你想象的簡單得多。為了讓你能快速入門,我準備了一個簡易的教程。通過這三個步驟,你一定可以了解響應(yīng)式設(shè)計的基本原理和media query(在你有一些CSS基礎(chǔ)的前提下)。

第一步. Meta 標簽 (查看 demo)

為了適應(yīng)屏幕,多數(shù)的移動瀏覽器會把HTML網(wǎng)頁縮放到設(shè)備屏幕的寬度。你可以使用meta標簽的viewport屬性來設(shè)置。下面的代碼告訴瀏覽器使用設(shè)備屏幕寬度作為內(nèi)容的寬度,并且忽視初始的寬度設(shè)置。這段代碼寫在 <head>里面

1<meta name="viewport" content="width=device-width, initial-scale=1.0">

IE8及以下的瀏覽器不支持media query。你可以使用media-queries.js 或 respond.js 。這樣IE就能支持media query了。

1 2 3<!--[if lt IE 9]> <script srcxx= "http://css3-mediaqueries-js.googlecode.com/svn/trunk/css3-mediaqueries.js"></script> <![endif]-->

第二步. HTML 結(jié)構(gòu)


這個例子里面,有header、content、sidebar和footer等基本的網(wǎng)頁布局。 header 有固定的高180px,content 容器的寬是600px,sidebar的寬是300px。

第三步. Media Queries

CSS3 media query 響應(yīng)式網(wǎng)頁設(shè)計的關(guān)鍵。它像一個if語句,告訴瀏覽器如何根據(jù)特定的屏幕寬口來加載網(wǎng)頁。

如果屏幕窗口小于980px,下面的規(guī)則就生效。在這里,我設(shè)置了容器的寬度為百分比的形式而不是像素單位,這樣會更加靈活。

如果屏幕窗口小于700px, 定義 #content 和 #sidebar 為自適應(yīng)寬度,并移除它的浮動屬性,這樣它會全屏顯示。

如果屏幕窗口小于480px (移動設(shè)備的屏幕), 設(shè)置#header 高為自適應(yīng),把h1字體設(shè)置為24px,并且隱藏#sidebar。

這些media query,你可以寫很多。在這個demo,我只寫了三個。media query的目的是應(yīng)用不同的CSS規(guī)則來實現(xiàn)屏幕的最佳布局。它可以寫在同一個CSS文件,也可以寫在不同的文件。
免費查詢商標注冊