商務(wù)網(wǎng)頁設(shè)計與制作（第2版）課件 第22課 響應(yīng)式網(wǎng)頁設(shè)計與制作

第4章 CSS網(wǎng)頁式樣制作技術(shù)4.8響應(yīng)式網(wǎng)頁設(shè)計與制作4.8.1瀏覽器與屏幕尺寸適配4.8.2設(shè)置彈性頁面4.8.3設(shè)置flex彈性容器4.8.4設(shè)計流式布局4.8.5制作響應(yīng)式網(wǎng)頁范例4.8.6響應(yīng)式網(wǎng)頁開發(fā)前端框架4.8響應(yīng)式網(wǎng)頁設(shè)計與制作響應(yīng)式布局就是針對不同寬度的設(shè)備進行布局和樣式的制作，從而自動適配不同屏幕尺寸的設(shè)備。各個廠家顯示設(shè)備的屏幕大小不是完全一致的，大體可劃分為以下幾個屏幕區(qū)間：手機：768像素以內(nèi)平板：768~992像素之間桌面顯示器：992~1200像素寬屏設(shè)備：1200像素以上響應(yīng)式設(shè)計，需要用一個容器作為父元素，讓子元素（通常為具有一定功能的模塊，也可稱之為子模塊、子項目，下同）在父元素的箱體內(nèi)隨著父元素的尺寸變化而自動改變排列方式和大小，讓手機、平板、電腦用戶均能較好地瀏覽網(wǎng)頁。響應(yīng)式設(shè)計的實現(xiàn)方式主要包括以下幾個主要方面：瀏覽器與屏幕尺寸適配、適應(yīng)不同尺寸屏幕的響應(yīng)式頁面設(shè)置、彈性flex容器設(shè)置，以及流式布局設(shè)計。01/03/02/04/其中，name=”viewport”指定該元數(shù)據(jù)為虛擬窗口類型，“width=device-width”指定虛擬窗口寬度為設(shè)備寬度，“initial-scale=1”確定最小縮放倍數(shù)為1，“maximum-scale=1”確定最大縮放倍數(shù)為1。通過設(shè)置Viewport的寬度讓手機瀏覽器的窗口寬度與手機屏幕寬度相同，達到完美適配，這是響應(yīng)式設(shè)計的一個基本步驟。<metaname=”viewport”content=”width=device-width,initial-scale=1,maximum-scale=1”>4.8.1瀏覽器與屏幕尺寸適配將移動端瀏覽器虛擬窗口Viewport設(shè)成與設(shè)備屏幕等寬，需要使用元數(shù)據(jù)標(biāo)簽<meta>及其name、content屬性，參考設(shè)置方法為CONTENT4.8.3設(shè)置彈性頁面劃分屏幕區(qū)間。設(shè)置彈性頁面，通常將屏幕尺寸劃分為n個區(qū)間，確定區(qū)間分界值，每個屏幕區(qū)間確定一種布局設(shè)計，從而完成彈性頁面的設(shè)計。彈性頁面至少要滿足2個以上屏幕區(qū)間的瀏覽需要，才能體現(xiàn)出響應(yīng)式設(shè)計的優(yōu)點。實踐中通常設(shè)計3-5個區(qū)間就能滿足彈性頁面的設(shè)計需要。屏幕區(qū)間的適配。在CSS中，可以通過@media命令來查詢當(dāng)前設(shè)備的屏幕大小，根據(jù)屏幕區(qū)間劃分所設(shè)定的屏幕區(qū)間分界值進行比對判斷。當(dāng)設(shè)定的比對條件被滿足時，則執(zhí)行該條件下的所有CSS布局樣式，這是響應(yīng)式布局設(shè)計的關(guān)鍵點。屏幕區(qū)間劃分的分界值不是固定的，可以根據(jù)具體項目特點做適當(dāng)?shù)恼{(diào)整。而且，屏幕區(qū)間的劃分還可以針對多數(shù)用戶的使用習(xí)慣，將屏幕區(qū)間進一步細化，以求彈性頁面完美適配多數(shù)用戶使用的需要。設(shè)置彈性頁面有兩種方案：一是移動端優(yōu)先、二是PC端優(yōu)先。1.移動端優(yōu)先方案隨著移動互聯(lián)網(wǎng)的普及，移動端應(yīng)用的快速增長，當(dāng)前網(wǎng)頁布局分界多采用移動端優(yōu)先方案，其頁面布局首先要滿足移動端瀏覽的需要，然后兼顧大屏幕設(shè)備使用。采用移動端優(yōu)先方案，應(yīng)當(dāng)使用@media命令及其mini-width屬性，將屏幕最小的放在前面，屏幕最大的放在后面。下面列出了一種移動端優(yōu)先的布局分界參考設(shè)置方法：/*屏幕超小設(shè)備不予細分(768px以下)*/選擇符1{}選擇符2{}……@mediascreenand(min-width:768px){/*手機設(shè)備*/選擇符1{}選擇符2{}……}@mediascreenand(min-width:992px){/*平板類設(shè)備*/選擇符1{}選擇符2{}……}@mediascreenand(min-width:1200px){/*PC機等大屏幕設(shè)備*/選擇符1{}選擇符2{}……}有的網(wǎng)站的使用場景主要面向PC機，這類網(wǎng)站應(yīng)當(dāng)首先保證PC端的應(yīng)用，然后兼顧移動端應(yīng)用。采用PC端優(yōu)先方案，應(yīng)當(dāng)使用@media命令及其max-width屬性，將屏幕最大的放在前面，屏幕最小的放在后面。下面列出了一種PC端優(yōu)先的布局分界參考設(shè)置方法：/*屏幕超大設(shè)備不予細分(1200px以上)*/選擇符1{}選擇符2{}……}@mediascreenand(max-width:1200px){/*PC機等大屏幕設(shè)備*/選擇符1{}選擇符2{}……}@mediascreenand(max-width:992px){/*平板類設(shè)備*/選擇符1{}選擇符2{}……}@mediascreenand(max-width:768px){/*手機設(shè)備*/選擇符1{}選擇符2{}……}4.8.3設(shè)置flex彈性容器1.理解Flex橫軸與縱軸響應(yīng)式網(wǎng)頁設(shè)計離不開flex彈性容器。我們通常將一個父容器定義為flex彈性盒子容器，然后將各個模塊化的內(nèi)容模塊作為子元素裝入這個彈性容器中，通過對容器和子元素相關(guān)屬性進行設(shè)置，即可實現(xiàn)響應(yīng)式布局設(shè)計與開發(fā)。在flex容器中默認(rèn)存在兩條軸，既橫軸和縱軸，默認(rèn)情況下橫軸為主軸。主軸不是一成不變的，可以通過語句命令來動態(tài)設(shè)置主軸為橫軸或縱軸。軸有上下左右四個方向，任何方向的軸均可作為主軸使用。橫軸是指從左向右的方向（正向），從右向左為反向橫軸。縱軸是指從上向下的方向（正向），從下向上為反向縱軸。主軸及正反向的變化會帶來不一樣的布局效果，響應(yīng)式網(wǎng)頁設(shè)計必須主軸為基準(zhǔn)進行設(shè)計。建議以縱軸為主軸（mainaxis）、橫軸為交叉軸（crossaxis，亦稱副軸）更有利于響應(yīng)式網(wǎng)頁的制作。2.定義flex彈性容器實現(xiàn)flex布局需要先指定一個父容器，通常容器類元素均可作為父容器被指定為flex容器。之后，flex容器內(nèi)部的子元素就可以使用flex技術(shù)進行布局。鑒于DIV元素的眾多優(yōu)點，絕大部分情況下均使用DIV作為flex父容器，子元素也以DIV元素居多。設(shè)置flex容器需要使用容器元素選擇符及display屬性，設(shè)置方法為容器元素選擇符｛display:flex|inline-flex;｝其中，屬性值flex適用于塊級元素，inline-flex適用于內(nèi)聯(lián)元素。有一點需要注意，當(dāng)父容器設(shè)置為flex彈性盒子之后，其子元素的float、clear、vertical-align等屬性就失效了，這是響應(yīng)式網(wǎng)頁設(shè)計的需要。3.設(shè)置flex容器彈性布局屬性Flex容器中有6個重要屬性與flex布局有關(guān)，分別是flex-direction、flex-wrap、flex-flow、justify-content、align-items和align-content。（1）主軸屬性Flex-direction該屬性是確定主軸的，既橫軸（反向橫軸）為主軸還是縱軸（反向縱軸）為主軸。設(shè)置主軸的參考方法為容器元素選擇符｛display:flex;/*設(shè)置容器為flex彈性盒子*/flex-direction:row|row-reverse|column|column-reverse;/*設(shè)置主軸*/｝其中，row值為默認(rèn)值，定義橫軸為主軸。row-reverse定義反向橫軸為主軸，column定義縱軸為主軸，column-reverse定義縱向反向縱軸為主軸。主軸決定子元素排列的方式。四種主軸的排列效果見圖4.44（2）換行屬性flex-wrap彈性容器內(nèi)的子元素都是按照主軸方向依次排列的。當(dāng)?shù)竭_容器邊界時，子元素是否換行顯示取決于flex-wrap的設(shè)置。設(shè)置flex-wrap的參考方法為容器元素選擇符｛display:flex;/*設(shè)置容器為flex彈性盒子*/flex-wrap:nowrap|wrap|wrap-reverse;/*設(shè)置子元素是否換行*/｝其中，nowrap為默認(rèn)值，不換行。當(dāng)容器內(nèi)的元素到達邊界時，自動調(diào)整縮小項目尺寸不會換行。Wrap代表換行，wrap-reverse代表反向換行（向上換行）。Flex-wrap各屬性值所規(guī)定的換行方式效果展示見圖4.45。（3）復(fù)合屬性flex-flow復(fù)合屬性flex-flow復(fù)合了flex-direction、flex-wrap屬性，是這兩種屬性的簡潔表達。參考的設(shè)置方法為容器元素選擇符｛display:flex;/*設(shè)置容器為flex彈性盒子*/flex-flow:flex-direction屬性值flex-wrap屬性值/*設(shè)置兩個屬性值*/｝

