Bootstrap響應(yīng)式Web開發(fā)（第2版）第3章 移動(dòng)Web屏幕適配_第1頁
Bootstrap響應(yīng)式Web開發(fā)（第2版）第3章 移動(dòng)Web屏幕適配_第2頁
Bootstrap響應(yīng)式Web開發(fā)（第2版）第3章 移動(dòng)Web屏幕適配_第3頁
Bootstrap響應(yīng)式Web開發(fā)（第2版）第3章 移動(dòng)Web屏幕適配_第4頁
Bootstrap響應(yīng)式Web開發(fā)（第2版）第3章 移動(dòng)Web屏幕適配_第5頁
已閱讀5頁，還剩128頁未讀， 繼續(xù)免費(fèi)閱讀

下載本文檔

版權(quán)說明：本文檔由用戶提供并上傳，收益歸屬內(nèi)容提供方，若內(nèi)容存在侵權(quán)，請(qǐng)進(jìn)行舉報(bào)或認(rèn)領(lǐng)

文檔簡介

第3章移動(dòng)Web屏幕適配《Bootstrap響應(yīng)式Web開發(fā)（第2版）》學(xué)習(xí)目標(biāo)/Target掌握媒體查詢的使用方法，能夠根據(jù)視口寬度等條件調(diào)整頁面的布局和樣式掌握流式布局的使用方法，能夠使用流式布局實(shí)現(xiàn)寬度自適應(yīng)掌握彈性盒布局的使用方法，能夠使用彈性盒布局的相關(guān)屬性創(chuàng)建響應(yīng)式網(wǎng)頁布局

掌握rem單位的使用方法，能夠根據(jù)根元素的字號(hào)使用rem單位設(shè)置元素的大小學(xué)習(xí)目標(biāo)/Target掌握vw單位和vh單位的使用方法，能夠使用根據(jù)視口的變化使用vw單位和vh

單位自動(dòng)設(shè)置元素的大小掌握字體圖標(biāo)的使用方法，能夠在網(wǎng)頁中使用各種字體圖標(biāo)

掌握二倍圖的使用方法，能夠靈活使用二倍圖在高分辨率的設(shè)備中提供更清晰的

圖像掌握SVG的使用方法，能夠完成SVG圖像的定義和顯示章節(jié)概述/Summary在移動(dòng)Web開發(fā)中，屏幕適配的目的是為了在不同設(shè)備的屏幕中展現(xiàn)最佳布局，提供更好的用戶體驗(yàn)。開發(fā)者需要綜合考慮頁面在不同屏幕中的布局。其中常用的移動(dòng)Web屏幕適配技術(shù)包括媒體查詢、流式布局、彈性盒布局、rem單位、vw單位、vh單位、字體圖標(biāo)、二倍圖和SVG。本章將對(duì)移動(dòng)Web屏幕適配進(jìn)行詳細(xì)講解。目錄/Contents3.13.23.3媒體查詢流式布局和彈性盒布局rem單位、vw單位和vh單位目錄/Contents3.43.53.6字體圖標(biāo)二倍圖SVG媒體查詢3.13.1媒體查詢

先定一個(gè)小目標(biāo)！掌握媒體查詢的使用方法，能夠根據(jù)視口寬度等條件調(diào)整頁面的布局和樣式媒體查詢（MediaQueries）是CSS3中的一項(xiàng)技術(shù)，它可以根據(jù)不同的媒體類型或視口大小應(yīng)用不同的樣式。使用媒體查詢可以創(chuàng)建響應(yīng)式布局，根據(jù)視口寬度等條件調(diào)整頁面的樣式，使頁面在不同設(shè)備中顯示不同的效果。3.1媒體查詢3.1媒體查詢@media媒體類型邏輯操作符(媒體特性){

選擇器{CSS代碼

}}在CSS中，媒體查詢的代碼與其他CSS代碼的書寫位置相同，既可以寫在<style>標(biāo)簽中，也可以寫在單獨(dú)的CSS文件中，然后通過<link>標(biāo)簽引入CSS文件。定義媒體查詢的語法格式如下。3.1媒體查詢下面對(duì)上述語法格式中的每個(gè)組成部分進(jìn)行講解。@media：用于聲明媒體查詢。媒體類型：用于指定媒體查詢的媒體類型，常見的媒體類型包括screen（屏幕設(shè)備）、print（打印機(jī)）、speech（屏幕閱讀器）。若未指定媒體類型，則默認(rèn)值為all，表示所有設(shè)備。邏輯操作符：用于連接多個(gè)媒體特性以構(gòu)建復(fù)雜的媒體查詢，常見的邏輯操作符有and（將多個(gè)媒體特性聯(lián)合在一起）、only（指定特定的媒體特性）、not（排除某個(gè)媒體特性）。若未指定邏輯操作符，則默認(rèn)值為and。

