《HTML5 CSS3項目開發(fā)案例教程》（袁明蘭）770-5教案 第18課 適配移動端的設(shè)置

第課適配移動端的設(shè)置第課適配移動端的設(shè)置的基基本本18821PAGE818211821適配移動端的設(shè)置第課PAGE918212適配移動端的設(shè)置第18212適配移動端的設(shè)置第課PAGE1

課題適配移動端的設(shè)置課時2課時（90min）教學(xué)目標(biāo)知識技能目標(biāo)：（1）了解視口的概念和類型（2）掌握使用網(wǎng)頁適配移動端的方法（3）學(xué)習(xí)網(wǎng)頁適配移動端的操作流程思政育人目標(biāo)：通過本節(jié)課的學(xué)習(xí)，培養(yǎng)學(xué)生發(fā)散式的思維方式，并使學(xué)生在模仿中不斷的提高自己的創(chuàng)新意識教學(xué)重難點教學(xué)重點：視口的概念和類型、使用網(wǎng)頁適配移動端的方法教學(xué)難點：網(wǎng)頁適配移動端的操作流程教學(xué)方法講授法、啟發(fā)法、問答法、演示法、討論法、練習(xí)法教學(xué)用具電腦、投影儀、多媒體課件、教材、手機(jī)、平板教學(xué)設(shè)計第1節(jié)課：考勤（2min）→導(dǎo)入新知（4min）→知識講解（24min）→課堂練習(xí)（15min）第2節(jié)課：案例分析（4min）→知識講解（23min）→課堂練習(xí)（12min）→課堂小結(jié)（2min）→作業(yè)布置（4min）教學(xué)過程主要教學(xué)內(nèi)容及步驟設(shè)計意圖第一節(jié)課考勤

（2min）【教師】清點上課人數(shù)，記錄好考勤【學(xué)生】班干部報請假人員及原因培養(yǎng)學(xué)生的組織紀(jì)律性，掌握學(xué)生的出勤情況導(dǎo)入新知

（4min）【教師】概述適配移動端設(shè)置的原因，引出新知識點隨著智能手機(jī)的普及，移動互聯(lián)網(wǎng)的發(fā)展，使用移動端訪問互聯(lián)網(wǎng)服務(wù)的人數(shù)已遠(yuǎn)超PC端，所以在制作網(wǎng)頁時不可避免地要考慮移動端的適配情況。本節(jié)課將首先介紹適配移動端設(shè)置的相關(guān)知識，然后通過設(shè)置“反饋意見”頁面，練習(xí)使網(wǎng)頁適配移動端的方法【學(xué)生】聆聽、思考通過對知識點的概述，讓學(xué)生主動思考如何設(shè)配移動端，激發(fā)學(xué)生的求知欲知識講解

（24min）【教師】講解視口的概念、類型和設(shè)置方法視口在PC端，視口是指瀏覽器的可視區(qū)域，視口寬度與瀏覽器窗口寬度一致。在CSS標(biāo)準(zhǔn)文檔中，視口也稱為初始包含塊，它的寬度是所有CSS百分比寬度推算的根源，也為網(wǎng)頁布局限制了最大寬度。移動端瀏覽器的寬度受到屏幕設(shè)備的影響，一般為300px左右，而大多數(shù)PC端網(wǎng)頁的寬度都在800px以上，如果仍然以瀏覽器窗口作為視口，將無法正常顯示頁面內(nèi)容。為使移動端視口與瀏覽器窗口不再關(guān)聯(lián)，引入了布局視口（layoutviewport）、視覺視口（visualviewport）與理想視口（idealviewport）的概念，下面分別介紹。1．布局視口在早期PC端與移動端網(wǎng)頁共用一套代碼時，為了能夠在移動端正常瀏覽PC端網(wǎng)頁，移動設(shè)備的瀏覽器都默認(rèn)設(shè)置了一個虛擬的布局視口，IOS和Android基本都將這個視口的寬度設(shè)置為980px。這樣PC端的網(wǎng)頁基本都能在手機(jī)上呈現(xiàn)，只是元素看上去小很多，可以手動縮放網(wǎng)頁查看局部效果（本節(jié)中各示意圖皆以文旌財經(jīng)網(wǎng)校官網(wǎng)的頁面為例）。2．視覺視口視覺視口是用戶在屏幕上所能夠看到的網(wǎng)頁區(qū)域，當(dāng)用戶放大網(wǎng)頁時，屏幕上能看到的網(wǎng)頁區(qū)域變小，也就相當(dāng)于視覺視口變小，如圖9-14所示。同理，當(dāng)用戶縮小網(wǎng)頁時，屏幕上能看到的網(wǎng)頁區(qū)域變大，也就相當(dāng)于視覺視口變大?！緦W(xué)生】聆聽、思考、理解【教師】多媒體演示參考代碼一般設(shè)置移動端網(wǎng)頁視口的代碼為：<metaname="viewport"content="width=device-width,user-scalable=no,initial-scale=1,maximum-scale=1,minimum-scale=1,viewport-fit=cover"/>上述代碼的含義為設(shè)置視口寬度為屏幕寬度、無法縮放（頁面為原大?。┣疫m配IOS系統(tǒng)的劉海屏手機(jī)?！緦W(xué)生】觀看參考代碼。思考內(nèi)容【教師】講解參考代碼在網(wǎng)頁文檔的頭部標(biāo)簽中添加<meta>標(biāo)簽，可以重新設(shè)置移動端的布局視口，具體格式為：<metaname="viewport"content="屬性=值,……"/>其中，name屬性值為viewport，表示該標(biāo)簽用于設(shè)置布局視口；content屬性用于設(shè)置布局視口的相關(guān)屬性，如寬度與縮放比例等，常用屬性及說明如下。（1）width用于設(shè)置布局視口的寬度，默認(rèn)值為980px，值為device-width表示布局視口寬度等于當(dāng)前移動端屏幕寬度（即理想視口）。（2）user-scalable用于設(shè)置頁面能否手動縮放，屬性值yes是默認(rèn)值，表示可以縮放；no表示不可縮放。（3）initial-scale用于設(shè)置屏幕寬度與視口寬度之間的縮放比例，屬性值通常設(shè)置為1，表示原大小。（4）maximum-scale用于設(shè)置縮放的最大比例，屬性值通常設(shè)置為1，表示原大小。（5）minimum-scale用于設(shè)置縮放的最小比例，屬性值通常設(shè)置為1，表示原大小。（6）viewport-fit。viewport-fit用于適配iPhoneX及其他型號的劉海屏iPhone手機(jī)（IOS系統(tǒng)），屬性值cover表示將頁面內(nèi)容填充至頂部?！緦W(xué)生】聆聽、思考、理解【教師】講述理想視口理想視口當(dāng)布局視口的寬度等于移動設(shè)備的屏幕寬度時，稱其為理想視口。在理想視口下，用戶不用縮放就能看到網(wǎng)頁的最佳顯示效果?！窘處煛垦菔尽纠?-5】操作流程，實現(xiàn)圖9-16效果設(shè)置用戶注冊表單的視口，使其在移動設(shè)備中正常瀏覽，頁面效果如圖9-16所示。圖9-16設(shè)置視口后的移動端頁面效果【學(xué)生】聆聽、思考、理解通過講解知識點，讓學(xué)生了解視口的概念、類型和設(shè)置方法課堂練習(xí)

