2021跨平臺響應(yīng)式技術(shù)03Bootstrap框架01響應(yīng)式媒體查詢目錄CONTENT02響應(yīng)式網(wǎng)頁設(shè)計(jì)響應(yīng)式媒體查詢019.1.1媒體類型查詢媒介類型功能描述all用于所有的媒介設(shè)備。screen用于電腦顯示器。print用于打印機(jī)。aural用于語音和音頻合成器。braille用于盲人用點(diǎn)字法觸覺回饋設(shè)備。embossed用于分頁的盲人用點(diǎn)字法打印機(jī)。handheld用于小的手持的設(shè)備。projection用于方案展示，比如幻燈片。tty用于使用固定密度字母柵格的媒介，比如電傳打字機(jī)和終端。tv用于電視機(jī)類型的設(shè)備。@media媒體類型and|not|only（媒體特性）{選擇器{屬性：值；}}其中，@media是媒體查詢的關(guān)鍵字，啟動(dòng)識別媒體類型或者媒體特性的語法。媒體類型默認(rèn)是“all”指所有媒體，標(biāo)示我們的頁面在所有媒體上應(yīng)用統(tǒng)一的樣式。媒介查詢需要聲明在普通樣式后面，下面這樣聲明將不會起作用：@mediascreenand(min-width:1280px){/*willnottakeaffect*/a{text-decoration:underline;}}a{text-decoration:none;}<linkrel=“stylesheet”media=“媒體類型and|not|only（媒體特性）”href=“鏈入的樣式表路徑”>9.1.2媒體特性查詢<metaname="viewport"content="width=480,initial-scale=1.0"/>為了響應(yīng)式設(shè)計(jì)的需要，我們通常采用如下的視窗設(shè)置來讓我們的頁面在不同尺寸的屏幕上獲得最佳的視覺效果：<metaname="viewport"content="width=device-width,initial-scale=1.0,minimum-scale=1.0,maximum-scale=2.0,user-scalable=yes">上面的語句設(shè)置了瀏覽器視窗寬度為設(shè)備的寬度，初始縮放比例為1，最小縮放比例為1，最大縮放比例為2，允許用戶縮放頁面。@media媒體類型邏輯關(guān)鍵字（媒體特性）{選擇器{屬性：值；}}回顧上面的媒體查詢語法，其中邏輯關(guān)鍵字可以是“and”，“not”，“only”，分別表示邏輯“且”，“非”，“僅”；媒體特性則主要分為寬度，高度，高寬比，顏色，分辨率等特性。媒體特性意義例width當(dāng)頁面寬度等于屬性值時(shí)，應(yīng)用指定的CSS樣式@media(width:480px){...}min-width當(dāng)頁面最小寬度等于480px時(shí)（頁面寬度大于等于480px），應(yīng)用大括號中的CSS樣式@media(min-width:480px){...}max-width當(dāng)頁面最大寬度等于480px時(shí)（頁面寬度小于等于480px），應(yīng)用大括號中的CSS樣式@media(max-width:480px){...}height當(dāng)頁面高度等于屬性值時(shí)，應(yīng)用指定的CSS樣式@media(height:480px){...}device-width當(dāng)設(shè)備寬度等于屬性值時(shí)，應(yīng)用指定的CSS樣式@media(device-width:480px){...}device-height當(dāng)設(shè)備高度等于屬性值時(shí)，應(yīng)用指定的CSS樣式@media(device-height:480px){...}orientation頁面為橫向（橫屏）時(shí)應(yīng)用大括號中的樣式@media(orientation:landscape){...}aspect-ratio頁面寬高比為3:2時(shí)應(yīng)用大括號中的樣式@media(aspect-ratio:3/2){...}device-aspect-ratio設(shè)備寬高比為3:2時(shí)應(yīng)用大括號中的樣式@media(device-aspect-ratio:3/2){...}color輸出設(shè)備為彩色設(shè)備時(shí)應(yīng)用大括號中的樣式@media(color){...}color-index輸出設(shè)備為256真彩色設(shè)備時(shí)應(yīng)用大括號中的樣式@media(color-index：256){...}resolution設(shè)備分辨率為96dpi時(shí)應(yīng)用樣式@media(resolution:96dpi){...}【案例引入】響應(yīng)式網(wǎng)頁設(shè)計(jì)021.條件表達(dá)式下面這幾個(gè)查詢就是width（寬度特性）和媒體類型為屏幕的綜合應(yīng)用：@mediascreenand(width:320px){ /*stylesadaptedtodeviceswhich(width==320px)*/} @mediascreenand(min-width:320px){ /*stylesadaptedtodeviceswhich(width>=320px)*/} @mediascreenand(max-width:960px){ /*stylesadaptedtodeviceswhich(width<=960px)*/}在上面的代碼中，我們使用了一個(gè)and邏輯關(guān)鍵字將前后的表達(dá)式連接起來，這是很常見的用法，另外還有not和only。其中not用于對整個(gè)表達(dá)式的結(jié)果取反，如果我們希望匹配320px及以下寬度的設(shè)備，下面兩個(gè)表達(dá)式是等效的： @mediascreenand(max-width:320px){/*styles*/} @medianotscreenand(min-width:320px){/*styles*/}而only用于兼容老版本的瀏覽器。對于老版本的瀏覽器，是不支持媒介查詢的，但也會嘗試下載這些樣式，這時(shí)候我們可以使用only關(guān)鍵字，對老版本的瀏覽器隱藏媒介查詢，使之忽略這些樣式，而對于那些高版本的瀏覽器，則會繼續(xù)處理帶有only關(guān)鍵字的查詢語句，使用時(shí)就像下面這樣聲明：@mediaonlyscreenand(min-width:320px){/*styles*/}另外還存在一個(gè)類似or的邏輯，如果希望在多個(gè)查詢中只要存在有匹配的語句就去應(yīng)用指定的樣式，我們可以使用逗號來表示，這跟普通CSS代碼中的使用方式是一樣的： @mediascreenand(min-width:320px),@mediaprint{/*styles*/}2.布局流程在建立響應(yīng)式頁面時(shí)，有兩種不同的思想，第一種是從桌面端開始向移動(dòng)端擴(kuò)展設(shè)計(jì)，第二種是從移動(dòng)端開始向桌面端擴(kuò)展設(shè)計(jì)。前者默認(rèn)是以桌面端為主，添加一些媒介查詢來兼容移動(dòng)端設(shè)備；而后者正好相反，從移動(dòng)端開始逐步向桌面端適配。9.2.2響應(yīng)式導(dǎo)航我們希望頁面在大屏幕時(shí)，導(dǎo)航欄顯示在上方，當(dāng)頁面縮小到手機(jī)大小時(shí)，導(dǎo)航欄能夠隱藏起來，只有我們點(diǎn)擊相應(yīng)的圖標(biāo)時(shí)才顯示9.2.3響應(yīng)式圖像1、