3.1媒體查詢媒體特性：用于指定媒體查詢的條件，由“屬性:值”的形式組成。常用的媒體特性的屬性包括width（視口寬度）、min-width（視口最小寬度）、max-width（視口最大寬度）等。若未指定媒體特性，則媒體查詢會(huì)被應(yīng)用于所有設(shè)備和視口大小。選擇器：用于設(shè)置在指定設(shè)備中滿足媒體特性的選擇器，以確定哪些元素將受到媒體查詢的影響。CSS代碼：用于設(shè)置在指定設(shè)備中滿足媒體特性時(shí)，對(duì)應(yīng)選擇器所應(yīng)用的CSS代碼。3.1媒體查詢@media(max-width:768px){body{background-color:#ccc;}}媒體查詢的示例代碼如下。max-width:768px表示視口最大寬度為768px，即當(dāng)視口寬度小于等于768px時(shí)符合媒體查詢條件，此時(shí)將body元素的背景顏色設(shè)為#ccc3.1媒體查詢下面通過案例來講解如何使用媒體查詢實(shí)現(xiàn)對(duì)網(wǎng)頁左側(cè)列表區(qū)域隱藏的效果。假設(shè)網(wǎng)頁分為左右兩個(gè)區(qū)域，分別是左側(cè)列表區(qū)域和右側(cè)內(nèi)容區(qū)域，當(dāng)視口寬度小于等于768px時(shí)隱藏左側(cè)列表區(qū)域。步驟1創(chuàng)建D:\Bootstrap\chapter03目錄，并使用VSCode編輯器打開該目錄。步驟3步驟4步驟2演示如何使用媒體查詢3.1媒體查詢創(chuàng)建media.html文件，在該文件中創(chuàng)建基礎(chǔ)HTML5文檔結(jié)構(gòu)。步驟1步驟3步驟4步驟23.1媒體查詢演示如何使用媒體查詢步驟3步驟4步驟2步驟1編寫頁面結(jié)構(gòu)，具體代碼如下。<body><divclass="list"><h4>岳飛-主要作品</h4><ul><li>《滿江紅·寫懷》</li><li>《小重山·昨夜寒蛩不住鳴》</li><li>《滿江紅·登黃鶴樓有感》</li></ul></div>3.1媒體查詢演示如何使用媒體查詢步驟3步驟4步驟2步驟1>>接上頁代碼<divclass="content"><h4>滿江紅·寫懷</h4><h5>【宋】岳飛</h5><p>怒發(fā)沖冠，憑欄處、瀟瀟雨歇。抬望眼、仰天長嘯，壯懷激烈。三十功名塵與土，八千里路云和月。莫等閑、白了少年頭，空悲切。</p><p>靖康恥，猶未雪。臣子恨，何時(shí)滅。駕長車，踏破賀蘭山缺。壯志饑餐胡虜肉，笑談渴飲匈奴血。待從頭、收拾舊山河，朝天闕。</p></div></body>3.1媒體查詢演示如何使用媒體查詢編寫頁面樣式，具體代碼如下。<style>.list{float:left;width:250px;height:200px;border-right:1pxdashedblack;

}.content{text-align:center;}@media(max-width:768px){.list{display:none;}}</style>步驟3步驟4步驟2步驟13.1媒體查詢演示如何使用媒體查詢保存上述代碼，在瀏覽器中打開media.html文件，按“F12”鍵啟動(dòng)開發(fā)者工具，進(jìn)入移動(dòng)設(shè)備調(diào)試模式，將移動(dòng)設(shè)備的視口寬度設(shè)置為983px，media.html文件的頁面效果如下圖所示。3.1媒體查詢將移動(dòng)設(shè)備的視口寬度設(shè)置為730px，media.html文件的頁面效果如下圖所示。3.1媒體查詢3.1媒體查詢多學(xué)一招：<link>標(biāo)簽的media屬性<linkrel="stylesheet"ref="樣式文件"media="媒體類型邏輯操作符(媒體特性)">如果需要為一個(gè)外聯(lián)的CSS文件應(yīng)用媒體查詢，可以在使用<link>標(biāo)簽引入了CSS文件之后，為<link>標(biāo)簽設(shè)置media屬性，語法格式如下。3.1媒體查詢下面通過案例來演示<link>標(biāo)簽的media屬性的使用方法。步驟1演示如何使用<link>標(biāo)簽的media屬性創(chuàng)建一個(gè)名稱為style.css的CSS文件，示例代碼如下。步驟2.main{border:1pxsolidblack;}3.1媒體查詢?yōu)榫哂?main類的元素設(shè)置一個(gè)1px的黑色實(shí)線邊框使用<link>標(biāo)簽引入style.css文件，示例代碼如下。<linkhref="style.css"media="(min-width:768px)"rel="stylesheet">步驟1步驟23.1媒體查詢演示如何使用<link>標(biāo)簽的media屬性外聯(lián)式媒體查詢的CSS文件style.css僅在視口寬度大于等于768px時(shí)生效流式布局和彈性盒布局3.23.2.1流式布局

