基于HTML5+CSS3的Web前端響應(yīng)式頁面布局研究

陳紅衛(wèi)

（江蘇省徐州技師學院信息工程學院，江蘇 徐州 221000）

工業(yè)和信息化部的監(jiān)測數(shù)據(jù)顯示，2023年1—2月，國內(nèi)累計移動互聯(lián)網(wǎng)流量達到417.9億GB，同比增長了12%，截至2月底移動互聯(lián)網(wǎng)用戶數(shù)達14.68億戶，比上年末凈增1 422萬戶。移動互聯(lián)網(wǎng)流量及用戶量的增加帶來了智能手機市場的持續(xù)發(fā)展，智能手機屏幕的形態(tài)也從直板屏、曲面屏發(fā)展到了折疊屏。不斷升級的屏幕形態(tài)、屏幕尺寸、屏幕分辨率對Web前端頁面的布局有了更高的要求。

Web前端響應(yīng)式布局是一種新興的布局方式，它基于HTML5和CSS3等技術(shù)[1]，使開發(fā)出的頁面可以實現(xiàn)跨平臺和自適應(yīng)的效果，能夠根據(jù)不同的終端設(shè)備自動調(diào)整布局，使Web頁面能夠在PC端和移動端的各類設(shè)備上呈現(xiàn)出一致的效果[2]。

1 響應(yīng)式布局

為了解決移動互聯(lián)網(wǎng)沖浪問題，在2010年5月，響應(yīng)式網(wǎng)站設(shè)計的始祖，國外非常有名的網(wǎng)頁設(shè)計師Ethan Marcotte提出了一個全新的概念，其核心想法就是讓一個網(wǎng)站可以和多個終端集成，而不需要為每個終端創(chuàng)建特定版本[3]。

在Web前端技術(shù)中，響應(yīng)式布局是基于HTML5+CSS3實現(xiàn)的，具體包括以下技術(shù)點[3]：一是由HTML5實現(xiàn)的基本網(wǎng)頁結(jié)構(gòu)；二是由CSS3實現(xiàn)的基本網(wǎng)頁樣式；三是HTML5中的視口（Viewport）；四是CSS3中的媒體查詢（Media Queries）；五是流式布局（Fluid Layout）；六是彈性布局（Flex）；七是流式圖片（Fluid Images）；八是rem適配布局。

2 Web前端響應(yīng)式布局關(guān)鍵技術(shù)

2.1 視口（Viewport）

視口（Viewport）是指瀏覽器顯示頁面內(nèi)容的屏幕區(qū)域，可以分為布局視口、視覺視口和理想視口[4]。如圖1所示。布局視口（也叫視窗視口）指網(wǎng)頁的寬度，一般移動端瀏覽器都默認設(shè)置了布局視口的寬度。布局視口存在的問題有，當移動端瀏覽器展示PC端網(wǎng)頁內(nèi)容時，由于移動端設(shè)備屏幕比較小，網(wǎng)頁在手機的瀏覽器中會出現(xiàn)左右滾動條，用戶需要左右滑動才能查看完整的一行內(nèi)容。視覺視口（也叫可見視口）指用戶正在看到的網(wǎng)站的區(qū)域，這個區(qū)域的寬度等同于移動設(shè)備的瀏覽器窗口的寬度。當在手機中縮放網(wǎng)頁的時候，操作的是視覺視口，而布局視口仍然保持原來的寬度。理想視口對設(shè)備來講是最理想的視口尺寸。使用理想視口可以使網(wǎng)頁在移動端瀏覽器上獲得最理想的閱讀和瀏覽的尺寸寬度，可以通過設(shè)置標簽的name屬性和content屬性來實現(xiàn)。其中name屬性值為Viewport，content屬性則給出了與name屬性相關(guān)的值，如width=device-width，指設(shè)置Viewport的寬度為設(shè)備寬度，user-scalable設(shè)置是否允許用戶縮放，值為yes或no（1或0），initial-scale設(shè)置初始縮放比，maximumscale設(shè)置最大縮放比，minimum-scale設(shè)置最小縮放比，三個屬性值均為大于0的數(shù)字。

圖1 布局視口、視覺視口、理想視口

2.2 媒體查詢（Media Queries）

CSS3的媒體查詢Media Query（也稱為媒介查詢）[5]，是指通過比較瀏覽器窗口的尺寸、屏幕大小比例和設(shè)備的方向等不同來更改頁面顯示效果。具體語法如下。

其中mediatype稱為媒體類型，是將不同的終端設(shè)備劃分為不同的媒體類型，它的值有用于所有設(shè)備的all、用于打印和打印預覽功能的print，用于智能手機、平板電腦、電腦屏幕等的screen和用于發(fā)聲設(shè)備的如屏幕閱讀器等的speech。

media feature稱為媒體特性表達式，指每種媒體類型都具備各自不同的特性，根據(jù)不同媒體類型特性設(shè)置不同的展示風格。具體值見表1。