img元素的處理通過設(shè)置img元素的寬度為相對父元素百分比的寬度，然后把img元素放到一個(gè)響應(yīng)式的布局容器中，img元素隨父元素的縮放同步縮放，就可以實(shí)現(xiàn)圖片的響應(yīng)式排版。Css語法如下：img{width:100%;height:auto;}為了防止圖片由于過度放大導(dǎo)致的失真，我們可以使用max-width屬性很好的解決這個(gè)問題。這樣圖片最大不超過原始大小。img{max-width:100%;height:auto;}2、背景圖片的處理背景圖片可以響應(yīng)式的調(diào)整大小或縮放。具體做法為通過background-size屬性指定背景的大小，常用的寫法如下：background-size：contain;/*背景覆蓋容器的內(nèi)容區(qū)*/background-size：100%100%;/*背景覆蓋整個(gè)容器*/background-size：cover;/*背景覆蓋整個(gè)容器*/contain屬性值指定背景圖片按比例縮放以覆蓋內(nèi)容區(qū)域。注意該屬性圖片保持其原始高寬比例不變，可能會導(dǎo)致圖片無法完全覆蓋內(nèi)容區(qū)。cover屬性則會把背景圖像擴(kuò)展至足夠大，以使背景圖像完全覆蓋背景區(qū)域。注意該屬性保持了圖片的比例，因此背景圖像的某些部分無法顯示在背景定位區(qū)域中。3.不同設(shè)備顯示不同圖片