先定一個(gè)小目標(biāo)！掌握流式布局的使用方法，能夠使用流式布局實(shí)現(xiàn)寬度自適應(yīng)流式布局，也稱為百分比布局，是一種用于網(wǎng)頁設(shè)計(jì)的布局方式，它使用百分比為單位來實(shí)現(xiàn)頁面在不同設(shè)備中的自適應(yīng)性，以確保內(nèi)容能夠合理顯示。3.2.1流式布局百分比寬度=目標(biāo)元素寬度/父容器寬度實(shí)現(xiàn)流式布局的方法是將CSS中的固定像素寬度換算為百分比寬度。這樣，目標(biāo)元素寬度會(huì)按照相對(duì)于父容器寬度的比例來計(jì)算，從而實(shí)現(xiàn)寬度自適應(yīng)，使得元素能夠在不同屏幕尺寸的設(shè)備中自動(dòng)調(diào)整大小。百分比寬度的換算公式如下。3.2.1流式布局.item{width:100%;}將元素設(shè)置為流式布局的示例代碼如下。3.2.1流式布局將具有.item類的元素的寬度設(shè)置為100%，用于實(shí)現(xiàn)流式布局。這意味著該元素將占據(jù)其父容器的整個(gè)寬度3.2.1流式布局下面通過案例來講解如何使用流式布局實(shí)現(xiàn)一個(gè)底部標(biāo)簽欄。步驟1創(chuàng)建TabBar.html文件，在該文件中創(chuàng)建基礎(chǔ)HTML5文檔結(jié)構(gòu)。步驟3步驟4步驟2演示如何使用流式布局3.2.1流式布局復(fù)制本章配套源代碼中的images文件夾并放入chapter03目錄下，該文件夾保存了本章所有的圖像素材。步驟1步驟3步驟4步驟23.2.1流式布局演示如何使用流式布局步驟3步驟4步驟2步驟1編寫頁面結(jié)構(gòu)，具體代碼如下。<body><footerclass="nav"><ul><li><imgsrc="images/home.png"alt=""><span>首頁</span></li><li><imgsrc="images/compass.png"alt=""><span>發(fā)現(xiàn)</span></li>3.2.1流式布局演示如何使用流式布局步驟3步驟4步驟2步驟1>>接上頁代碼3.2.1流式布局<li><imgsrc="images/message.png"alt=""><span>消息</span></li><li><imgsrc="images/setting.png"alt=""><span>設(shè)置</span></li></ul></footer></body>演示如何使用流式布局編寫頁面樣式，具體代碼如下。<style>.nav{width:100%;height:60px;padding:10px0;border-top:1pxsolid#ccc;position:fixed;left:0;bottom:0;

}.navul{margin:0;padding:0;}

.navli{float:left;width:25%;height:60px;list-style:none;text-align:center;position:relative;}步驟3步驟4步驟2步驟13.2.1流式布局演示如何使用流式布局>>接上頁代碼.navliimg{position:absolute;top:50%;left:50%;transform:translate(-50%,-80%);}.navlispan{position:absolute;top:50%;left:50%;transform:translate(-50%,35%);}</style>步驟3步驟4步驟2步驟13.2.1流式布局演示如何使用流式布局保存上述代碼，在瀏覽器中打開TabBar.html文件，按“F12”鍵啟動(dòng)開發(fā)者工具，進(jìn)入移動(dòng)設(shè)備調(diào)試模式，然后將移動(dòng)設(shè)備的視口寬度設(shè)置為576px，TabBar.html文件的頁面效果如下圖所示。3.2.1流式布局3.2.2彈性盒布局

先定一個(gè)小目標(biāo)！掌握彈性盒布局的使用方法，能夠使用彈性盒布局的相關(guān)屬性創(chuàng)建響應(yīng)式布局彈性盒（FlexibleBox）布局又稱為Flex布局，是一種增加了盒子模型靈活性的布局方式。使用彈性盒布局，可以輕松實(shí)現(xiàn)響應(yīng)式網(wǎng)頁布局，使元素的排列和對(duì)齊更加靈活。3.2.2彈性盒布局彈性盒布局主要由Flex容器和Flex元素組成。Flex容器是指應(yīng)用彈性盒布局的容器，該容器中的所有子元素稱為Flex元素。Flex容器內(nèi)有兩根軸：主軸（MainAxis）和交叉軸（CrossAxis）。默認(rèn)情況下主軸為水平方向，交叉軸為垂直方向。Flex元素默認(rèn)沿主軸排列，根據(jù)實(shí)際需要可以更改Flex元素的排列方式。3.2.2彈性盒布局彈性盒布局的使用步驟：首先要設(shè)置父元素的display屬性為flex，表示將父元素設(shè)置為Flex容器。然后使用Flex容器和Flex元素的屬性控制元素的排列和對(duì)齊。3.2.2彈性盒布局<style>.container{display:flex;/*在此使用Flex容器相關(guān)的屬性*/

}.box{/*在此使用Flex元素相關(guān)的屬性*/}</style><body><divclass="container"><divclass="box"></div></div></body>使用彈性盒布局的示例代碼如下。3.2.2彈性盒布局3.2.2彈性盒布局1.Flex容器的常用屬性Flex容器的常用屬性如下。（1）flex-direction屬性flex-direction屬性用于設(shè)置主軸的方向，即Flex元素的排列方向，可選值如下。row：默認(rèn)值，主軸為從左到右的水平方向。row-reverse：主軸為從右到左的水平方向。column：主軸為從上到下的垂直方向。column-reverse：主軸為從下到上的垂直方向。3.2.2彈性盒布局（2）flex-wrap屬性flex-wrap屬性用于設(shè)置是否允許Flex元素?fù)Q行，可選值如下。nowrap：默認(rèn)值，表示不換行，F(xiàn)lex容器為單行，該情況下Flex元素可能會(huì)溢出Flex容器。wrap：換行，F(xiàn)lex容器為多行，F(xiàn)lex元素溢出的部分會(huì)被放置到新一行，第一行顯示在上方。wrap-reverse：反向換行，第一行顯示在下方。3.2.2彈性盒布局（3）justify-content屬性justify-content屬性用于設(shè)置Flex元素在主軸上的對(duì)齊方式，可選值如下。flex-start：默認(rèn)值，F(xiàn)lex元素與主軸起點(diǎn)對(duì)齊。flex-end：Flex元素與主軸終點(diǎn)對(duì)齊。center：Flex元素在主軸上居中排列。space-between：Flex元素兩端分別對(duì)齊主軸的起點(diǎn)與終點(diǎn)，兩端的Flex元素分別靠向Flex容器的兩端，F(xiàn)lex元素的間隔相等。space-around：每個(gè)Flex元素兩側(cè)的距離相等，第一個(gè)Flex元素離主軸起點(diǎn)的距離和最后一個(gè)Flex元素離主軸終點(diǎn)的距離為中間Flex元素間距的一半。3.2.2彈性盒布局（4）align-items屬性align-items屬性用于設(shè)置Flex元素在交叉軸上的對(duì)齊方式，常用的可選值如下。normal：默認(rèn)值，表示如果Flex元素未設(shè)置高度則Flex元素將占滿整個(gè)Flex容器的高度；如果Flex元素設(shè)置高度則normal與stretch相同。stretch：Flex元素將被拉伸以填充交叉軸方向上的剩余空間。flex-start：Flex元素頂部與交叉軸起點(diǎn)對(duì)齊。flex-end：Flex元素底部與交叉軸終點(diǎn)對(duì)齊。center：Flex元素在交叉軸上居中對(duì)齊。3.2.2彈性盒布局2.Flex元素的常用屬性Flex元素的常用屬性如下。（1）order屬性order屬性用于設(shè)置Flex元素的排列順序。order屬性越小，排列越靠前，默認(rèn)值為0。（2）flex-grow屬性flex-grow

