響應(yīng)式Web開(kāi)發(fā)項(xiàng)目教程（HTML5 CSS3 Bootstrap）（第3版） 課件 第7章 移動(dòng)Web屏幕適配

第7章移動(dòng)Web屏幕適配《響應(yīng)式Web開(kāi)發(fā)項(xiàng)目教程（HTML5+CSS3+Bootstrap）（第3版）》學(xué)習(xí)目標(biāo)/Target了解屏幕分辨率和設(shè)備像素比，能夠說(shuō)出屏幕分辨率的概念和設(shè)備像素比的計(jì)算

方式了解視口，能夠說(shuō)出視口的設(shè)置方法掌握媒體查詢的使用方法，能夠根據(jù)實(shí)際情況靈活定義媒體查詢

掌握二倍圖的使用方法，能夠靈活使用二倍圖在高分辨率設(shè)備中顯示清晰的圖像學(xué)習(xí)目標(biāo)/Target掌握rem單位的使用方法，能夠使用rem單位根據(jù)根元素的字號(hào)設(shè)置元素的大小熟悉rem適配方案，能夠歸納使用媒體查詢結(jié)合rem單位與使用flexible.js結(jié)合

rem單位實(shí)現(xiàn)屏幕適配的區(qū)別掌握Less的使用方法，能夠定義變量、使用嵌套語(yǔ)法簡(jiǎn)化代碼、進(jìn)行基本運(yùn)算、

注釋代碼、導(dǎo)入和導(dǎo)出Less文件

掌握流式布局的使用方法，能夠使用流式布局實(shí)現(xiàn)寬度自適應(yīng)學(xué)習(xí)目標(biāo)/Target掌握vw單位和vh單位的使用方法，能夠使用vw單位與vh單位根據(jù)視口的變化

自動(dòng)設(shè)置元素的大小掌握線上問(wèn)診頁(yè)面的制作方法，能夠完成線上問(wèn)診頁(yè)面的開(kāi)發(fā)掌握音樂(lè)屋首頁(yè)頁(yè)面的制作方法，能夠完成音樂(lè)屋首頁(yè)頁(yè)面的開(kāi)發(fā)章節(jié)概述/Summary隨著移動(dòng)設(shè)備和互聯(lián)網(wǎng)技術(shù)的快速發(fā)展，移動(dòng)Web開(kāi)發(fā)技術(shù)應(yīng)運(yùn)而生，并成為當(dāng)下非常流行的技術(shù)之一。為了提供良好的用戶體驗(yàn)，開(kāi)發(fā)人員在構(gòu)建適用于不同移動(dòng)設(shè)備的Web應(yīng)用程序時(shí)，需要靈活運(yùn)用適配技術(shù)和最佳實(shí)踐。在移動(dòng)Web開(kāi)發(fā)中，屏幕適配起著關(guān)鍵作用。開(kāi)發(fā)人員需要了解屏幕分辨率、設(shè)備像素比和視口等概念，并利用媒體查詢技術(shù)進(jìn)行樣式適配。此外，開(kāi)發(fā)人員還需要掌握處理高清圖像素材和實(shí)現(xiàn)響應(yīng)式布局等的技巧。本章將詳細(xì)講解移動(dòng)Web屏幕適配的相關(guān)知識(shí)。目錄/Contents7-17-2線上問(wèn)診頁(yè)面音樂(lè)屋首頁(yè)頁(yè)面線上問(wèn)診頁(yè)面項(xiàng)目7-1項(xiàng)目需求隨著生活節(jié)奏的加快，人們面臨越來(lái)越多的生活和工作方面的壓力，健康問(wèn)題逐漸引起人們的關(guān)注。然而，傳統(tǒng)的問(wèn)診模式需要耗費(fèi)大量時(shí)間和精力：需要排隊(duì)等候、填寫(xiě)煩瑣的問(wèn)診表格，還需要費(fèi)心找到合適的專(zhuān)家?；谶@個(gè)背景，某公司正在開(kāi)發(fā)一個(gè)線上醫(yī)療項(xiàng)目，目前正在進(jìn)行線上問(wèn)診頁(yè)面的開(kāi)發(fā)。在該頁(yè)面上，用戶能夠在線咨詢醫(yī)生，獲取醫(yī)療建議和診斷結(jié)果，體驗(yàn)更為便捷和高效的醫(yī)療服務(wù)。項(xiàng)目需求本項(xiàng)目需要基于上述需求實(shí)現(xiàn)線上問(wèn)診頁(yè)面的開(kāi)發(fā)，線上問(wèn)診頁(yè)面效果如下圖所示。知識(shí)儲(chǔ)備