小尺寸圖片可以顯示在小屏幕上，但在大屏幕上會存在因?yàn)榭s放導(dǎo)致的失真等問題，不能很好顯示。而我們沒有又必要在小屏幕上去加載大圖片，這樣很影響加載速度。所以我們可以使用媒體查詢，根據(jù)不同的設(shè)備顯示不同的圖片。Bootstrap框架039.3.1Bootstrap框架簡介Bootstrap是基于HTML、CSS、JAVASCRIPT的用于快速開發(fā)Web應(yīng)用程序和網(wǎng)站的前端框架，它提供了一套完整的可用于web前端開發(fā)的組件和樣式。Bootstrap框架里的組件常常放在主容器中，且最好一個(gè)界面只有一個(gè)主容器，主容器有兩類：container和container-fluid，它們的區(qū)別在于：container：固定寬度并支持響應(yīng)式布局的容器。雖然padding為15px，但隨著瀏覽器寬度的不同，容器距瀏覽器邊框的margin不同，即margin會響應(yīng)式的變化。container-fluid：用于100%寬度，占據(jù)全部視口（viewport）的容器。僅padding為15px，容器沒有margin值。9.3.2Bootstrap柵格系統(tǒng)Bootstrap提供了一套響應(yīng)式、移動(dòng)設(shè)備優(yōu)先的流式柵格系統(tǒng)，隨著屏幕或視口（viewport）尺寸的增加，系統(tǒng)會自動(dòng)分為最多12列。它包含了易于使用的預(yù)定義類，還有強(qiáng)大的mixin用于生成更具語義的布局。柵格系統(tǒng)用于通過一系列的行（row）與列（column）的組合來創(chuàng)建頁面布局，你的內(nèi)容就可以放入這些創(chuàng)建好的布局中。下面就介紹一下Bootstrap柵格系統(tǒng)的工作原理：.row元素必須包含在.container（固定寬度）或.container-fluid（100%寬度）中，以便為其賦予合適的排列（aligment）和內(nèi)補(bǔ)（padding）。通過“行（row）”在水平方向創(chuàng)建一組“列（column）”。內(nèi)容應(yīng)當(dāng)放置于“列（column）”內(nèi)，并且，只有“列（column）”可以作為行（row）”的直接子元素。類似

.row和.col-xs-4這種預(yù)定義的類，可以用來快速創(chuàng)建柵格布局。Bootstrap源碼中定義的mixin也可以用來創(chuàng)建語義化的布局。通過為“列（column）”設(shè)置padding屬性，從而創(chuàng)建列與列之間的間隔（gutter）。通過為.row元素設(shè)置負(fù)值margin從而抵消掉為.container元素設(shè)置的padding，也就間接為“行（row）”所包含的“列（column）”抵消掉了padding。負(fù)值的

margin就是下面的示例為什么是向外突出的原因。在柵格列中的內(nèi)容排成一行。柵格系統(tǒng)中的列是通過指定1到12的值來表示其跨越的范圍。例如，三個(gè)等寬的列可以使用三個(gè).col-xs-4來創(chuàng)建。如果一“行（row）”中包含了的“列（column）”大于12，多余的“列（column）”所在的元素將被作為一個(gè)整體另起一行排列。柵格類適用于與屏幕寬度大于或等于分界點(diǎn)大小的設(shè)備

，

并且針對小屏幕設(shè)備覆蓋柵格類。

因此，在元素上應(yīng)用任何