屬性用于設(shè)置Flex元素的放大比例，默認(rèn)值為0，表示即使存在剩余空間，也不放大Flex元素。3.2.2彈性盒布局（3）flex-shrink屬性flex-shrink屬性用于設(shè)置Flex元素的縮小比例，默認(rèn)值為1，表示如果空間不足，就將Flex元素縮小。如果flex-shrink屬性值為0，表示Flex元素不縮小。（4）flex-basis屬性flex-basis

屬性用于設(shè)置在分配多余空間之前，F(xiàn)lex元素占據(jù)的主軸空間，默認(rèn)值為auto，表示Flex元素本來的大小。（5）flex屬性flex屬性是flex-grow屬性、flex-shrink屬性和flex-basis的組合屬性，默認(rèn)值為01auto。3.2.2彈性盒布局下面通過案例來講解如何使用彈性盒布局實(shí)現(xiàn)一個(gè)頂部導(dǎo)航欄。步驟1演示如何使用彈性盒布局創(chuàng)建NavBar.html文件，在該文件中創(chuàng)建基礎(chǔ)HTML5文檔結(jié)構(gòu)。步驟3步驟23.2.2彈性盒布局編寫頁面結(jié)構(gòu)，具體代碼如下。<body><navclass="navbar"><divclass="navbar-brand">溫馨小窩</div><ulclass="navbar-nav"><li><ahref="#">首頁</a></li><li><ahref="#">新聞資訊</a></li><li><ahref="#">政策文件</a></li><li><ahref="#">通知公告</a></li><li><ahref="#">關(guān)于我們</a></li></ul></nav></body>步驟1步驟3步驟23.2.2彈性盒布局演示如何使用彈性盒布局步驟1步驟3步驟2編寫頁面樣式，具體代碼如下。<style>.navbar{display:flex;justify-content:space-between;align-items:center;padding:5px20px;border-bottom:1pxsolidblack;}.navbar-brand{font-size:24px;font-weight:bold;

}3.2.2彈性盒布局演示如何使用彈性盒布局步驟1步驟3步驟2>>接上頁代碼.navbar-nav{display:flex;list-style-type:none;}.navbar-navli{margin-left:20px;}.navbar-navlia{text-decoration:none;color:#333;}</style>3.2.2彈性盒布局演示如何使用彈性盒布局保存上述代碼，在瀏覽器中打開NavBar.html文件，按“F12”鍵啟動(dòng)開發(fā)者工具，進(jìn)入移動(dòng)設(shè)備調(diào)試模式，將移動(dòng)設(shè)備的視口寬度設(shè)置為768px，NavBar.html的頁面效果如下圖所示。3.2.2彈性盒布局rem單位、vw單位和vh單位3.33.3.1rem單位

先定一個(gè)小目標(biāo)！掌握rem單位的使用方法，能夠根據(jù)根元素的字號(hào)使用rem單位設(shè)置元素的大小3.3.1rem單位rem單位是CSS3中引入的一種相對(duì)單位。當(dāng)使用rem單位時(shí)，rem單位的大小取決于根元素的字號(hào)（font-size），換算方式為1rem等于1倍根元素的字號(hào)。使用rem單位的優(yōu)勢在于，只需調(diào)整根元素的字號(hào)，就能同時(shí)改變整個(gè)頁面中所有使用rem單位的元素的大小。步驟1rem單位的基本使用步驟設(shè)置根元素的字號(hào)，示例代碼如下。步驟2:root{font-size:14px;}3.3.1rem單位設(shè)置根元素的字號(hào)為14px使用rem單位設(shè)置div元素的寬高，示例代碼如下。div{width:10rem;/*結(jié)果為140px*/height:10rem;/*結(jié)果為140px*/}步驟1步驟23.3.1rem單位rem單位的基本使用步驟設(shè)置div元素的寬度和高度分別為10rem。由于10rem等于10倍根元素的字號(hào)，所以div元素最終的寬度和高度都為140px3.3.1rem單位下面通過案例來演示利用媒體查詢，根據(jù)不同視口寬度動(dòng)態(tài)改變根元素的字號(hào)，使其等于視口寬度的1/10，然后使用rem單位設(shè)置頁面中的元素的寬度和高度，從而實(shí)現(xiàn)等比例縮放效果。步驟1創(chuàng)建changeFontSize.html文件，在該文件中創(chuàng)建基礎(chǔ)HTML5文檔結(jié)構(gòu)。步驟3步驟4步驟2演示如何使用rem單位3.3.1rem單位編寫頁面結(jié)構(gòu)，具體代碼如下。步驟1步驟3步驟4步驟23.3.1rem單位演示如何使用rem單位<body><divclass="box"></div></body>步驟3步驟4步驟2步驟1編寫頁面樣式，使用媒體查詢檢測不同的視口，并更改根元素的字號(hào)，具體代碼如下。<style>@media(min-width:375px){:root{font-size:37.5px;}}@media(min-width:414px){:root{font-size:41.4px;}}</style>3.3.1rem單位演示如何使用rem單位在<style>標(biāo)簽中使用rem單位，具體代碼如下。<style>……（原有代碼）

.box{width:5rem;height:3rem;background-color:#ccc;}</style>步驟3步驟4步驟2步驟13.3.1rem單位演示如何使用rem單位3.3.1rem單位保存上述代碼，在瀏覽器中打開changeFontSize.html文件，按“F12”鍵啟動(dòng)開發(fā)者工具，進(jìn)入移動(dòng)設(shè)備調(diào)試模式，將移動(dòng)設(shè)備的視口寬度設(shè)置為375px，changeFontSize.html的頁面效果如下圖所示。3.3.1rem單位將移動(dòng)設(shè)備的視口寬度設(shè)置為414px時(shí)，changeFontSize.html的頁面效果如下圖所示。3.3.2vw單位和vh單位

先定一個(gè)小目標(biāo)！掌握vw單位和vh單位的使用方法，能夠根據(jù)視口的變化使用vw、vh單位自動(dòng)設(shè)置元素的大小3.3.2vw單位和vh單位vw單位和vh單位是以視口的寬度和高度作為參考的相對(duì)單位。當(dāng)使用vw單位和vh單位時(shí)，瀏覽器會(huì)將視口的寬度和高度各分成100份，1vw占據(jù)視口寬度的百分之一，1vh占據(jù)視口高度的百分之一。通過使用vw單位和vh單位，可以使元素的大小和位置能夠根據(jù)視口的變化而自動(dòng)調(diào)整，以適應(yīng)不同屏幕尺寸的設(shè)備。在設(shè)置元素的寬度和高度時(shí)，不建議同時(shí)使用vw單位和vh單位。如果同時(shí)使用vw單位和vh單位來定義元素的寬度和高度，可能會(huì)導(dǎo)致元素在不同屏幕寬高比下顯示不正確的比例或出現(xiàn)變形。3.3.2vw單位和vh單位3.3.2vw單位和vh單位下面通過案例來講解如何使用vw單位設(shè)置元素的寬度和高度。步驟1演示如何使用vw單位創(chuàng)建viewportunits.html文件，在該文件中創(chuàng)建基礎(chǔ)HTML5文檔結(jié)構(gòu)。步驟3步驟23.3.2vw單位和vh單位編寫頁面結(jié)構(gòu)，具體代碼如下。<body><divclass="box"></div></body>步驟1步驟3步驟23.3.2vw單位和vh單位演示如何使用vw單位步驟1步驟3步驟2添加<style>標(biāo)簽，使用vw單位定義div元素的寬度和高度，具體代碼如下。<style>.box{width:50vw;height:15vw;background-color:pink;}</style>3.3.2vw單位和vh單位演示如何使用vw單位保存上述代碼，在瀏覽器中打開viewportunits.html文件，按“F12”鍵啟動(dòng)開發(fā)者工具，進(jìn)入移動(dòng)設(shè)備調(diào)試模式，將移動(dòng)設(shè)備的視口寬度設(shè)置為375px，viewportunits.html的頁面效果如下圖所示。3.3.2vw單位和vh單位字體圖標(biāo)3.43.4.1什么是字體圖標(biāo)

先定一個(gè)小目標(biāo)！熟悉什么是字體圖標(biāo)，能夠歸納使用字體圖標(biāo)的優(yōu)點(diǎn)什么是字體圖標(biāo)？3.4.1什么是字體圖標(biāo)字體圖標(biāo)是使用字體來呈現(xiàn)的圖標(biāo)，其本質(zhì)上是一種字體。字體圖標(biāo)的每個(gè)圖標(biāo)都有對(duì)應(yīng)的字符，當(dāng)把網(wǎng)頁中的某個(gè)元素的字體設(shè)置為字體圖標(biāo)后，該元素中的字符就會(huì)顯示成對(duì)應(yīng)的圖標(biāo)。3.4.1什么是字體圖標(biāo)3.4.1什么是字體圖標(biāo)使用字體圖標(biāo)的優(yōu)點(diǎn)如下。（1）簡單易用：使用字體圖標(biāo)時(shí)，只需提前下載好字體圖標(biāo)，并在網(wǎng)頁中添加相應(yīng)的標(biāo)簽和類即可將圖標(biāo)插入網(wǎng)頁，無須使用圖像文件。（2）靈活性高：使用字體圖標(biāo)時(shí)，可以通過修改CSS字體屬性來靈活地修改樣式，例如調(diào)整圖標(biāo)的大小、顏色以及其他字體屬性。因?yàn)樽煮w圖標(biāo)都是矢量圖，所以可以隨意對(duì)圖標(biāo)進(jìn)行縮放且圖標(biāo)不會(huì)失真，開發(fā)者能夠自由地定制字體圖標(biāo)的外觀。（3）輕量級(jí)：使用字體圖標(biāo)時(shí)，只需要加載一種字體圖標(biāo)，而不是多個(gè)圖像文件，從而減少頁面請(qǐng)求的數(shù)量，提高頁面加載速度。（4）兼容性：幾乎所有主流的瀏覽器都支持字體圖標(biāo)，例如Chrome、Firefox、Safari等。3.4.2下載字體圖標(biāo)

先定一個(gè)小目標(biāo)！掌握字體圖標(biāo)的下載方法，能夠通過iconfont圖標(biāo)庫下載字體圖標(biāo)由于開發(fā)字體圖標(biāo)比較復(fù)雜，為了降低開發(fā)成本，在項(xiàng)目中通常使用網(wǎng)絡(luò)上的各種圖標(biāo)庫提供的字體圖標(biāo)。本書以iconfont圖標(biāo)庫為例進(jìn)行講解，該圖標(biāo)庫提供了豐富的常用圖標(biāo)集合，通過下載指定的字體圖標(biāo)即可使用。3.4.2下載字體圖標(biāo)步驟1在瀏覽器中訪問iconfont圖標(biāo)庫的官方網(wǎng)站，若讀者第1次訪問該網(wǎng)站，則首先需要注冊(cè)；若讀者已經(jīng)注冊(cè)過該網(wǎng)站，則可直接登錄。步驟3步驟4步驟2演示如何下載字體圖標(biāo)3.4.2下載字體圖標(biāo)將鼠標(biāo)指針移到頂部導(dǎo)航欄的“素材庫”，單擊“官方圖標(biāo)庫”進(jìn)入官方圖標(biāo)庫列表頁面，如下圖所示。步驟1步驟3步驟4步驟23.4.2下載字體圖標(biāo)演示如何下載字體圖標(biāo)步驟3步驟4步驟2步驟1單擊官方圖標(biāo)庫列表中的第1個(gè)圖標(biāo)庫，打開一個(gè)新頁面，當(dāng)鼠標(biāo)指針移到第1行第3列的字體圖標(biāo)時(shí)，圖標(biāo)庫頁面如下圖所示。3.4.2下載字體圖標(biāo)演示如何下載字體圖標(biāo)單擊圖標(biāo)庫頁面的“”按鈕，將字體圖標(biāo)添加到購物車，添加到購物車頁面如下圖所示。步驟3步驟4步驟2步驟13.4.2下載字體圖標(biāo)演示如何下載字體圖標(biāo)步驟5單擊“”按鈕，購物車頁面如下圖所示。步驟7步驟8步驟63.4.2下載字體圖標(biāo)演示如何下載字體圖標(biāo)步驟5購物車頁面包含兩個(gè)區(qū)域，分別為展示字體圖標(biāo)區(qū)域和操作字體圖標(biāo)區(qū)域。展示字體圖標(biāo)區(qū)域用于字體圖標(biāo)的展示和刪除。當(dāng)鼠標(biāo)指針移到展示字體圖標(biāo)區(qū)域中的某個(gè)字體圖標(biāo)時(shí)，該字體圖標(biāo)會(huì)被一個(gè)遮罩覆蓋，并出現(xiàn)“”按鈕，如下圖所示。步驟7步驟8步驟63.4.2下載字體圖標(biāo)演示如何下載字體圖標(biāo)步驟5操作字體圖標(biāo)區(qū)域包含“添加至項(xiàng)目”“下載素材”“下載代碼”3個(gè)按鈕，分別用于將字體圖標(biāo)添加至項(xiàng)目、下載相關(guān)素材和獲取相應(yīng)的代碼。這里推薦單擊“添加至項(xiàng)目”按鈕進(jìn)行下載，因?yàn)檫@樣可以獲取較全的字體圖標(biāo)資源。步驟7步驟8步驟63.4.2下載字體圖標(biāo)演示如何下載字體圖標(biāo)單擊“添加至項(xiàng)目”按鈕，“加入項(xiàng)目”區(qū)域如下圖所示。步驟5步驟7步驟8步驟63.4.2下載字體圖標(biāo)演示如何下載字體圖標(biāo)步驟7步驟8步驟6步驟5單擊“”按鈕，創(chuàng)建一個(gè)新項(xiàng)目并命名為“IconFont”。單擊“確定”按鈕后，頁面跳轉(zhuǎn)到IconFont項(xiàng)目中，IconFont項(xiàng)目頁面如下圖所示。3.4.2下載字體圖標(biāo)演示如何下載字體圖標(biāo)單擊“下載至本地”按鈕，將字體圖標(biāo)下載至本地。下載完成后，會(huì)得到一個(gè)文件名為download.zip的壓縮包文件，如下圖所示。步驟7步驟8步驟6步驟53.4.2下載字體圖標(biāo)演示如何下載字體圖標(biāo)download.zip壓縮包文件中包含所有字體圖標(biāo)的素材。將壓縮包文件進(jìn)行解壓縮，解壓縮后的文件目錄如下圖所示。步驟7步驟8步驟6步驟53.4.2下載字體圖標(biāo)演示如何下載字體圖標(biāo)下面對(duì)解壓縮后的文件目錄中的文件進(jìn)行簡單介紹。demo.css：CSS樣式表文件，用于定義demo_index.html文件中元素的樣式。demo_index.html：示例文件，用于演示如何使用字體圖標(biāo)。iconfont.css：字體圖標(biāo)的樣式表文件，包含用于展示字體圖標(biāo)的樣式代碼。iconfont.js：字體圖標(biāo)的JavaScript文件，包含一些處理字體圖標(biāo)的邏輯的代碼。iconfont.json：字體圖標(biāo)的JSON文件，包含字體圖標(biāo)的相關(guān)配置信息。iconfont.ttf、iconfont.woff、iconfont.woff2：均為字體文件，用于存儲(chǔ)字體圖標(biāo)的數(shù)據(jù)，它們分別對(duì)應(yīng)不同的字體格式。步驟7步驟8步驟6步驟53.4.2下載字體圖標(biāo)演示如何下載字體圖標(biāo)3.4.3使用字體圖標(biāo)