復(fù)合屬性flex-flow沒有實質(zhì)性改進作用，實踐中建議分別采用flex-direction、flex-wrap書寫表達更簡單易懂。（4）主軸對齊屬性justify-content該屬性規(guī)定容器中的子元素沿主軸方向的對齊方式，包括起始端對齊、末端對齊、居中對齊、兩端對齊、子元素兩側(cè)間距相等5種形式。設(shè)置主軸對齊屬性的參考方法為容器元素選擇符｛display:flex;/*設(shè)置容器為flex彈性盒子*/justify-content:flex-start|flex-end|center|space-between|space-around;｝其中，flex-start為起始端對齊，flex-end為末端對齊，center為居中對齊，space-between為兩端對齊，space-around為兩側(cè)間距相等對齊。各種對齊方式的效果見圖4.46（5）交叉軸對齊屬性align-items該屬性規(guī)定容器內(nèi)的子元素在交叉軸（副軸）上的對齊方式。如果主軸為橫軸，則交叉軸就是縱軸；如果主軸是縱軸，則交叉軸為橫軸。該屬性的參考設(shè)置方法為容器元素選擇符｛display:flex;/*設(shè)置容器為flex彈性盒子*/align-items:flex-start|flex-end|center|baseline|stretch;｝其中，stretch為默認(rèn)值，為拉伸對齊。在主軸為橫軸或反向橫軸的情況下，如果容器內(nèi)的子元素未設(shè)置高度或者其高度設(shè)為auto，則子元素將拉伸至容器的高度。flex-start為交叉軸起始端對齊，flex-end為交叉軸末端對齊，center為交叉軸居中對齊，baseline為子元素第一行文字的基線對齊。交叉軸各種對齊方式的效果見圖4.47。（6）多軸對齊屬性align-content如果容器只設(shè)立一根主軸（既容器的flex-wrap設(shè)為nowrap），該屬性不起作用。當(dāng)容器的flex-wrap屬性設(shè)為wrap且容器內(nèi)子元素的總寬度大于容器寬度時（假定主軸為橫軸），則自然產(chǎn)生多行（有的書稱為多軸），也同時產(chǎn)生了主軸的交叉軸，此時align-content就會起作用。設(shè)置多軸的對齊方式，參考方法為容器元素選擇符｛display:flex;/*設(shè)置容器為flex彈性盒子*/flex-wrap:wrap;/*設(shè)置為可換行*/align-content:flex-start|flex-end|center|space-between|space-around|stretch;｝其中，stretch是容器的默認(rèn)屬性，是指在交叉軸上拉伸布局。假設(shè)主軸為橫軸，如果子元素的高度也設(shè)為stretch或auto，則在交叉軸上拉伸至容器高度進行布局。如果是多行（多軸），則各行平均分配父容器的高度。flex-start為各行子元素均基于交叉軸的起始端對齊，flex-end為各行子元素均基于交叉軸的末端對齊，center為基于交叉軸的中線對齊，space-between為交叉軸的上下兩端對齊且各行子元素平均分配高度，space-around為基于交叉軸的上下兩端對齊且上下兩側(cè)邊距相等。多軸對齊屬性的效果見圖4.48。（2）主軸空間屬性flex-basis該屬性規(guī)定子元素在分配多余主軸空間之前，先分配該子元素占用多少主軸空間，瀏覽器會根據(jù)這個屬性來計算主軸是否有多余空間。設(shè)置元素占用主軸空間屬性的方法為子元素選擇符｛flex-basis:空間占用值|auto;｝該屬性默認(rèn)值為auto，即按照元素本來的大小顯示,這時候該元素的大小取決于width或height的值，且該值不會被計入容器在主軸的剩余空間中。如果容器的主軸為橫軸，子元素設(shè)置了flex-basis空間比例，則子元素的寬度設(shè)置值就會失效。主軸空間的屬性值為百分?jǐn)?shù)，用來確定該元素在容器中所占的比例。當(dāng)flex-basis值為0%時，規(guī)定該元素為零尺寸，即使定義了width=140px也不會有效果?？臻g屬性flex-basis通常需要跟放大屬性flex-grow和縮小屬性flex-shrink配合使用。4.設(shè)置子元素彈性布局屬性子元素有6個flex布局屬性，分別為order、flex-basis、flex-grow、flex-shrink、flex、align-self，這些屬性將決定flex布局。（1）排列順序?qū)傩詏rder該屬性規(guī)定子元素在容器中的排列順序，整數(shù)值。數(shù)值越小，排列越靠前，默認(rèn)值為0，可以設(shè)為負(fù)數(shù)，如無特殊用途不建議設(shè)為負(fù)數(shù)。容器中各個子元素的排列，不按照創(chuàng)建次序先后排列，而是按照order規(guī)定的次序排列。設(shè)置子元素排列順序的方法為子元素選擇符｛order:序號值;/*設(shè)置排列順序號，可為0、1、2……*/｝（3）放大屬性flex-grow該屬性定義容器中的子元素可放大的比例，設(shè)置方法為子元素選擇符｛flex-grow:放大值;｝該屬性默認(rèn)值為0，規(guī)定了即使容器存在剩余空間，也不會被放大尺寸。如果該屬性為某一數(shù)值，代表該元素在容器剩余空間中占有的份額。在一個容器中，當(dāng)所有的子元素都以flex-basis的值進行排列后，還有剩余空間，這時候flex-grow才能發(fā)揮。例如，容器中有3個元素，第一個元素的flex-grow值為1，第二個元素的flex-grow值為2，第三個元素的flex-grow值為1。在按照flex-basis的值排列后，該容器剩余空間為200px，這時就會按照各個元素的flex-grow值的份額所占比率分配剩余空間。由此計算出本例第一個元素占用25%[1/（1+2+1）]的剩余空間，第二個元素占用50%的剩余空間，第三個元素占用25%的剩余空間。上例中，如果當(dāng)所有元素以flex-basis的值排列后超出了容器的總空間，且容器的flex-wrap設(shè)為nowrap時，flex-grow就不會起作用，需要使用flex-shrink縮小屬性。（4）縮小屬性flex-shrink該屬性規(guī)定子元素的縮小比例，設(shè)置方法為子元素選擇符｛flex-shrink:縮小值;｝該屬性的默認(rèn)值為1，表示如果容器的空間不夠排列所有的子元素，該元素就會等比縮小。如果設(shè)置flex-shrink的值為0，表示該元素不受空間不足影響保持原來的尺寸不變。進一步，如果容器內(nèi)所有子元素的flex-shrink屬性都為1，當(dāng)空間不足時，都將等比縮??；如果一個子元素的flex-shrink屬性為0，其他子元素都為1，當(dāng)空間不足時，前者不縮小，其他子元素等比縮小。（5）復(fù)合屬性flex復(fù)合屬性flex復(fù)合了flex-grow、flex-shrink和flex-basis，簡潔表示三個屬性的值。該屬性的設(shè)置方法為子元素選擇符｛flex:flex-growflex-shrinkflex-basis;/*一次賦值3個屬性*/｝復(fù)合屬性flex的用法比較復(fù)雜，建議初學(xué)者分別使用flex-grow、flex-shrink和flex-basis設(shè)置flex布局。（6）子元素對齊屬性align-self在父容器中，通常通過容器給所有子元素統(tǒng)一定義了對齊屬性。為了突出顯示某一子元素的特殊地位，可以單獨對這個子元素定義對齊屬性，使之對齊方式不同于其他子元素。子元素對齊屬性的設(shè)置方法為子元素選擇符｛align-self:auto|flex-start|flex-end|center|baseline|stretch;｝該屬性值的含義與父容器的align-items相同，只是用法上不同。該屬性作用于容器內(nèi)的單個子元素，而align-items作用于容器內(nèi)的所有子元素，而且子元素align-self屬性的優(yōu)先級高于父元素的align-items屬性。4.8.4設(shè)計流式布局1.網(wǎng)頁內(nèi)容模塊化設(shè)計對頁面進行響應(yīng)式設(shè)計，需要對網(wǎng)頁內(nèi)容進行模塊化設(shè)計，模塊化設(shè)計是流式布局的前提。在響應(yīng)式設(shè)計中，大部分情況下，需要將網(wǎng)頁內(nèi)容封裝在若干模塊中。所以，對網(wǎng)頁內(nèi)容的模塊化抽象設(shè)計是非常重要的，需要合理歸納網(wǎng)頁內(nèi)容，使之符合模塊化設(shè)計的要求。2.流式布局流式布局主要是針對不同的屏幕寬度來布局的。流式布局的設(shè)計模式有兩種：PC端優(yōu)先（從PC端開始向小屏幕方向設(shè)計）；移動端優(yōu)先（從移動端開始向PC端大屏幕設(shè)計）。無論基于那種模式的設(shè)計，為自適應(yīng)不同屏幕大小的設(shè)備，在網(wǎng)頁響應(yīng)時不可避免地需要對模塊化布局做一些改變。比如一個網(wǎng)頁在瀏覽器窗口擠壓-拉伸時，網(wǎng)頁內(nèi)的模塊發(fā)生位置變化，好像模塊流動了一樣，見圖4.49。（1）圖片的流式布局設(shè)計網(wǎng)頁中的圖片分為內(nèi)容圖片（嵌入式引用）和背景圖片兩種情況。在網(wǎng)頁中嵌入自適應(yīng)頁面的圖片，需要設(shè)置圖像選擇符和寬度屬性，將其寬度的百分比設(shè)置為100%來控制圖片的自適應(yīng)縮放。采用CSS設(shè)置圖片自適應(yīng)的方法為圖像選擇符｛Width:100%;｝