.col-md-*柵格類適用于與屏幕寬度大于或等于分界點(diǎn)大小的設(shè)備，并且針對小屏幕設(shè)備覆蓋柵格類。因此，在元素上應(yīng)用任何.col-lg-*不存在，也影響大屏幕設(shè)備?！景咐搿?.3.3使用柵格系統(tǒng)進(jìn)行響應(yīng)式布局采用容器內(nèi)行(row)列(column)布局方式，.column必須包含在.row中，.row必須包含在.container中；.container可以包含多個(gè).row，.row可以包含多個(gè).column;展示的內(nèi)容應(yīng)當(dāng)放置于.column類中，并且只有.column可以作為.row的子元素;使用類似于.row.col-xs-4等預(yù)定義類，快速創(chuàng)建柵格化布局；柵格類適用于屏幕寬度大于或等于分界點(diǎn)大小的設(shè)備，并且針對小屏幕設(shè)備覆蓋柵格化類，比如.col-md-*在.container-fludid寬度≥992px時(shí)生效；常用布局方式類似于下圖媒介分類Bootstrap將屏幕大小分為4類/*屏幕大小小于768px*/@media(max-width:767px){...}/*屏幕最小寬度為768px*/@media(min-width:768px){...}/*屏幕最小寬度為992px*/@media(min-width:992px){...}/*屏幕最小寬度為1200px*/@media(min-width:1200px){...}代表屏幕大小的幾個(gè)縮寫形式：xs：extrasmall特別窄屏幕，默認(rèn)指瀏覽器像素寬度小于768px；sm：small窄屏幕，默認(rèn)指瀏覽器像素寬度大于等于768px，通常是平板寬度；md：middle中等寬度屏幕，默認(rèn)值指瀏覽器像素寬度大于等于992px，通常是桌面顯示器，略縮小的情況；lg：large大屏幕，默認(rèn)值指瀏覽器像素寬度大于等于1200px。預(yù)期結(jié)果：（1）container≥1200px(lg):4列布局1：2：8：1；（2）container≥992px&&container＜1200px(md)：3:3:3:3（3）container≥768px&&container＜991px(sm)：2:4:4:2（3）container＜768px(xs)：div默認(rèn)display:block實(shí)際運(yùn)行結(jié)果：9.3.4Bootstrap字體圖標(biāo)字體圖標(biāo)是在Web項(xiàng)目中使用的圖標(biāo)字體。雖然，GlyphiconsHalflings需要商業(yè)許可，但是您可以通過基于項(xiàng)目的Bootstrap來免費(fèi)使用這些圖標(biāo)。字體圖標(biāo)是Bootstrap框架中非常好用的一個(gè)功能，只要添加簡單的樣式，無需導(dǎo)入圖標(biāo)即可實(shí)現(xiàn)圖標(biāo)的顯示。通常使用<span>渲染字體圖標(biāo)，并將該元素放置在<button>或<a>內(nèi)?；照拢˙adges）主要用于突出顯示新的或未讀的項(xiàng)。如需使用徽章，只需要把<spanclass="badge">添加到鏈接、Bootstrap導(dǎo)航條等這些元素上即可。效果如下圖9.3.5

Bootstrap響應(yīng)式表格Bootstrap為<table>標(biāo)簽設(shè)計(jì)了.table類，可以為其賦予基本的樣式—少量的內(nèi)邊距（padding）和水平方向的分隔線。將任何.table元素包裹在.table-responsive元素內(nèi)，即可創(chuàng)建響應(yīng)式表格，其會在小屏幕設(shè)備上（小于768px）水平滾動(dòng)。當(dāng)屏幕大于768px寬度時(shí)，水平滾動(dòng)條消失。通過.table-striped類可以給<tbody>之內(nèi)的每一行增加斑馬條紋樣式。添加.table-bordered類為表格和其中的每個(gè)單元格增加邊框。添加.table-hover類可以讓<tbody>中的每一行對鼠標(biāo)懸停狀態(tài)作出響應(yīng)。Class描述.active鼠標(biāo)懸停在行或單元格上時(shí)所設(shè)置的顏色.success標(biāo)識成功或積極的動(dòng)作.info標(biāo)識普通的提示信息或動(dòng)作.warning標(biāo)識警告或需要用戶注意.danger標(biāo)識危險(xiǎn)或潛在的帶來負(fù)面影響的動(dòng)作9.3.6

Bootstrap響應(yīng)式導(dǎo)航條Bootstrap導(dǎo)航條是在您的應(yīng)用或網(wǎng)站中作為導(dǎo)航頁頭的響應(yīng)式基礎(chǔ)組件。它們在移動(dòng)設(shè)備上可以折疊（并且可開可關(guān)），且在視口（viewport）寬度增加時(shí)逐漸變?yōu)樗秸归_模式。bootstrap導(dǎo)航條元素.navbar給導(dǎo)航設(shè)置了一些基本的樣式，你可以聯(lián)合.navbar-default啟用一個(gè)默認(rèn)的導(dǎo)航條樣式。navbar-header類常常用來給導(dǎo)航條的第一個(gè)欄目做美化，navbar-nav類適合應(yīng)用到導(dǎo)航列表<ul>元素上。當(dāng)你要設(shè)計(jì)一個(gè)下拉式的導(dǎo)航菜單時(shí)，bootstrap為你提供了dropdown-menu類來處理你的導(dǎo)航列表。務(wù)必使用

