三步完成自適應(yīng)網(wǎng)頁設(shè)計
自適應(yīng)網(wǎng)頁設(shè)計近來很流行,如果你接觸比較少請參見 responsive sites。當然,對一個新手來說可能聽起來有點復雜,其實它比你想象的簡單多了。這里是一個快速教程,通過學習你會自適應(yīng)網(wǎng)頁和media queries的基本原理(前提你有css基礎(chǔ))。
Step 1:Meta 標簽
為了適應(yīng)屏幕,不少移動瀏覽器都會把HTML頁面置于較大視口寬度(一般會大于屏幕寬度),你可以使用viewport meta
標簽來設(shè)定。以下viewport meta
標簽告訴瀏覽器視口寬度等于設(shè)備屏幕寬度,且不進行初始縮放:
IE8及其更低版本不支持media query,可以使用media-queries.js或respond.js腳本實現(xiàn)支持。
Step 2. HTML結(jié)構(gòu)
在這個例子中,頁面布局包括 header
,content
,sidebar
和footer
。header
固定高度為180px
,content
寬600px
,sidebar
寬300px
。
Step 3. Media Queries
CSS3 media query是自適應(yīng)網(wǎng)頁設(shè)計的關(guān)鍵,他就像高級語言里的if
條件語句,告訴瀏覽器根據(jù)不同的視口寬度(這里等于瀏覽器寬度)來渲染網(wǎng)頁。
如果視口寬度小于等于980px
,下面規(guī)則生效。
這里將容器絕對寬度改用百分比顯示,讓頁面排版更加靈活。
/* for 980px or less */ @media screen and (max-width: 980px) { #pagewrap{ width: 94%; } #content{ width: 65%; } #sidebar{ width: 30%; } }
如果視口寬度小于等于700px
, 將#content
和#sidebar
寬度設(shè)為自動(auto
),并移除它的浮動屬性(float
),這樣它會變成滿版顯示。
/* for 700px or less */ @media screen and (max-width:700px) { #content { width: auto; float: none; } #sidebar { width: auto; float: none; } }
當視口寬度小于等于480px
時(如手機屏幕),將#header
高度設(shè)為自動,h1
的字體大小設(shè)定為24px
,并隱藏#sidebar
。
/* for 480px or less */ @media screen and (max-width:480px) { #header { height: auto; } h1 { font-size: 24px; } #sidebar { display: none; } }
同類文章排行
- 五彩紛呈的故事——民族團結(jié)心連心
- 赤峰鼎好職業(yè)技術(shù)學校2024年招生簡章
- 清明書經(jīng)典,緬懷先烈、弘揚文化!喾宥寐殬I(yè)技術(shù)學校開展清明節(jié)詩詞規(guī)范書寫
- 21級高鐵乘務(wù)專業(yè)學生實習就業(yè)
- 共建共享健康赤峰專題講座
- 全市職業(yè)院校書香校園建設(shè)現(xiàn)場會
- 晨讀
- 傳承高鐵禮儀 我們正在路上
- 市教育局黨組召開理論學習中心組“不忘初心、牢記使命”主題教育第二次專題學習研討會
- 新學期,新氣象