先定一個(gè)小目標(biāo)！了解屏幕分辨率和設(shè)備像素比，能夠說(shuō)出屏幕分辨率的概念和設(shè)備像素比的計(jì)算方式1.屏幕分辨率和設(shè)備像素比知識(shí)儲(chǔ)備1.屏幕分辨率和設(shè)備像素比隨著移動(dòng)設(shè)備的普及以及多樣化，開(kāi)發(fā)人員面臨著一項(xiàng)重要的任務(wù)：為移動(dòng)應(yīng)用適配各種屏幕尺寸和分辨率，以確保移動(dòng)應(yīng)用在不同設(shè)備中都能夠提供良好的用戶體驗(yàn)。下面將對(duì)屏幕分辨率和設(shè)備像素比進(jìn)行詳細(xì)講解。知識(shí)儲(chǔ)備1.屏幕分辨率和設(shè)備像素比（1）屏幕分辨率屏幕分辨率是指一塊屏幕上可以顯示的像素?cái)?shù)量，通常以px為單位來(lái)衡量。例如，1920×1080的分辨率表示屏幕在水平方向上含有1920個(gè)像素，在垂直方向上含有1080個(gè)像素，通過(guò)將兩者相乘，可知屏幕上總共含有2073600個(gè)像素。知識(shí)儲(chǔ)備1.屏幕分辨率和設(shè)備像素比在屏幕尺寸相同的情況下，具有較高分辨率的屏幕通?？梢燥@示更多的像素，因此它具有更高的像素密度。高像素密度的屏幕能夠呈現(xiàn)更多的細(xì)節(jié)，使圖形和文本顯示更加清晰和精細(xì)，因此這種屏幕通?？梢猿尸F(xiàn)更加細(xì)膩和逼真的動(dòng)畫(huà)。低像素密度的屏幕可能會(huì)顯示出較大的像素顆粒，這會(huì)使圖像和文本顯示不夠清晰和精細(xì)，從而影響觀感和識(shí)別度。因此，當(dāng)考慮屏幕質(zhì)量和顯示效果時(shí)，分辨率是一個(gè)重要的考慮因素。知識(shí)儲(chǔ)備1.屏幕分辨率和設(shè)備像素比下面演示在屏幕尺寸相同的情況下，高分辨率屏幕與低分辨率屏幕所顯示的圖像的差異，如下圖所示?？梢钥闯?，高分辨率屏幕顯示的圖像比較精細(xì)，而低分辨率屏幕顯示的圖像有顆粒感。知識(shí)儲(chǔ)備1.屏幕分辨率和設(shè)備像素比隨著屏幕技術(shù)的進(jìn)步，屏幕分辨率也在不斷提高，這導(dǎo)致了一些早期設(shè)計(jì)的軟件在高分辨率屏幕上顯示過(guò)小的問(wèn)題。導(dǎo)致該問(wèn)題的原因是一些早期軟件的寬度、高度、字號(hào)等都是固定的，這些軟件適用于低分辨率屏幕，用于高分辨率屏幕時(shí)就顯得非常小。為了解決這個(gè)問(wèn)題，操作系統(tǒng)會(huì)自動(dòng)將屏幕畫(huà)面進(jìn)行放大，使早期軟件在高分辨率屏幕上也能以合適的大小顯示。然而，由于屏幕畫(huà)面被操作系統(tǒng)放大，軟件識(shí)別的屏幕分辨率和實(shí)際的屏幕分辨率會(huì)有所差異。為了方便區(qū)分，將實(shí)際的屏幕分辨率和像素稱為物理分辨率和物理像素，而將軟件識(shí)別的屏幕分辨率和像素稱為邏輯分辨率和邏輯像素。物理分辨率是屏幕的硬件特性，是固定不變的。而邏輯分辨率是通過(guò)軟件處理和調(diào)整后的虛擬概念，可以根據(jù)需要進(jìn)行調(diào)整和變化。因此，在網(wǎng)頁(yè)制作過(guò)程中，應(yīng)該參考邏輯分辨率來(lái)編寫(xiě)代碼。注意知識(shí)儲(chǔ)備1.屏幕分辨率和設(shè)備像素比設(shè)備的邏輯分辨率可以使用JavaScript代碼在網(wǎng)頁(yè)上進(jìn)行查詢，示例代碼如下。screen.width表示屏幕寬度的邏輯像素。screen.height表示屏幕高度的邏輯像素。console.log('邏輯分辨率：'+screen.width+'×'+screen.height);知識(shí)儲(chǔ)備1.屏幕分辨率和設(shè)備像素比（2）設(shè)備像素比設(shè)備像素比（DevicePixelRatio）是指設(shè)備的物理像素與邏輯像素之間的比例。例如：當(dāng)設(shè)備的物理像素寬度為4px、邏輯像素寬度為2px時(shí)，則設(shè)備像素比為2。這意味著在水平方向上一個(gè)邏輯像素由2個(gè)物理像素呈現(xiàn)。同樣地，當(dāng)設(shè)備的物理像素高度為4px、邏輯像素高度為2px時(shí)，設(shè)備像素比仍為2。設(shè)備像素比是為了適應(yīng)高分辨率屏幕和提供更好的視覺(jué)效果而引入的。通過(guò)調(diào)整邏輯像素與物理像素之間的比例，可以實(shí)現(xiàn)在高分辨率屏幕上顯示更清晰和細(xì)膩的圖像。知識(shí)儲(chǔ)備1.屏幕分辨率和設(shè)備像素比設(shè)備像素比可以使用JavaScript代碼在網(wǎng)頁(yè)上進(jìn)行查詢，示例代碼如下。letdevicePixelRatio=window.devicePixelRatio;console.log('設(shè)備像素比:'+devicePixelRatio);知識(shí)儲(chǔ)備