<nav>元素包含你的導(dǎo)航條，或者，如果使用的是通用的

<div>元素的話，務(wù)必為導(dǎo)航條設(shè)置role="navigation"屬性，這樣能夠讓使用輔助設(shè)備的用戶明確知道這是一個(gè)導(dǎo)航區(qū)域。響應(yīng)式盒子彈性布局049.4.1盒子模型CSS盒子模型(BoxModel)CSS把所有HTML元素可以看作盒子，它包括：外邊距（margin），邊框（border），內(nèi)邊距（padding），和元素內(nèi)容（content）。盒模型允許在其它元素和周圍元素邊框之間的空間放置元素。不同部分的說明：Margin(外邊距)-邊框外的區(qū)域，外邊距是透明的。Border(邊框)-圍繞在內(nèi)邊距和內(nèi)容外的邊框。Padding(內(nèi)邊距)-內(nèi)容與邊框之間的區(qū)域，內(nèi)邊距是透明的。Content(內(nèi)容)-盒子的內(nèi)容，顯示文本和圖像等。元素的總寬度計(jì)算公式是這樣的：總元素的寬度=寬度+左填充+右填充+左邊框+右邊框+左邊距+右邊距元素的總高度最終計(jì)算公式是這樣的：總元素的高度=高度+頂部填充+底部填充+上邊框+下邊框+上邊距+下邊距9.4.2

使用彈性布局頁面布局一直都是web應(yīng)用樣式設(shè)計(jì)的重點(diǎn)，傳統(tǒng)的布局方式都是基于盒模型的，利用display、position、float來布局有一定局限性，比如說實(shí)現(xiàn)自適應(yīng)垂直居中，隨著響應(yīng)式布局的流行，CSS3引入了更加靈活的彈性布局模型，flex彈性布局，使用彈性布局可以有效的分配一個(gè)容器的空間即使的容器元素尺寸改變，它內(nèi)部的元素也可以調(diào)整它的尺寸來適應(yīng)空間。若想讓一個(gè)元素變成彈性盒，很簡單：.demo{/*塊級元素*/display:flex;}.demo{/*行級元素*/display:inline-flex;}設(shè)置了flex布局后，子元素的float、clear和vertical-align屬性就會失效.flex-box{display:flex;/*彈性布局*/width:500px;height:100px;border:1pxsolidblack;}9.4.3