先定一個(gè)小目標(biāo)！掌握字體圖標(biāo)的使用方法，能夠在網(wǎng)頁中使用字體圖標(biāo)3.4.3使用字體圖標(biāo)在下載完字體圖標(biāo)后，若要在網(wǎng)頁中使用字體圖標(biāo)，需要在網(wǎng)頁的<head>標(biāo)簽中，使用<link>標(biāo)簽引入字體圖標(biāo)的樣式文件iconfont.css。3.4.3使用字體圖標(biāo)引入iconfont.css后，在頁面中定義一個(gè)用于顯示圖標(biāo)的容器，通常使用<span>、<i>、<div>等標(biāo)簽作為圖標(biāo)的容器。圖標(biāo)容器需要設(shè)置兩個(gè)類：第一個(gè)類是.iconfont類，它被預(yù)先定義在iconfont.css文件中，用于應(yīng)用圖標(biāo)的基礎(chǔ)樣式。第二個(gè)類是.icon-*圖標(biāo)類，表示使用某個(gè)具體圖標(biāo)。3.4.3使用字體圖標(biāo)為了查詢當(dāng)前圖標(biāo)庫中有哪些圖標(biāo)，可以在瀏覽器中打開demo_index.html文件，選擇Fontclass選項(xiàng)卡，查看已經(jīng)下載完成的字體圖標(biāo)的類名，如下圖所示。3.4.3使用字體圖標(biāo)使用字體圖標(biāo)利用<span>標(biāo)簽顯示“消息-置灰”字體圖標(biāo)的示例代碼如下。<spanclass="iconfonticon-xiaoxi-zhihui"></span>.iconfont類用于應(yīng)用圖標(biāo)的基礎(chǔ)樣式.icon-xiaoxi-zhihui類則用于使用“消息-置灰”字體圖標(biāo)3.4.3使用字體圖標(biāo)下面通過案例來講解如何使用字體圖標(biāo)。步驟1下載所需的字體圖標(biāo)。例如，下載圖標(biāo)庫頁面中的第1行的9個(gè)字體圖標(biāo)，下載后解壓縮，并將解壓縮后的文件夾重命名為iconfont，保存在D:\Bootstrap\chapter03目錄。步驟3步驟4步驟2步驟5演示如何使用字體圖標(biāo)3.4.3使用字體圖標(biāo)步驟1步驟3步驟4步驟2步驟5創(chuàng)建iconfont.html文件，在該文件中創(chuàng)建基礎(chǔ)HTML5文檔結(jié)構(gòu)。3.4.3使用字體圖標(biāo)演示如何使用字體圖標(biāo)步驟3步驟4步驟2步驟5步驟1在<head>標(biāo)簽中，引入字體圖標(biāo)的樣式文件iconfont.css，具體如下。3.4.3使用字體圖標(biāo)演示如何使用字體圖標(biāo)<linkrel="stylesheet"href="iconfont/iconfont.css">步驟3步驟4步驟2步驟5步驟1編寫頁面結(jié)構(gòu)，具體代碼如下。<body><spanclass="iconfonticon-jubao"></span><spanclass="iconfonticon-anquanbaozhang"></span><spanclass="iconfonticon-xiaoxi-zhihui"></span><spanclass="iconfonticon-xihuan"></span><spanclass="iconfonticon-gengduo"></span><spanclass="iconfonticon-shouye-zhihui"></span><spanclass="iconfonticon-gerenzhongxin-zhihui"></span><spanclass="iconfonticon-kandian-zhihui"></span><spanclass="iconfonticon-fanhui"></span></body>3.4.3使用字體圖標(biāo)演示如何使用字體圖標(biāo)步驟3步驟4步驟2步驟5步驟1編寫頁面樣式，具體代碼如下。<style>.icon-anquanbaozhang{font-size:24px;}</style>3.4.3使用字體圖標(biāo)演示如何使用字體圖標(biāo)3.4.3使用字體圖標(biāo)保存上述代碼，在瀏覽器中打開iconfont.html文件，使用字體圖標(biāo)的頁面效果如下圖所示。二倍圖3.53.5二倍圖