先定一個(gè)小目標(biāo)！了解視口，能夠說(shuō)出視口的設(shè)置方法2.視口知識(shí)儲(chǔ)備2.視口在移動(dòng)設(shè)備普及之前，網(wǎng)頁(yè)設(shè)計(jì)主要是針對(duì)PC的大屏幕進(jìn)行的。移動(dòng)設(shè)備出現(xiàn)后，許多網(wǎng)頁(yè)在小屏幕設(shè)備上會(huì)出現(xiàn)顯示不完整或布局混亂的情況，因?yàn)檫@些網(wǎng)頁(yè)并沒(méi)有適配小屏幕設(shè)備。為了解決這個(gè)問(wèn)題，移動(dòng)設(shè)備的瀏覽器通常會(huì)將整個(gè)網(wǎng)頁(yè)以接近PC的寬度（通常為980px）來(lái)渲染，然后將整個(gè)網(wǎng)頁(yè)縮小以適應(yīng)移動(dòng)設(shè)備的屏幕大小。這樣，用戶可以通過(guò)操作水平滾動(dòng)條和垂直滾動(dòng)條來(lái)瀏覽頁(yè)面內(nèi)容。然而，這種操作可能會(huì)比較麻煩。知識(shí)儲(chǔ)備2.視口為了提供更好的移動(dòng)端瀏覽體驗(yàn)，瀏覽器引入了視口（Viewport）的概念，并提供了通過(guò)<meta>標(biāo)簽進(jìn)行配置的方式。其中，視口是瀏覽器用來(lái)顯示網(wǎng)頁(yè)的區(qū)域。通過(guò)配置視口，可以設(shè)置瀏覽器按照指定的大小渲染和顯示網(wǎng)頁(yè)，并控制網(wǎng)頁(yè)的縮放程度以及是否允許用戶縮放網(wǎng)頁(yè)。知識(shí)儲(chǔ)備2.視口使用<meta>標(biāo)簽配置視口的語(yǔ)法格式如下。name屬性用于設(shè)置網(wǎng)頁(yè)的視口。content屬性用于設(shè)置視口參數(shù)的具體值。<metaname="viewport"content="參數(shù)名1=參數(shù)值1,參數(shù)名2=參數(shù)值2">知識(shí)儲(chǔ)備2.視口content屬性的常用參數(shù)如下表所示。參數(shù)說(shuō)明width設(shè)置視口寬度，可以設(shè)為正整數(shù)（單位為px）或特殊值device-width（設(shè)備寬度）height設(shè)置視口高度，可以設(shè)為正整數(shù)（單位為px）或特殊值device-height（設(shè)備高度）initial-scale設(shè)置初始縮放比例，取值范圍為0.0~10.0maximum-scale設(shè)置最大縮放比例，取值范圍為0.0~10.0minimum-scale設(shè)置最小縮放比例，取值范圍為0.0~10.0user-scalable設(shè)置用戶是否可以縮放頁(yè)面，默認(rèn)值為yes，表示允許用戶縮放頁(yè)面；若將其設(shè)為no，則表示不允許用戶縮放頁(yè)面。此外，也可以使用數(shù)字1表示允許用戶縮放頁(yè)面，使用數(shù)字0表示不允許用戶縮放頁(yè)面知識(shí)儲(chǔ)備2.視口下面演示視口的設(shè)置方法，示例代碼如下。width=device-width表示將視口寬度設(shè)置為設(shè)備寬度。initial-scale=1.0表示指定初始縮放比例為1.0。user-scalable=no表示不允許用戶縮放頁(yè)面。<metaname="viewport"content="width=device-width,initial-scale=1.0,user-scalable=no">知識(shí)儲(chǔ)備