（15min）【教師】布置知識搶答的內(nèi)容布置用戶登錄的視口練習(xí)，用戶登錄界面包括賬號、密碼、確認(rèn)密碼、驗證碼、忘記密碼，對其進(jìn)行正確的部署，使其整潔美觀【學(xué)生】完成課堂練習(xí)【教師】統(tǒng)計小組得分，公布分?jǐn)?shù)【學(xué)生】思考、反思回答錯誤的題目【教師】公布參考答案【學(xué)生】修改內(nèi)容，糾正錯誤通過課堂練習(xí)，鞏固所學(xué)知識，并將所學(xué)知識與實際相結(jié)合第二節(jié)課問題導(dǎo)入

（4min）【教師】提出問題，引出新知識點在實際的網(wǎng)頁制作中，僅設(shè)置視口并不能使網(wǎng)頁適配移動設(shè)備，還需要進(jìn)行其他設(shè)置或采用其他方式，使網(wǎng)頁能夠在移動端正常顯示，那么如何對其進(jìn)行操作呢【學(xué)生】聆聽、思考、發(fā)言【教師】總結(jié)知識點這就要求在視口的基礎(chǔ)上，能讓設(shè)備對網(wǎng)頁的需求進(jìn)行響應(yīng)，不僅方便程序員調(diào)試代碼，更給用戶友好提示，給用戶良好的使用體驗通過問答的方式，激發(fā)學(xué)生對響應(yīng)式適配移動設(shè)備的探索欲知識講解

