響應(yīng)式布局與媒體查詢

響應(yīng)式布局1什么是響應(yīng)式布局？響應(yīng)式布局是一種web頁(yè)面的布局方式而已。響應(yīng)式布局他是一種能夠?qū)崿F(xiàn)頁(yè)面的布局跟隨瀏覽器或者設(shè)備等因素變化而導(dǎo)致布局改變的一種布局方式。.響應(yīng)式布局的特征a）能夠跟隨設(shè)備發(fā)生變化b）能夠跟隨相似設(shè)備的不同屬性變化.媒體查詢a）媒體查詢是CSS3支持的一種新的語(yǔ)法，在CSS2中已經(jīng)對(duì)媒體查詢有了部分支持。b）媒體類型：.在CSS2中已經(jīng)存在了媒體類型。.CSS3中支持那些媒體類型MediaTypes媒體類型CSSVersion版本Compatibility兼容性Description簡(jiǎn)介allCSS2所有瀏覽器用于所有媒體設(shè)備類型auralCSS2Opera用于語(yǔ)音和音樂合成器brailleCSS2Opera用于觸覺反饋設(shè)備handheldCSS2Chrome,Safari,Opera用于小型或手持設(shè)備MediaTypes媒體類型CSSVersion版本Compatibility兼容性Description簡(jiǎn)介printCSS2所有瀏覽器用于打印機(jī)projectionCSS2Opera用于投影圖像，如幻燈片screenCSS2所有瀏覽器用于計(jì)算機(jī)顯示器ttyCSS2Opera用于使用固定間距字符格的設(shè)備。如電傳打字機(jī)和終端tvCSS2Opera用于電視類設(shè)備embossedCSS2Opera用于凸點(diǎn)字符（盲文）印刷設(shè)備媒體類型的使用方式：link語(yǔ)法@import語(yǔ)法@media語(yǔ)法l.link語(yǔ)法<linkhref=CSS文件type=text/cssrel=stylesheetmedia=媒體類型>@import語(yǔ)法@importurl（CSS文件）媒體類型；.@media語(yǔ)法@media媒體類型.媒體特性

