簡(jiǎn)要總結(jié)CSS編程中的響應(yīng)式設(shè)計(jì)
我要評(píng)論現(xiàn)在，響應(yīng)式Web設(shè)計(jì)無(wú)疑是非常流行的。對(duì)于新人，responsive design可能聽(tīng)起來(lái)有點(diǎn)復(fù)雜，但實(shí)際上，它比你想的要簡(jiǎn)單的多。為了幫助你快速入門響應(yīng)式Web設(shè)計(jì)，我寫了一篇快速入門教程。我保證你通過(guò)三步就可以學(xué)會(huì)響應(yīng)式設(shè)計(jì)的基本邏輯和媒體查詢(media query)(假設(shè)你有基本的CSS知識(shí))。
第一步：Meta標(biāo)簽（看demo）
大部分移動(dòng)瀏覽器會(huì)把HTML頁(yè)面縮放成較寬的viewport的寬度，這樣內(nèi)容就可以屏幕上正確的展示了。你可以使用viewport這個(gè)meta標(biāo)簽來(lái)重置這個(gè)行為。下面的viewport標(biāo)簽告訴瀏覽器使用設(shè)備寬度(device-width)做為viewport的寬度，并且禁用初始的縮放比例。在<head>中加入這個(gè)meta標(biāo)簽。
IE 8以及更早版本不支持媒體查詢，你可以使用media-queries.js或者respond.js來(lái)增加IE對(duì)媒體查詢的支持。
- <!--[if lt IE 9]>
- <script src="http://css3-mediaqueries-js.googlecode.com/svn/trunk/css3-mediaqueries.js"></script>
- <![endif]—>
第二步：HTML結(jié)構(gòu)
在這個(gè)例子中，我擁有一個(gè)由頭部，內(nèi)容容器，側(cè)邊欄，以及一個(gè)底部構(gòu)成的基本的頁(yè)面布局。頭部擁有一個(gè)固定的180px高度，內(nèi)容容器600px寬，然后側(cè)邊欄是300px寬。
第三步：媒體查詢
CSS3 media query是進(jìn)行響應(yīng)式設(shè)計(jì)的戲法，它跟寫if條件一樣，來(lái)告訴瀏覽器對(duì)于特定的viewport寬度如何渲染頁(yè)面。
下面的規(guī)則是針對(duì)視口寬度小于等于980px設(shè)計(jì)的?；旧?，我把所有容器的寬度從像素值改成了百分比值，這樣容器就會(huì)變得具有流動(dòng)性(fluid)。
然后對(duì)于寬度小于或等于700px的viewport，指定#content和#sidebar為自動(dòng)寬度，并且移除浮動(dòng)，所以他們可以以全寬度進(jìn)行展示。
對(duì)于寬度小于等于480px(移動(dòng)設(shè)備屏幕)的，重置#header的高度為auto，修改h1的字體大小為24px，并且隱藏#sidebar。
你可以想寫多少媒體查詢就寫多少。我在demo中只展示了三個(gè)媒體查詢。媒體查詢的目的是對(duì)于指定的viewport寬度可以通過(guò)應(yīng)用不同的CSS規(guī)則來(lái)獲得不同的布局。媒體查詢可以在同一個(gè)樣式表中或者在一個(gè)單獨(dú)的文件中。
相關(guān)文章
- 這篇文章主要介紹了CSS的一些編程規(guī)范總結(jié),文中所列基本上得到多數(shù)開(kāi)發(fā)者的共識(shí),樹立統(tǒng)一規(guī)范有助于debug等工作的進(jìn)行,因而強(qiáng)烈推薦此文!需要的朋友可以參考下2015-07-09
- 這篇文章主要介紹了10個(gè)必備的CSS技巧總結(jié),隨看隨記,敬請(qǐng)收藏~需要的朋友可以參考下2015-06-29
- 在阿里云首頁(yè)看到很多div都有加上:before和:after的屬性.但是大都只是做了類似的如下處理,請(qǐng)問(wèn)這樣的意義是什么呢?研究了一番，原來(lái)是清除浮動(dòng)用的，下面來(lái)總結(jié)下清除浮動(dòng)2014-06-17
css 調(diào)試方法與經(jīng)驗(yàn)總結(jié)
主要記錄本人調(diào)試過(guò)程中所終結(jié)的經(jīng)驗(yàn)與方法，css關(guān)系到界面的美觀，有時(shí)候功能實(shí)現(xiàn)了。界面確丑到?jīng)]人用，終歸還是一件失敗的產(chǎn)品2014-06-15CSS多瀏覽器兼容總結(jié)(個(gè)人經(jīng)驗(yàn))
多瀏覽器兼容一直都是前端開(kāi)發(fā)者需要考慮的重要問(wèn)題之一，由于一直困擾著大家，因此本文整理了一些個(gè)人的實(shí)戰(zhàn)經(jīng)驗(yàn)與大家分享下，看過(guò)之后感覺(jué)不錯(cuò)的可以收藏哦2013-10-30CSS樣式的基礎(chǔ)學(xué)習(xí)總結(jié)
進(jìn)行css布局的同時(shí)，沒(méi)有足夠的基礎(chǔ)知識(shí)是不可能的，本文為初學(xué)者整理了一些，經(jīng)常使用的css屬性，感興趣的朋友可以參考下，或許有所幫助2013-10-05- 本篇文章是對(duì),CSS3中的動(dòng)畫效果進(jìn)行了詳細(xì)的分析介紹。需要的朋友參考下2013-05-09
IE下css常見(jiàn)問(wèn)題總結(jié)及解決
本文整理了ie中div的垂直居中問(wèn)題、margin加倍的問(wèn)題、ie6下頁(yè)面min-width/height與max-width/height問(wèn)題、ie6 3px bug及ie6捉迷藏的問(wèn)題等等，感興趣的朋友可以參考下哈2013-04-01CSS(Cascading Style Sheet)級(jí)聯(lián)樣式表常用術(shù)語(yǔ)總結(jié)
CSS（Cascading Style Sheet ）級(jí)聯(lián)樣式表總結(jié),如果使用CSS不要忘記寫DOCTYPE等文檔類型定義,接下來(lái)詳細(xì)為您介紹，需要了解的朋友可以參考下2013-01-03- 本文是小編日常整理了關(guān)于css學(xué)習(xí)和總結(jié)相關(guān)知識(shí)，本文介紹的非常詳細(xì)，具有參考借鑒價(jià)值，感興趣的朋友一起學(xué)習(xí)吧2022-09-29