先定一個(gè)小目標(biāo)！掌握媒體查詢的使用方法，能夠根據(jù)實(shí)際情況靈活定義媒體查詢3.媒體查詢知識(shí)儲(chǔ)備3.媒體查詢隨著移動(dòng)設(shè)備的普及和多樣化，用戶使用不同尺寸和分辨率的設(shè)備瀏覽網(wǎng)頁(yè)的需求也呈現(xiàn)多樣化。為了滿足這種需求，使用媒體查詢來(lái)實(shí)現(xiàn)響應(yīng)式設(shè)計(jì)已經(jīng)成為一個(gè)重要的前端開(kāi)發(fā)手段。所謂響應(yīng)式，是指網(wǎng)頁(yè)能夠自動(dòng)適應(yīng)不同設(shè)備（如手機(jī)、平板、計(jì)算機(jī)）的屏幕大小和分辨率，為用戶提供舒適的瀏覽體驗(yàn)。知識(shí)儲(chǔ)備3.媒體查詢媒體查詢（MediaQuery）是CSS3中實(shí)現(xiàn)響應(yīng)式設(shè)計(jì)的關(guān)鍵技術(shù)之一，它可以根據(jù)不同的媒體類(lèi)型或視口大小應(yīng)用不同的樣式。在CSS中，媒體查詢的代碼書(shū)寫(xiě)位置與其他CSS代碼的書(shū)寫(xiě)位置相同，既可以寫(xiě)在<style>標(biāo)簽中，也可以寫(xiě)在單獨(dú)的CSS文件中，然后通過(guò)<link>標(biāo)簽引入CSS文件。知識(shí)儲(chǔ)備3.媒體查詢定義媒體查詢的語(yǔ)法格式如下。@media媒體類(lèi)型邏輯操作符(媒體特性){

選擇器{CSS代碼

}}①@media：用于聲明媒體查詢。②媒體類(lèi)型：用于指定媒體查詢的媒體類(lèi)型，常見(jiàn)的媒體類(lèi)型有screen（屏幕設(shè)備）、print（打印機(jī)）、speech（屏幕閱讀器）。若未指定媒體類(lèi)型，則默認(rèn)值為all，表示所有設(shè)備。③邏輯操作符：用于連接多個(gè)媒體特性以構(gòu)建復(fù)雜的媒體查詢，常見(jiàn)的邏輯操作符有：and：將多個(gè)媒體特性聯(lián)合在一起。若未指定邏輯操作符，則默認(rèn)值為and。only：指定特定的媒體特性。not：排除某個(gè)媒體特性。知識(shí)儲(chǔ)備3.媒體查詢定義媒體查詢的語(yǔ)法格式如下。@media媒體類(lèi)型邏輯操作符(媒體特性){

選擇器{CSS代碼

}}④媒體特性：用于指定媒體查詢條件，由“屬性:值”的形式組成。常用的媒體特性的屬性如下。width：視口寬度。min-width：視口最小寬度。max-width：視口最大寬度。若未指定媒體特性，則媒體查詢會(huì)被應(yīng)用于所有設(shè)備和視口。⑤選擇器：用于設(shè)置在指定設(shè)備中滿足媒體特性的選擇器，以確定哪些元素將受到媒體查詢的影響。⑥CSS代碼：用于設(shè)置在指定設(shè)備中當(dāng)滿足媒體特性時(shí)，對(duì)應(yīng)選擇器所應(yīng)用的CSS代碼。知識(shí)儲(chǔ)備3.媒體查詢例如，當(dāng)視口寬度小于或等于768px時(shí)，設(shè)置body元素的背景顏色為#ccc，示例代碼如下。@media(max-width:768px){body{background-color:#ccc;}}知識(shí)儲(chǔ)備3.媒體查詢當(dāng)視口寬度大于或等于500px且小于或等于800px時(shí)，設(shè)置body元素的背景顏色為#ccc，示例代碼如下。@mediascreenand(min-width:500px)and(max-width:800px){body{background-color:#ccc;}}知識(shí)儲(chǔ)備3.媒體查詢下面演示如何使用媒體查詢實(shí)現(xiàn)網(wǎng)頁(yè)在視口寬度小于或等于768px時(shí)隱藏左側(cè)列表區(qū)域，在視口寬度大于768px時(shí)顯示左側(cè)列表區(qū)域和右側(cè)內(nèi)容區(qū)域。打開(kāi)開(kāi)發(fā)者工具，進(jìn)入移動(dòng)設(shè)備調(diào)試模式，將移動(dòng)設(shè)備的視口寬度設(shè)置為769px，頁(yè)面效果如下圖所示。知識(shí)儲(chǔ)備3.媒體查詢當(dāng)視口寬度為769px時(shí)，左側(cè)列表區(qū)域和右側(cè)內(nèi)容區(qū)域均顯示。將移動(dòng)設(shè)備的視口寬度設(shè)置為768px時(shí)，頁(yè)面效果如下圖所示。當(dāng)視口寬度為768px時(shí)，左側(cè)列表區(qū)域隱藏，右側(cè)內(nèi)容區(qū)域顯示。知識(shí)儲(chǔ)備