響應(yīng)式設(shè)計很多情況下，都需要將圖像寬度設(shè)置為100%，而高度采用默認(rèn)值即可，圖像長寬比例不會變化。在網(wǎng)頁中設(shè)置響應(yīng)式背景圖片，可以在容器類型的元素選擇符樣式中，設(shè)置背景圖像為不重復(fù)，并將寬度的百分比設(shè)為100%，或?qū)⒈尘皥D像大小設(shè)為cover等方法實現(xiàn)。采用CSS設(shè)置響應(yīng)式背景圖片的參考方法為容器元素選擇符｛background-image:url(img_URL);background-repeat:no-repeat;

background-size:100%;/*100%可換成cover*/｝（2）文本的流式布局設(shè)計文本的流式布局設(shè)計相對簡單，只需要將文本封裝在一個模塊化的容器中即可，設(shè)置好字體、顏色、大小，以及行間距、字間距等即可。在響應(yīng)式設(shè)計中，通常將文本封裝在一個DIV塊中。DIV在當(dāng)前網(wǎng)頁設(shè)計中的地位非常重要，大部分網(wǎng)頁的排版均是通過模塊化的DIV塊來實現(xiàn)的。4.8.5制作響應(yīng)式網(wǎng)頁范例本范例針對4.8.4節(jié)中流式布局效果圖（見圖4.49），實現(xiàn)響應(yīng)式布局頁面的設(shè)計與制作。該布局是一種典型的布局方案，針對移動端、PC端應(yīng)用進行設(shè)計，本范例采用移動端優(yōu)先方案。第一步：對網(wǎng)頁布局進行分析和設(shè)計。設(shè)立頁眉、頁腳、導(dǎo)航、文章和側(cè)邊欄5個區(qū)塊，并按照寬屏、窄屏的變化特點進行布局構(gòu)思，兼顧內(nèi)容展示和美觀設(shè)計。本范例采用移動端優(yōu)先方案，故首先對移動端頁面布局進行設(shè)計，當(dāng)屏幕寬度大于分界值時，再轉(zhuǎn)用寬屏頁面布局設(shè)計。此時應(yīng)該對頁面的高度、寬度，以及各個區(qū)塊的高度寬度進行測量和計算，以達到較好的布局效果。第二步；編寫HTML框架。完成頭文檔、主文檔的代碼制作。第三步：適配移動端瀏覽器。在HTML頭文檔中使用元數(shù)據(jù)<meta>標(biāo)簽設(shè)置手機虛擬窗口及相關(guān)屬性，通常以屏幕寬度適配瀏覽器。第四步：在頭文檔中編寫彈性布局CSS樣式（或鏈接導(dǎo)入樣式文件）。1.制作彈性容器樣式。設(shè)置為彈性容器作為父容器，按照移動端優(yōu)先原則，設(shè)置主軸為縱軸，并按照移動端頁面布局方案賦值高度、寬度信息；2.定義容器中所有子元素樣式。本例中，文章、導(dǎo)航和側(cè)邊欄3個區(qū)塊適合放在盒