彈性盒子布局相關(guān)屬性詳解在講那些屬性之前，先來看一些基本概念，設(shè)置了flex布局的元素，稱為“flex容器”，簡稱“容器”，它的子元素，稱為“flex項(xiàng)目”，簡稱“項(xiàng)目”。具體模型如下圖：“容器”中有兩條垂直的坐標(biāo)軸，橫向的叫做主軸，縱向的叫做交叉軸，主軸左邊與右邊分別叫做主軸起點(diǎn)與主軸終點(diǎn)，交叉軸上邊與下邊分別叫做交叉軸起點(diǎn)與交叉軸終點(diǎn)。“項(xiàng)目”也有兩個(gè)名詞，每個(gè)項(xiàng)目的寬與高叫做主軸尺寸與交叉軸尺寸。這回就能理解了為什么使用彈性布局后子元素呈現(xiàn)行排列，項(xiàng)目在容器中就是沿著主軸排列的。屬性名意義屬性值flex-direction指定“項(xiàng)目”排列方向row橫排（默認(rèn)）row-reverse反向橫排column豎排column-reverse反向豎排justify-content內(nèi)容對齊屬性，指定內(nèi)容相對于主軸對齊方式flex-start項(xiàng)目向行頭緊挨著填充。flex-end項(xiàng)目向行尾緊挨著填充。center項(xiàng)目居中緊挨著填充。space-between項(xiàng)目平均分布在該行上space-around項(xiàng)目平均分布在該行上，兩邊留有一半的空間。align-items設(shè)置或檢索彈性盒子元素在側(cè)軸（縱軸）方向上的對齊方式。flex-start：側(cè)軸（縱軸）起始端對齊。flex-end：側(cè)軸（縱軸）末端對齊。center：側(cè)軸（縱軸）居中對齊。baseline：如彈性盒子元素的行內(nèi)軸與側(cè)軸為同一條，則該值與'flex-start'等效。其它情況下，該值將參與基線對齊。stretch：如果指定側(cè)軸大小的屬性值為'auto'，則其值會使項(xiàng)目的邊距盒的尺寸盡可能接近所在行的尺寸，但同時(shí)會遵照'min/max-width/height'屬性的限制。flex-wrap指定彈性盒子的子元素?fù)Q行方式。nowrap：默認(rèn)，彈性容器為單行。該情況下彈性子項(xiàng)可能會溢出容器。wrap：彈性容器為多行。該情況下彈性子項(xiàng)溢出的部分會被放置到新行，子項(xiàng)內(nèi)部會發(fā)生斷行wrap-reverse：反轉(zhuǎn)wrap排列。align-content用于修改flex-wrap屬性的行為。類似于align-items,但它不是設(shè)置彈性子元素的對齊，而是設(shè)置各個(gè)行的對齊。Stretch：默認(rèn)。各行將會伸展以占用剩余的空間。flex-start：各行向彈性盒容器的起始位置堆疊。flex-end：各行向彈性盒容器的結(jié)束位置堆疊。Center：各行向彈性盒容器的中間位置堆疊。space-between：各行在彈性盒容器中平均分布。space-around：各行在彈性盒容器中平均分布，兩端保留子元素與子元素之間間距大小的一半?！景咐搿窟@張圖片分別對應(yīng)了flex-direction屬性的值為column-reverse、column、row、row-reverse時(shí)的排列樣式。并沒有改變項(xiàng)目的寬，但是由于處于彈性盒中項(xiàng)目過多，項(xiàng)目在主軸上被壓縮。如果需要調(diào)整為項(xiàng)目過多時(shí)，自動(dòng)新啟一行，如下圖的排列效果：彈性盒的項(xiàng)目默認(rèn)都是排列在一個(gè)軸上的，這樣如果項(xiàng)目多的話，會“彈性”壓縮在一行，比如說多加一些項(xiàng)目，如下圖：前兩個(gè)都理解了，第三個(gè)屬性值wrap-reverse，如果需要換行的項(xiàng)目會排在上面，像下圖這樣，則需要把flex-wrap的屬性值調(diào)整為：wrap-reverse。justify-content屬性驗(yàn)證，通過為justify-content屬性設(shè)置不同的值，觀察彈性項(xiàng)目的排版效果。具體效果如下：flex-start：

flex-end：

center：

space-between：

space-around：

align-items屬性驗(yàn)證，通過為align-items屬性設(shè)置不同的值，觀察彈性項(xiàng)目的排版效果。具體效果如下：flex-start：

flex-end：

center：

baseline：

align-contentalign-content屬性定義多根軸線的對齊方式，這個(gè)屬性只有在容器有多條主軸是才有效，一條主軸無效，類似于justify-content屬性，下面通過分別指定不同的值，來觀察具體的效果。

flex-start：

flex-end：

center：

space-between：

space-around：

項(xiàng)目屬性彈性盒布局“項(xiàng)目”有如下屬性：orderflex：flex-grow、flex-shrink、flex-basisalign-selforderorder允許自定義項(xiàng)目的排列順序，默認(rèn)為0，屬性值是數(shù)字，數(shù)值越小越靠前，有點(diǎn)類似優(yōu)先隊(duì)列中的優(yōu)先級。如下部分代碼：.flex-item:nth-child(1){......order:99;}.flex-item:nth-child(2){......order:-1;}.flex-item:nth-child(3){......}flex-growflex-grow定義項(xiàng)目的放大比例，默認(rèn)是0，就是如果沒有占滿容器整行，也不放大項(xiàng)目，就像上面的圖片。如果像下圖這樣，自動(dòng)填充滿彈性容器。.flex-item:nth-child(1){......flex-grow:1;}.flex-item:nth-child(2){......flex-grow:2;}.flex-item:nth-child(3){......flex-grow:3;}flex-shrinkflex-shrink定