先定一個(gè)小目標(biāo)！掌握二倍圖的使用方法，能夠靈活使用二倍圖在高分辨率設(shè)備中顯示清晰的圖像4.二倍圖知識(shí)儲(chǔ)備4.二倍圖在移動(dòng)Web開(kāi)發(fā)中，為了確保網(wǎng)頁(yè)中的圖像在不同屏幕尺寸的設(shè)備中都能夠完美呈現(xiàn)，需要解決設(shè)備像素比大于1時(shí)帶來(lái)的圖像模糊問(wèn)題。當(dāng)設(shè)備像素比大于1時(shí)，網(wǎng)頁(yè)在這些設(shè)備中會(huì)被放大顯示，如果網(wǎng)頁(yè)中圖像的分辨率過(guò)低，圖像會(huì)模糊。為了在高分辨率屏幕上顯示更加清晰、更高質(zhì)量的圖像，可以使用二倍圖。知識(shí)儲(chǔ)備4.二倍圖二倍圖是一種寬度和高度均為原圖二倍的圖像。通常在二倍圖的文件名后面會(huì)加上@2x，以示區(qū)分。這種圖像適用于高分辨率屏幕，因?yàn)楦叻直媛势聊煌ǔ＞哂懈叩南袼孛芏?。如果只使用原圖，在高分辨率屏幕上會(huì)出現(xiàn)圖像模糊、失真或變形的情況。因此，在實(shí)際開(kāi)發(fā)中，為了適應(yīng)不同設(shè)備像素比的要求，通常需要同時(shí)準(zhǔn)備原圖及其二倍圖。原圖用于一般分辨率的屏幕顯示，而二倍圖則用于高分辨率的屏幕顯示。這樣，無(wú)論是普通屏幕還是高分辨率屏幕，都能夠獲得較好的圖像顯示效果。知識(shí)儲(chǔ)備4.二倍圖考慮到移動(dòng)端屏幕的設(shè)備像素比多種多樣，為每一種設(shè)備像素比的設(shè)備都制作相應(yīng)的圖像是不現(xiàn)實(shí)的。因此，在實(shí)際開(kāi)發(fā)中，為了平衡圖像質(zhì)量和性能，通常會(huì)選擇使用二倍圖作為通用圖像的解決方案。在網(wǎng)頁(yè)中，可使用<img>標(biāo)簽插入二倍圖或者設(shè)置元素的背景圖像的二倍圖。知識(shí)儲(chǔ)備4.二倍圖（1）使用<img>標(biāo)簽插入二倍圖使用<img>標(biāo)簽插入二倍圖是指，通過(guò)將width屬性和height屬性設(shè)置為實(shí)際圖像尺寸的一半，來(lái)實(shí)現(xiàn)二倍圖的顯示效果。例如，二倍圖image@2x.png的分辨率為200×200，則應(yīng)將<img>標(biāo)簽的width屬性和height屬性均設(shè)置為100px，示例代碼如下。<imgwidth="100"height="100"src="image@2x.png">知識(shí)儲(chǔ)備4.二倍圖（2）設(shè)置元素的背景圖像的二倍圖對(duì)于使用背景圖像的元素，可以通過(guò)將其background-size屬性設(shè)置為實(shí)際圖像尺寸的一半，來(lái)作為背景圖像的顯示大小。例如，原始圖像bg.png的分辨率為200×200，則應(yīng)將其對(duì)應(yīng)的二倍圖bg@2x.png的background-size屬性設(shè)置為“100px100px”，示例代碼如下。div{width:100px;height:100px;background:url("bg@2x.png")no-repeat;background-size:100px100px;}知識(shí)儲(chǔ)備4.二倍圖下面演示如何使用二倍圖。打開(kāi)開(kāi)發(fā)者工具，進(jìn)入移動(dòng)設(shè)備調(diào)試模式，將移動(dòng)設(shè)備的視口寬度設(shè)置為375px。為了方便對(duì)比圖像的區(qū)別，將縮放設(shè)置為200%，圖像顯示效果如下圖所示。知識(shí)儲(chǔ)備