先定一個(gè)小目標(biāo)！掌握二倍圖的使用方法，能夠靈活使用二倍圖在高分辨率的設(shè)備中實(shí)現(xiàn)更清晰的圖像什么是二倍圖？3.5二倍圖二倍圖是一種圖像寬度、高度皆為網(wǎng)頁中設(shè)置的寬度、高度二倍的圖像，它在設(shè)備像素比為2的設(shè)備中不會(huì)被放大。例如，網(wǎng)頁中設(shè)置的圖像分辨率為50px×50px，則二倍圖的分辨率為100px×100px。因?yàn)樵O(shè)備像素比為2的設(shè)備會(huì)將50px×50px的圖像放大為100px×100px的圖像顯示，所以二倍圖會(huì)以原本的分辨率顯示。3.5二倍圖1.實(shí)現(xiàn)<img>標(biāo)簽圖像的二倍圖實(shí)現(xiàn)方式：對(duì)于<img>標(biāo)簽，可以通過設(shè)置width和height屬性來實(shí)現(xiàn)二倍圖。具體做法：將width和height屬性設(shè)置為實(shí)際圖像分辨率的一半。例如，如果原始圖像的分辨率是200px×200px，則應(yīng)將width和height屬性都設(shè)置為100px。3.5二倍圖在網(wǎng)頁中實(shí)現(xiàn)<img>標(biāo)簽圖像的二倍圖和背景圖像的二倍圖時(shí)，設(shè)置方法不同。2.實(shí)現(xiàn)背景圖像的二倍圖對(duì)于使用背景圖像的元素，可以通過設(shè)置background-size屬性來實(shí)現(xiàn)背景圖像的二倍圖。具體做法：將background-size屬性設(shè)置為實(shí)際圖像分辨率的一半。例如，如果原始圖像的分辨率是200px×200px，則應(yīng)將background-size設(shè)置為“100px100px”。3.5二倍圖3.5二倍圖下面通過案例來演示如何使用二倍圖。步驟1復(fù)制本章配套源代碼中的images文件夾并放入chapter03目錄下，該文件夾保存了本章所有的圖像素材。Images文件夾中的bootstrap-logo@2x.png為二倍圖，寬度、高度分別為100px、82px。bootstrap-logo.png為原始圖像，寬度、高度分別為50px、41px。步驟3步驟4步驟2演示如何使用二倍圖3.5二倍圖創(chuàng)建picture.html文件，在該文件中創(chuàng)建基礎(chǔ)HTML5文檔結(jié)構(gòu)。步驟1步驟3步驟4步驟23.5二倍圖演示如何使用二倍圖步驟3步驟4步驟2步驟1編寫頁面結(jié)構(gòu)，具體代碼如下。<body><!--原圖--><imgsrc="images/bootstrap-logo.png"alt=""><!--二倍圖--><imgsrc="images/bootstrap-logo@2x.png"alt=""><!--背景圖像二倍圖--><div></div></body>3.5二倍圖演示如何使用二倍圖編寫頁面樣式，具體代碼如下。<style>img:nth-child(2){width:50px;height:41px;}div{width:50px;height:41px;border:1pxsolidred;background:url('images/bootstrap-logo@2x.png')no-repeat;background-size:50px41px;}</style>步驟3步驟4步驟2步驟13.5二倍圖演示如何使用二倍圖保存上述代碼，在瀏覽器中打開picture.ht

