培訓霞css3響應式

響應式布局內容提要box-sizing盒大小

content-box、border-boxCSS3-mediaQuery(媒體查詢)

響應式布局（響應式設計）viewport視口

常用設置box-sizingbox-sizing盒大小語法：box-sizing:content-box|border-box|inherit;默認值：box-sizing:content-box當我們設置box-sizing:content-box;時，瀏覽器對盒模型的解釋遵從我們之前認識到的W3C標準，當它定義width和height時，它的寬度和高度不包括border和padding。當我們設置box-sizing:border-box;時，瀏覽器對盒模型的解釋與IE6之前的版本相同，當它定義width和height時，border和padding則是被包含在寬和高之內的。box-sizing:inherit規(guī)定應從父元素繼承box-sizing屬性的值。視口viewport<metaname="viewport"content="width=device-width,minimum-scale=0.5,maximum-scale=1.0,initial-scale=1.0,user-scalable=no"/>常用屬性：width/height實際顯示寬高device-width/device-height設備屏幕寬高minimum-scale 設定最小縮放比例（0-10.0）maximum-scale 設定最大縮放比例（0-10.0）initial-scale設定頁面初始縮放比例（0-10.0）user-scalable設定用戶是否可以縮放（yes/no）orientation設備方向

Portrait/landscape橫屏或豎屏響應式布局ResponsiveWebDesign將已有的開發(fā)技巧（彈性網格布局、彈性圖片、媒體和媒體查詢）整合起來，命名為響應式網頁設計，是一種針對任意設備對網頁內容進行“完美”布局的一種顯示機制。簡言之，是一個網站能夠兼容多個終端——而不是為每個終端做一個特定的版本。響應式布局優(yōu)劣優(yōu)勢多終端視覺和操作體驗風格統(tǒng)一兼容當前及未來新設備節(jié)約了開發(fā)成本，維護成本也降低很多不足兼容性：低版本瀏覽器兼容性有問題移動帶寬流量：相比較手機定制網站，流量稍大，但比較加載一個完整pc端網站顯然是小得多代碼累贅，會出現(xiàn)隱藏無用的元素，加載時間加長在設計的初期就要考慮的頁面如何在多終端顯示，兼容各種設備工作量大響應式應用適用什么？對于重內容的網站，例如形象展示，則比較適合使用響應式web設計不適用什么？對于重功能的網站，如電子商務類，則更推薦使用獨立移動網站響應式實現(xiàn)CSS3-mediaQuery（媒體查詢）javascript第三方開源框架Bootstrap

CSS3-mediaQuery定義和使用使用@media查詢，你可以針對不同的媒體類型定義不同的樣式。@media可以針對不同的屏幕尺寸設置不同的樣式，特別是如果你需要設置響應式設計的頁面，@media是非常有用的。當你重置瀏覽器大小的過程中，頁面也會根據(jù)瀏覽器的寬度和高度重新渲染頁面。

CSS3-mediaQueryCSS語法外聯(lián)CSS語法：<linkrel="stylesheet"media="mediatype

and|not|only(mediafeature)"href="mystylesheet.css">媒體類型：mediatype關鍵字：and|not|only媒體特征：mediafeature實例：<linkrel="stylesheet"media="screen

and(min-width:1024px)"href="red.css"/>

CSS3-mediaQueryCSS語法內嵌樣式的語法：@mediamediatype

and|not|only(mediafeature){...}媒體類型：mediatype關鍵字：and|not|only媒體特征：mediafeature實例：<style>@mediaall

and(min-width:500px){…}</style>

CSS3-mediaQuery媒體類型：mediatypeall 用于所有設備screen用于電腦屏幕，平板電腦，智能手機等print 用于打印機和打印預覽speech應用于屏幕閱讀器等發(fā)聲設備aural 用于語音和聲音合成器braille 應用于盲文觸摸式反饋設備embossed 用于打印的盲人印刷設備handheld 用于掌上設備或更小的裝置，如PDA和小型電話projection 用于投影設備tty 用于固定的字符網格，如電報和對字符有限制的便攜設備tv 用于電視和網絡電視

CSS3-mediaQuery關鍵字：and|not|onlyand用來連接條件，然后括號里就是一個媒體特征查詢語句not用來排除某種媒體類型，即用于排除符合表達式的設備only

用來限定某種媒體類型，可用來排除不支持媒體查詢的瀏覽器實例：@mediascreenand(min-width:500px)and(max-width:800px)<linkrel="stylesheet"media="notprintand(max-width:1200px)"href="red.css"type="text/css"/><linkrel="stylesheet"media="onlyscreenand(max-width:240px)"href="w240.css"type="text/css"/>

CSS3-mediaQuery媒體特征：mediafeaturemax-width:500pxmin-width:500px@mediascreenand(min-width:320px)and(max-width:500px)分辨率精細的終端查詢：device-pixel-ratio如：iphone4以