（23min）【教師】講述響應(yīng)式適配移動設(shè)備響應(yīng)式適配移動設(shè)備在實際的網(wǎng)頁制作中，僅設(shè)置視口并不能使網(wǎng)頁適配移動設(shè)備，還需要進(jìn)行其他設(shè)置或采用其他方式，使網(wǎng)頁能夠在移動端正常顯示。下面簡單介紹最常用的兩種方法。1．使用百分比設(shè)置元素寬度對于一些簡單的網(wǎng)頁來說，可以通過將其中元素的寬度設(shè)置為百分比來適應(yīng)用移動設(shè)備。因為這樣一來，當(dāng)屏幕尺寸發(fā)生變化時，各元素的大小也能夠同步等比變化。2．設(shè)置多個樣式表文件在項目6中提到過媒體查詢的概念，使用媒體查詢可以讓不同寬度的瀏覽器窗口應(yīng)用不同的頁面樣式，同樣地，也可以讓不同寬度的移動設(shè)備應(yīng)用不同的樣式。在實際的網(wǎng)頁制作中，通常會根據(jù)不同的屏幕寬度創(chuàng)建不同的樣式表文件，然后在網(wǎng)頁文檔的頭部標(biāo)簽中添加以下代碼，使網(wǎng)頁通過媒體查詢功能根據(jù)屏幕寬度響應(yīng)式地加載不同的樣式表文件。<linkrel="stylesheet"type="text/css"media="screenand(max-device-width:300px)"href="css300.css"/>其中，media用于設(shè)置媒體查詢的條件。這段代碼的含義是當(dāng)最大屏幕寬度為300px時，加載名為“CSS300.css”的樣式表文件?！緦W(xué)生】聆聽、思考、理解【教師】演示【例9-6】操作流程，實現(xiàn)圖9-18效果制作可響應(yīng)式適配移動端的大學(xué)生職業(yè)規(guī)劃調(diào)查問卷頁面。圖9-18“survey.html”適配后的頁面效果（1）打開本書配套素材“項目9”→“survey.html”文檔，在<head>標(biāo)簽中添加以下代碼，設(shè)置頁面的視口<metaname="viewport"content="width=device-width,user-scalable=no,initial-scale=1,maximum-scale=1,minimum-scale=1,viewport-fit=cover"/>（2）繼續(xù)在<head>標(biāo)簽中添加以下代碼，設(shè)置最大屏幕寬度為375px時加載“msurvey.css”文檔。<linkrel="stylesheet"type="text/css"media="screenand(max-device-width:375px)"href="msurvey.css"/>（3）“survey.html”文檔的存儲目錄下創(chuàng)建“msurvey.css”文檔，在其中輸入以下代碼，設(shè)置移動端頁面的樣式。body{width:98%;padding:0;margin:01%;}/*設(shè)置頁面的寬度與內(nèi)外邊距，屬性值使用百分比以適配移動端*/form.suv{width:98%;}/*設(shè)置移動端表單的寬度*/input[type="radio"]+label,input[type="checkbox"]+label{display:block;width:80%;}/*將移動端單選鈕與復(fù)選框?qū)?yīng)的提示信息轉(zhuǎn)換為塊級元素，并設(shè)置其寬度*/label[for="ge_name"]{text-indent:0;}/*去除移動端“姓名”提示信息的縮進(jìn)*/input[type="text"]{height:20px;margin-bottom:10px;}/*設(shè)置移動端個人信息區(qū)域文本框的高度與下外邊距*/.selfinput+span::after{content:"";display:block;height:0;}/*在移動端個人信息區(qū)域的“*”文本后添加一個沒有內(nèi)容的塊級元素，并設(shè)置它的高度，使兩個文本框分行顯示*/【學(xué)生】觀看參考代碼【教師】講述代碼運(yùn)行流程【學(xué)生】聆聽、思考、記錄通過講解知識點，讓學(xué)生進(jìn)一步了解響應(yīng)式適配移動設(shè)備的操作經(jīng)驗課堂練習(xí)

（12min）【教師】布置課堂練習(xí)內(nèi)容使“反饋意見”頁面適配移動端本課堂練習(xí)將通過設(shè)置“反饋意見”頁面的視口和移動端樣式等，練習(xí)使網(wǎng)頁適配移動端的方法【教師】給予學(xué)生提示和幫助（1）在<head>標(biāo)簽中添加以下代碼，設(shè)置頁面的視口與可選擇加載的樣式表文件<metaname="viewport"content="width=device-width,user-scalable=no,initial-scale=1,maximum-scale=1,minimum-scale=1,viewport-fit=cover"/><linkrel="stylesheet"type="text/css"media="screenand(max-device-width:375px)"href="feedback375.css"/><!--當(dāng)屏幕最大寬度為375px時應(yīng)用“feedback375.css”樣式表文件-->（2）在“feedback.html”文檔的存儲目錄下創(chuàng)建“feedback375.css”文檔，在其中輸入以下代碼，設(shè)置移動端頁面的樣式#fb_m{width:100%;}/*設(shè)置移動端頁面的寬度*/.userim,.fbim{line-height:40px;}/*設(shè)置移動端表單的行距*/#fb_mfieldset{text-indent:0;}.fbim>label{text-indent:0;}/*去除移動端表單對象分組與“具體內(nèi)容”提示信息的縮進(jìn)*/textarea{display:block;width:90%;margin:5pxauto;}/*將移動端的文本區(qū)域轉(zhuǎn)換為塊級元素，設(shè)置其寬度與外邊距*/.inline_us,.inline_fb{display:block;height:1px;}/*將移動端中的span元素轉(zhuǎn)換為塊級元素，設(shè)置其高度，使表單控件分行顯示*/input[type="file"]{width:60%;}/*設(shè)置移動端文件域的寬度*/【學(xué)生】完成課堂練習(xí)【教師】公布參考答案【學(xué)生】對比參考答案，修改內(nèi)容利用練習(xí)法，讓學(xué)生掌握響應(yīng)式適配移動設(shè)備的使用方法課堂小結(jié)

（2min）【教師】簡要總結(jié)本章的知識要點本節(jié)課學(xué)習(xí)了視口的概念和類型、使用網(wǎng)頁適配移動端的方法，以及網(wǎng)頁適配移動端的操作流程。希望同學(xué)們在課下多加練習(xí)，熟練掌握所學(xué)知識。【學(xué)生】總結(jié)回顧知識點總結(jié)知識點，鞏