先定一個(gè)小目標(biāo)！掌握rem單位的使用方法，能夠使用rem單位根據(jù)根元素的字號(hào)設(shè)置元素的大小5.rem單位知識(shí)儲(chǔ)備5.rem單位rem是CSS3中引入的一種相對(duì)單位。當(dāng)使用rem單位時(shí)，它的大小取決于根元素的字號(hào)（font-size），換算方式為1rem等于1倍根元素的字號(hào)。例如，根元素的font-size為12px，非根元素的width為2rem，2rem換算成以px為單位的值24px。知識(shí)儲(chǔ)備5.rem單位使用rem單位的優(yōu)勢(shì)在于，只需調(diào)整根元素的字號(hào)，就能同時(shí)改變整個(gè)頁(yè)面中所有使用rem單位的元素的大小，這樣可以確保元素在不同設(shè)備中不會(huì)變形或失真，從而提供一致的視覺(jué)體驗(yàn)。知識(shí)儲(chǔ)備5.rem單位rem單位的基本使用方法如下。編寫(xiě)頁(yè)面結(jié)構(gòu)，示例代碼如下。設(shè)置根元素的字號(hào)，示例代碼如下。<div></div>:root{font-size:14px;}知識(shí)儲(chǔ)備5.rem單位使用rem單位設(shè)置div元素的寬度和高度，示例代碼如下。