表1 媒體特性值

關(guān)鍵字（and|not|only）將媒體類型或多個特性連接到一起作為媒體查詢的條件。其值and可以將多個媒體特性連接到一起，相當“且”的意思；not是排除某個媒體類型，相當于“非”的意思，可以省略；only指定某個特定的媒體類型，可省略。

媒體查詢的引入方式分為內(nèi)部方式引入和外鏈式引入。內(nèi)部方式引入如下。

2.3 流式布局（Fluid Layout）

在制作響應(yīng)式網(wǎng)站時，僅使用媒體查詢是遠遠不夠的。這是由于媒體查詢只能針對某幾個特定階段的視口，在此視口下，頁面布局保持不變，直到捕捉到下一個角度，才會影響頁面的顯示，并且與越來越多的設(shè)備不兼容。因此，為了創(chuàng)建一個真正靈活的頁面，有必要使用百分比布局，結(jié)合媒體查詢來限制范圍。百分比布局是一種等比例縮放布局方式，在CSS代碼中使用百分比來設(shè)置寬度。百分比寬度的計算方式是，用目標元素寬度除以父盒子的寬度。

2.4 彈性布局（Flex）

彈性布局通過給父盒子添加Flex屬性，來控制子盒子的位置和排列方式[6]。

Flex是Flexible Box的縮寫，意為“彈性布局，彈性盒”。無論何種容器，被設(shè)置為Flex布局后，都將具有非常大的靈活性；通過給父盒子添加Flex屬性，子元素的浮動屬性（float）、清除浮動屬性（clear）和垂直對齊屬性（vertical-align）將消失；Flex容器（Flex Container）是指設(shè)置其display屬性值為Flex的元素，稱之為“容器”，在它里面的所有子元素立刻轉(zhuǎn)換為容器成員，即Flex item，被稱為“項目”；由容器、子元素和軸（橫軸、縱軸）構(gòu)成的布局被稱為Flex布局。如圖2所示。

圖2 彈性盒結(jié)構(gòu)

彈性布局提供了一些常用的屬性，利用這些屬性可以靈活地對元素進行排列。這些屬性主要分為兩種：一種是對容器進行設(shè)置，另一種是對子元素進行設(shè)置。對容器進行設(shè)置的屬性有display、f lex-f low、f lex-direction、f lex-wrap、justifycontent和align-items。其中f lex-f low屬性是f lexd i rect ion和f lex-w r ap的組合，簡寫形式為f lexf low:row now rap。對子元素進行設(shè)置的屬性有align-self、order、flex、flex-grow、flex-shrink和flex-basis。其中，align-self屬性控制了元素在其父元素的側(cè)軸方向上的排列對齊方式，取值意義與alignitems取值相似，有auto（默認值）、baseline（基線）、f lex-start（開頭）、center（中心）、f lex-end（結(jié)尾）、stretch（拉伸）。order屬性用于設(shè)置子元素的排列順序，默認值為0，且數(shù)值越小，排列越靠前。f lex屬性是flex-grow、flex-shrink、flex-basis的復合屬性。它可以對子元素的伸縮性進行設(shè)置，究其本質(zhì)，是設(shè)置元素對剩余空間的分配。其中，flexgrow指放大比率，默認為0；f lex-shrink指縮小比率，默認為1；flex-basis指寬度，像素值，默認為auto。flex-shrink和flex-basis為可選屬性。值得注意的是flex-grow屬性默認值為0，即使存在剩余空間，元素也不會放大。

2.5 流式圖片（Fluid Images）

在前端開發(fā)中，在制作Banner圖、輪播圖、商品展示圖等時，經(jīng)常會用到圖片元素。為了避免出現(xiàn)圖片顯示不全或留有空白，此時需要使用流式圖片，即采用百分比寬度的方式，如img{max-width:100%; height:auto}，使圖片能夠根據(jù)設(shè)備或屏幕大小實現(xiàn)自適應(yīng)。

2.6 rem適配布局

rem（root em）是一個相對單位，類似于em，不同的是rem的基準是相對于html元素的字體大小。比如，根元素（html）設(shè)置font size=12px；非根元素設(shè)置width:2rem；則換成px表示就是24 px?？梢酝ㄟ^修改html里面的文字大小來改變頁面中元素的大小以達到整體控制。

3 結(jié)束語

綜上所述，利用響應(yīng)式布局關(guān)鍵技術(shù)開發(fā)出來的Web前端頁面，不僅能夠適應(yīng)不同的設(shè)備，提高用戶的體驗度，還提高了Web前端開發(fā)人員的工作效率，降低了開發(fā)成本。在移動互聯(lián)網(wǎng)蓬勃發(fā)展的大環(huán)境下，我們相信Web前端響應(yīng)式布局技術(shù)的應(yīng)用將會越來越多，越來越廣?！?/p>