溫馨提示

  • 1. 本站所有資源如無特殊說明，都需要本地電腦安裝OFFICE2007和PDF閱讀器。圖紙軟件為CAD,CAXA,PROE,UG,SolidWorks等.壓縮文件請(qǐng)下載最新的WinRAR軟件解壓。
  • 2. 本站的文檔不包含任何第三方提供的附件圖紙等，如果需要附件，請(qǐng)聯(lián)系上傳者。文件的所有權(quán)益歸上傳用戶所有。
  • 3. 本站RAR壓縮包中若帶圖紙，網(wǎng)頁內(nèi)容里面會(huì)有圖紙預(yù)覽，若沒有圖紙預(yù)覽就沒有圖紙。
  • 4. 未經(jīng)權(quán)益所有人同意不得將文件中的內(nèi)容挪作商業(yè)或盈利用途。
  • 5. 人人文庫網(wǎng)僅提供信息存儲(chǔ)空間，僅對(duì)用戶上傳內(nèi)容的表現(xiàn)方式做保護(hù)處理，對(duì)用戶上傳分享的文檔內(nèi)容本身不做任何修改或編輯，并不能對(duì)任何下載內(nèi)容負(fù)責(zé)。
  • 6. 下載文件中如有侵權(quán)或不適當(dāng)內(nèi)容，請(qǐng)與我們聯(lián)系，我們立即糾正。
  • 7. 本站不保證下載資源的準(zhǔn)確性、安全性和完整性, 同時(shí)也不承擔(dān)用戶因使用這些下載資源對(duì)自己和他人造成任何形式的傷害或損失。

評(píng)論

0/150

提交評(píng)論