〃AcceptsMedia.―二二-一._.風(fēng)Valuemin/maxDescriptionFeatures媒體特性取值m受n/max簡(jiǎn)介width<length>yes定義輸出設(shè)備中的頁(yè)面可見區(qū)域?qū)挾萮eight<length>yes定義輸出設(shè)備中的頁(yè)面可見區(qū)域高度device-width<length>yes定義輸出設(shè)備的屏幕可見寬度device-height<length>yes定義輸出設(shè)備的屏幕可見高度orientationportrait|landscapeno定義'height'是否大于或等于'width'。值portrait代表是，landscape代表否aspect-ratio<ratio>yes定義'width'與'height'的比率device-aspect-ratio<ratio>yes定義'device-width"'device-height'的比率。如常見的顯示器比率：4/3,16/9,16/10color<integer>yes定義每一組輸出設(shè)備的彩色原件個(gè)數(shù)。如果不是彩色設(shè)備，則值等于0color-index<integer>yes定義在輸出設(shè)備的彩色查詢表中的條目數(shù)。如果沒有使用彩色查詢表，則值等于0monochrome<integer>yes定義在一個(gè)單色框架緩沖區(qū)中每像素包含的單色原件個(gè)數(shù)。如果不是單色設(shè)備，則值等于0resolution〈resolution〉yes定義設(shè)備的分辨率。如：96dpi,300dpi,118dpcmscanprogressive|interlaceno定義電視類設(shè)備的掃描工序grid<integer>no用來查詢輸出設(shè)備是否使用柵格或點(diǎn)陣。只有1和0才是有效值，1代表是，0代表否紫色鏈接表示該屬性在CSS3有修改或者增加了新的屬性值；橙色鏈接表示該屬性是CSS3新增屬性width瀏覽器視窗的寬度height瀏覽器視窗的高度Device-width設(shè)備系統(tǒng)設(shè)定的分辨率寬度（可以修改的）Device-height設(shè)備系統(tǒng)設(shè)定的分辨率高度（可以修改的）物理分辨率:屏幕能夠顯示的最大分辨率。（區(qū)分以上2個(gè)）orientation設(shè)定屏幕是橫屏還是豎屏aspect-ratio定義瀏覽器的寬度和高度比例。device-aspect-ratio定義設(shè)備的寬高比（常用）三種媒體查詢+媒體特性的書寫格式link語(yǔ)法<linkhref=CSS文件type=text/cssrel=stylesheetmedia=媒體類型and（媒體特性）...>@import語(yǔ)法@importurl（CSS文件）媒體類型and（媒體特性）…；@media語(yǔ)法@media媒體類型and（媒體特性）and（媒體特性）{重置的CSS樣式}媒體查詢關(guān)鍵字：not關(guān)鍵字可以在所有的媒體類型中使用，表示排除掉某種媒體類型。only關(guān)鍵字對(duì)于能夠識(shí)別媒體類型同時(shí)支持媒體查詢的設(shè)備only關(guān)鍵字就當(dāng)他沒有就可以了。對(duì)于支持媒體類型但是又不支持媒體特性的瀏覽器，他會(huì)先讀取only而不是screen這樣的媒體類型，會(huì)導(dǎo)致瀏覽器不會(huì)加載該樣式。對(duì)于媒體類型和媒體特性都不支持的瀏覽器而言，那就別看了。視窗設(shè)置視窗設(shè)置的語(yǔ)句很簡(jiǎn)單就是一個(gè)meta標(biāo)簽，而且僅對(duì)手持設(shè)備有效。主要為手機(jī)、pad等設(shè)備的視窗設(shè)定有效。格式：<metaname="viewport”content=設(shè)備的屬性設(shè)定>屬性描述可視區(qū)域的寬度，單位是像素。其取值可以是一個(gè)實(shí)際的數(shù)字或關(guān)鍵詞可視區(qū)域的高度，單位是像素。其取值可以是一個(gè)實(shí)際的數(shù)字或關(guān)鍵詞某個(gè)頁(yè)面首次被顯示時(shí)可視區(qū)域的縮放級(jí)別。取值為將使頁(yè)面以其實(shí)際尺寸顯示，無任何縮放可視區(qū)域的最小縮放級(jí)別。它表示用戶可以將頁(yè)面縮小的程度。取值為將禁止用戶縮小至實(shí)際尺寸以下可視區(qū)域的最大縮放級(jí)別。它表示用戶可以將頁(yè)面放大的程度。取值為將禁止用戶放大至實(shí)際尺寸以上指定用戶是否可以對(duì)頁(yè)面進(jìn)行縮放。設(shè)置為將允許縮放，則禁止縮放可視區(qū)域t簽由發(fā)明且尚未成為標(biāo)準(zhǔn)。然而，除之外的很多手機(jī)瀏覽器都支持該標(biāo)簽。響應(yīng)式布局的特點(diǎn)及注意事項(xiàng)：.頁(yè)面布局要使用流體網(wǎng)格。意思就是在布局中盡量使用百分比少使用像素，布局結(jié)構(gòu)就允許寫像素。.彈性圖片設(shè)置圖片盡量不設(shè)定專有尺寸，而是根據(jù)流體網(wǎng)格進(jìn)行適應(yīng)縮放，簡(jiǎn)單的說，圖片寬度設(shè)置為：面img{max-width:100%}.媒體查詢的使用為不同的設(shè)備實(shí)現(xiàn)不同的風(fēng)格。.了解各種設(shè)備的屏幕分辨率。為了適應(yīng)不同的設(shè)備及特性要了解。.了解主要斷點(diǎn)。多種設(shè)備的分辨率的分割點(diǎn)，在使用媒體查詢時(shí)要注意斷開查詢不要連接在一起