div{

width:5rem;

height:5rem;

background-color:#ccc;}知識(shí)儲(chǔ)備

先定一個(gè)小目標(biāo)！熟悉rem適配方案，能夠歸納使用媒體查詢結(jié)合rem單位與使用flexible.js結(jié)合rem單位實(shí)現(xiàn)屏幕適配的區(qū)別6.rem適配方案知識(shí)儲(chǔ)備6.rem適配方案在進(jìn)行屏幕適配時(shí)，rem適配方案是一種常見(jiàn)的屏幕適配方式。它利用相對(duì)單位rem設(shè)置元素大小，并根據(jù)根元素的字號(hào)進(jìn)行計(jì)算，從而實(shí)現(xiàn)在不同屏幕尺寸下的元素等比例縮放。rem適配方案既可以適配不同屏幕寬度，又可以保證頁(yè)面元素在高度和寬度上的等比例縮放，使得頁(yè)面更加美觀和易于閱讀。知識(shí)儲(chǔ)備6.rem適配方案rem適配方案常見(jiàn)的實(shí)現(xiàn)方式包括：使用媒體查詢結(jié)合rem單位使用flexible.js結(jié)合rem單位知識(shí)儲(chǔ)備6.rem適配方案（1）使用媒體查詢結(jié)合rem單位使用媒體查詢根據(jù)不同設(shè)備屏幕尺寸設(shè)置根元素的字號(hào)，然后使用rem單位設(shè)置頁(yè)面元素的大小，即可實(shí)現(xiàn)元素在不同設(shè)備屏幕尺寸下的等比例縮放。知識(shí)儲(chǔ)備6.rem適配方案下面演示如何使用媒體查詢結(jié)合rem單位的方式實(shí)現(xiàn)元素的等比例縮放。打開(kāi)開(kāi)發(fā)者工具，進(jìn)入移動(dòng)設(shè)備調(diào)試模式，將移動(dòng)設(shè)備的視口寬度分別設(shè)置為375px和414px，頁(yè)面效果如下圖所示。知識(shí)儲(chǔ)備6.rem適配方案（2）使用flexible.js結(jié)合rem單位flexible.js是一個(gè)用于移動(dòng)端屏幕適配的JavaScript文件，它會(huì)根據(jù)視口寬度動(dòng)態(tài)計(jì)算出根元素的字號(hào)，從而實(shí)現(xiàn)頁(yè)面元素的等比例縮放。通常情況下，flexible.js會(huì)將根元素的字號(hào)設(shè)置為視口寬度的十分之一。例如，設(shè)備屏幕寬度為375px，那么根元素的字號(hào)將會(huì)是37.5px。知識(shí)儲(chǔ)備6.rem適配方案下面演示如何使用flexible.js結(jié)合rem單位的方式實(shí)現(xiàn)元素的等比例縮放。打開(kāi)開(kāi)發(fā)者工具，進(jìn)入移動(dòng)設(shè)備調(diào)試模式，將移動(dòng)設(shè)備的視口寬度分別設(shè)置為375px和750px，頁(yè)面效果如下圖所示。知識(shí)儲(chǔ)備

先定一個(gè)小目標(biāo)！掌握Less的使用方法，能夠定義變量、使用嵌套語(yǔ)法簡(jiǎn)化代碼、進(jìn)行基本運(yùn)算、注釋代碼、導(dǎo)入和導(dǎo)出Less文件7.Less知識(shí)儲(chǔ)備7.Less為了提升CSS代碼的表達(dá)力和可維護(hù)性，開(kāi)發(fā)者可以選擇使用CSS預(yù)處理器。Less是一個(gè)常用的CSS預(yù)處理器，它通過(guò)引入額外的功能和語(yǔ)法，使CSS代碼變得更加強(qiáng)大和靈活。知識(shí)儲(chǔ)備7.Less與CSS相比，Less具有以下特點(diǎn)。①Less不僅支持變量，而且具有更靈活的變量語(yǔ)法，可以定義并重用變量以管理樣式屬性，這樣在需要修改整個(gè)樣式表時(shí)只需更新變量的值。②Less允許使用嵌套規(guī)則，這樣可以通過(guò)減少重復(fù)的選擇器名稱來(lái)簡(jiǎn)化樣式表的書(shū)寫(xiě)。③Less支持混入（Mixins）功能，可以將一組樣式屬性封裝起來(lái)，并在需要時(shí)通過(guò)調(diào)用一個(gè)已定義的混入來(lái)重復(fù)使用其中封裝的樣式屬性。這樣可以避免在多個(gè)地方重復(fù)編寫(xiě)相同的樣式代碼，減少了代碼的冗余，提高了代碼的復(fù)用性和可維護(hù)性。知識(shí)儲(chǔ)備7.Less為了和CSS文件區(qū)分，通常將Less代碼保存在擴(kuò)展名為.less的文件中。由于瀏覽器無(wú)法直接解析Less代碼，因此需要將Less代碼先編譯成CSS代碼，然后將編譯后的CSS代碼引入頁(yè)面。在VSCode編輯器中，借助EasyLESS擴(kuò)展可以編譯Less代碼。安裝該擴(kuò)展后，每當(dāng)保存Less文件時(shí)，EasyLESS擴(kuò)展會(huì)自動(dòng)將Less代碼編譯成對(duì)應(yīng)的CSS文件。知識(shí)儲(chǔ)備7.Less在VSCode編輯器中搜索EasyLESS即可找到EasyLESS擴(kuò)展，如下圖所示。找到EasyLESS擴(kuò)展后，單擊“安裝”按鈕進(jìn)行安裝即可。知識(shí)儲(chǔ)備7.LessLess的常用語(yǔ)法包括Less變量和Less嵌套規(guī)則，下面分別進(jìn)行講解。（1）Less變量Less變量的作用與CSS變量類(lèi)似，但它不需要定義在選擇器的規(guī)則塊中。定義Less變量的語(yǔ)法格式如下。變量的定義需要使用@符號(hào)作為前綴，后跟變量名和變量值。變量名可以包含字母、數(shù)字、下劃線（_）和連字符（-），但不能以數(shù)字開(kāi)頭且大小寫(xiě)敏感。而變量值可以是任意符合規(guī)定的CSS屬性值，如十六進(jìn)制顏色值、字符串等。例如“@color:#ff0000;”表示定義一個(gè)名為@color的變量，并將其值設(shè)置為#ff0000（紅色）。@變量名:變量值;知識(shí)儲(chǔ)備7.Less下面演示如何定義和使用Less變量，創(chuàng)建myLess.less文件，示例代碼如下。@color:pink;@font14:14px;body{background-color:@color;}div{color:@color;font-size:@font14;}知識(shí)儲(chǔ)備7.Less保存myLess.less文件后，VSCode編輯器會(huì)自動(dòng)在該文件的同目錄下生成myLess.css文件。myLess.css文件的代碼如下。body{background-color:pink;}div{color:pink;font-size:14px;}知識(shí)儲(chǔ)備7.Less（2）Less嵌套規(guī)則Less允許開(kāi)發(fā)者在一個(gè)選擇器的規(guī)則塊內(nèi)部嵌套另一個(gè)規(guī)則，稱為嵌套規(guī)則。通過(guò)使用嵌套規(guī)則，可以顯著減少代碼量，并使代碼結(jié)構(gòu)更加清晰和易讀。在Less中，當(dāng)內(nèi)層選擇器需要與父選擇器形成交集、偽類(lèi)或偽元素選擇器時(shí)，需要在內(nèi)層選擇器的前面添加&符號(hào)，這樣做可以將其解析為父選擇器自身或父選擇器的偽類(lèi)。如果不加&符號(hào)，則會(huì)被解析為父選擇器的后代。知識(shí)儲(chǔ)備7.Less（3）Less運(yùn)算Less支持?jǐn)?shù)學(xué)運(yùn)算，支持加（+）、減（-）、乘（*）、除（/）運(yùn)算符，任何數(shù)字、顏色或者變量都可以參與運(yùn)算。在使用時(shí)，需要注意以下事項(xiàng)。①運(yùn)算符左右兩側(cè)需要留有空格，例如1px+5。②加、減、乘運(yùn)算可以直接書(shū)寫(xiě)計(jì)算表達(dá)式，例如width:100px+50px;。③除法運(yùn)算需要添加小括號(hào)或在/運(yùn)算符前添加“.”符號(hào)，例如width:(100px/4);或width:100px./4。④如果運(yùn)算涉及兩個(gè)具有不同單位的值，運(yùn)算結(jié)果將采用第一個(gè)值的單位。⑤如果運(yùn)算涉及兩個(gè)值，其中只有一個(gè)值具有單位，運(yùn)算結(jié)果將采用具有單位的那個(gè)值的單位。知識(shí)儲(chǔ)備7.Less（4）Less注釋在日常開(kāi)發(fā)中，為了增強(qiáng)代碼的可讀性，可以給代碼添加注釋?zhuān)⑨屧诔绦蚪馕鰰r(shí)會(huì)被忽略，不會(huì)對(duì)代碼的運(yùn)行產(chǎn)生任何影響。Less中可以使用單行注釋和多行注釋?zhuān)瑔涡凶⑨屢浴?/”開(kāi)始，到該行結(jié)束之前的內(nèi)容都是注釋?zhuān)纠a如下。h1{color:blue; //設(shè)置顏色為藍(lán)色}知識(shí)儲(chǔ)備7.Less多行注釋以“/*”開(kāi)始，以“*/”結(jié)束。多行注釋中可以嵌套單行注釋?zhuān)荒芮短锥嘈凶⑨專(zhuān)纠a如下。/*

這是h1標(biāo)題的樣式規(guī)則?？梢栽谶@里添加更多的說(shuō)明。*/h1{color:blue;}知識(shí)儲(chǔ)備7.Less（5）Less導(dǎo)入在Less中，使用@import指令可以導(dǎo)入其他Less文件，該指令通常用于引入公共樣式文件。使用@import指令導(dǎo)入Less文件的語(yǔ)法格式如下。文件路徑可以指定為相對(duì)路徑或絕對(duì)路徑，如果要導(dǎo)入的文件是Less文件，則可以省略文件擴(kuò)展名。@import'文件路徑';知識(shí)儲(chǔ)備7.Less例如，導(dǎo)入當(dāng)前目錄下的base.less文件和common.less文件，示例代碼如下。以上演示了不省略擴(kuò)展名和省略了擴(kuò)展名的兩種寫(xiě)法。@import'base.less';@import'common';知識(shí)儲(chǔ)備7.Less（6）Less導(dǎo)出與禁止導(dǎo)出通過(guò)前面的學(xué)習(xí)可知，當(dāng)保存Less文件后，VSCode編輯器會(huì)自動(dòng)在該文件同目錄下生成同名的CSS文件。如果想要將編譯后的CSS文件導(dǎo)出到當(dāng)前目錄下的指定文件或者指定目錄，可以通過(guò)下面兩種方式實(shí)現(xiàn)。將編譯后的CSS文件導(dǎo)出到當(dāng)前目錄下的index.css文件中，示例代碼如下。//out:index.css將編譯后的CSS文件導(dǎo)出到當(dāng)前目錄下的名為css的文件夾中，示例代碼如下。//out:css/知識(shí)儲(chǔ)備7.Less若想要禁止導(dǎo)出編譯后的CSS文件，則可以在Less文件的第一行添加注釋“//out:false”，示例代碼如下。//out:css/項(xiàng)目實(shí)現(xiàn)

先定一個(gè)小目標(biāo)！掌握線上問(wèn)診頁(yè)面的制作方法，能夠完成線上問(wèn)診頁(yè)面的開(kāi)發(fā)項(xiàng)目實(shí)現(xiàn)音樂(lè)屋首頁(yè)頁(yè)面項(xiàng)目7-2項(xiàng)目需求對(duì)于大多數(shù)人來(lái)說(shuō)，音樂(lè)是生活中不可或缺的一部分。不論是在清晨醒來(lái)時(shí)，還是在工作中需要緩解疲憊時(shí)，甚至是在晚上放松時(shí)，音樂(lè)都扮演著重要的角色。某多媒體公司正在開(kāi)發(fā)一個(gè)音樂(lè)屋移動(dòng)Web項(xiàng)目，當(dāng)前正在進(jìn)行首頁(yè)的開(kāi)發(fā)，這個(gè)首頁(yè)將作為用戶進(jìn)入應(yīng)用的入口。項(xiàng)目需求本項(xiàng)目需要基于上述需求實(shí)現(xiàn)音樂(lè)屋首頁(yè)頁(yè)面的開(kāi)發(fā)，音樂(lè)屋首頁(yè)頁(yè)面效果如下圖所示。知識(shí)儲(chǔ)備

先定一個(gè)小目標(biāo)！掌握流式布局的使用方法，能夠使用流式布局實(shí)現(xiàn)寬度自適應(yīng)1.流式布局知識(shí)儲(chǔ)備1.流式布局在實(shí)現(xiàn)響應(yīng)式布局時(shí)，通常采用寬度適配方式，即通過(guò)設(shè)置網(wǎng)頁(yè)的寬度來(lái)自動(dòng)適應(yīng)不同屏幕尺寸的設(shè)備，以確保用戶在不同設(shè)備上獲得最