HTML5+CSS3+JavaScript網(wǎng)頁開發(fā)實(shí)戰(zhàn) 課件 模塊10 移動端網(wǎng)頁設(shè)計(jì)_第1頁
HTML5+CSS3+JavaScript網(wǎng)頁開發(fā)實(shí)戰(zhàn) 課件 模塊10 移動端網(wǎng)頁設(shè)計(jì)_第2頁
HTML5+CSS3+JavaScript網(wǎng)頁開發(fā)實(shí)戰(zhàn) 課件 模塊10 移動端網(wǎng)頁設(shè)計(jì)_第3頁
HTML5+CSS3+JavaScript網(wǎng)頁開發(fā)實(shí)戰(zhàn) 課件 模塊10 移動端網(wǎng)頁設(shè)計(jì)_第4頁
HTML5+CSS3+JavaScript網(wǎng)頁開發(fā)實(shí)戰(zhàn) 課件 模塊10 移動端網(wǎng)頁設(shè)計(jì)_第5頁
已閱讀5頁，還剩26頁未讀， 繼續(xù)免費(fèi)閱讀

下載本文檔

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

文檔簡介

模塊10移動端網(wǎng)頁設(shè)計(jì)本模塊主要介紹視口、相對長度單位、flex布局等移動端開發(fā)內(nèi)容，并根據(jù)所學(xué)內(nèi)容進(jìn)行移動端網(wǎng)頁設(shè)計(jì)。掌握視口和視口的設(shè)置方法；掌握CSS3中常見相對長度單位的使用；掌握flex布局的方式。移動端宣傳頁設(shè)計(jì)任務(wù)1任務(wù)概述本任務(wù)主要通過對視口和相對長度單位的講解，幫助讀者了解移動端網(wǎng)站開發(fā)中的視口設(shè)置方法和布局技巧，并能夠進(jìn)行簡單移動端宣傳頁設(shè)計(jì)。任務(wù)1移動端宣傳頁設(shè)計(jì)1.1視口視口（Viewport）是移動端網(wǎng)站開發(fā)中一個非常重要的概念，其目的是讓手機(jī)屏幕盡可能完整地顯示整個網(wǎng)頁。無論網(wǎng)頁原始的分辨率尺寸有多大，開發(fā)者通過設(shè)置視口都能將其縮小顯示在手機(jī)瀏覽器上，這樣保證網(wǎng)頁在手機(jī)上看起來更像在桌面瀏覽器中的樣子。視口，簡單來說就是瀏覽器顯示頁面內(nèi)容的屏幕區(qū)域。移動端瀏覽器中存在3種視口，分別是布局視口（LayoutViewport）、視覺視口（VisualViewport）和理想視口（IdealViewport）。1.1視口1．布局視口布局視口可以被看作網(wǎng)頁的實(shí)際寬高區(qū)域，一般移動端瀏覽器都默認(rèn)設(shè)置了布局視口的寬度。根據(jù)設(shè)備的不同，布局視口的默認(rèn)寬度可能是768px、980px、1024px等。2．視覺視口視覺視口可以被看作瀏覽器可視窗口的寬高區(qū)域。PC端瀏覽器可視窗口支持隨意改變大小，用戶可以直觀地看到視覺視口的變化。而移動端一般是不支持改變?yōu)g覽器寬高的，所以視覺視口就是其屏幕大小。視覺視口與布局視口如圖所示。視覺視口與布局視口IP地址1.1視口3．理想視口理想視口是指相對設(shè)備而言最理想的視口尺寸。采用理想視口可以使網(wǎng)頁在移動端瀏覽器上獲得最佳的瀏覽和閱讀的寬度。在采用理想視口的情況下，布局視口的寬度和屏幕寬度是一致的，這樣就不需要左右滾動頁面了。在移動端網(wǎng)站的開發(fā)過程中，為了實(shí)現(xiàn)理想視口，需要給移動端網(wǎng)頁添加標(biāo)簽配置視口，通知瀏覽器來進(jìn)行處理，如圖所示。理想視口1.1視口4．視口設(shè)置在移動端網(wǎng)頁中，可以通過<meta>標(biāo)簽進(jìn)行視口設(shè)置。具體代碼如下：<metaname="viewport"content="width=device-width,initial-scale=1.0,maximum-scale=1.0,minimum-scale=1.0,user-scalable=no"/>在以下示例代碼中，如果未進(jìn)行視口設(shè)置，則瀏覽器顯示效果如下圖所示。在進(jìn)行視口設(shè)置后，布局視口和設(shè)備的寬度一致，實(shí)現(xiàn)了理想視口的設(shè)置，瀏覽器顯示效果如圖所示。<!DOCTYPEhtml><htmllang="en"><head><metacharset="UTF-8"><metahttp-equiv="X-UA-Compatible"content="IE=edge">

<!--視口設(shè)置--><metaname="viewport"content="width=device-width,initial-scale=1.0,maximum-scale=1.0,minimum-scale=1.0,user-scalable=no"/><title>北京介紹</title></head><body><imgsrc="bj.jpg"alt="北京"width="330"height="250"><p>北京地處中國北部，是中國的首都。</p></body></html>未設(shè)置視口效果已設(shè)置視口效果域名1.2相對長度單位在傳統(tǒng)的網(wǎng)站開發(fā)項(xiàng)目中，常用的單位有像素（px）、百分比（%）等，它們可以適用于大部分的PC端網(wǎng)站開發(fā)項(xiàng)目，且擁有良好的兼容性。從CSS3開始，瀏覽器對邏輯單位的支持得到了提升，新增了vw、vh、vmax、vmin、rem等相對長度單位。利用這些新的單位能夠開發(fā)出良好的響應(yīng)式頁面，適用于多種不同分辨率的移動端設(shè)備。下面我們一起來認(rèn)識CSS3中這些相對長度單位。1.2相對長度單位1．視口單位vw、vh、vmin、vmax是一種視口單位，也是相對單位。它們的大小是由視口（Viewport）決定的，其描述如下表所示。視口單位描述vwvw即視口寬度（ViewportWidth）。1vw相當(dāng)于視口寬度的1%vhvh即視口高度（ViewportHeight）。1vh相當(dāng)于視口高度的1%vmin當(dāng)前vw和vh中較小的值vmax當(dāng)前vw和vh中較大的值例如：<!DOCTYPEhtml><htmllang="en"><head><metacharset="UTF-8"><metahttp-equiv="X-UA-Compatible"content="IE=edge"><metaname="viewport"content="width=device-width,initial-scale=1.0"><title>視口單位</title><style>.box{width:30vw;height:20vh;background:skyblue;}</style></head><body><divclass="box"></div></body></html>響應(yīng)式工具使用示意圖視口單位隨橫豎屏進(jìn)行轉(zhuǎn)換HTTP與HTTPS2．remrem是一個相對單位，常用于響應(yīng)式頁面。1rem等于根節(jié)點(diǎn)（html節(jié)點(diǎn)）的font-size值。因?yàn)镃hrome等WebKit內(nèi)核瀏覽器的根節(jié)點(diǎn)文字大小默認(rèn)為16px，所以1rem的默認(rèn)大小為16px。例如：<!DOCTYPEhtml><htmllang="en"><head><metacharset="UTF-8"><metahttp-equiv="X-UA-Compatible"content="IE=edge"><metaname="viewport"content="width=device-width,initial-scale=1.0"><title>rem</title><style>html{font-size:100px;}.box{width:1rem;height:1rem;background:red;}</style></head><body><divclass="box"></div></body></html>rem單位設(shè)置效果1.2相對長度單位1.2相對長度單位3．媒體查詢媒體查詢提供了一種應(yīng)用CSS的規(guī)則和方法。當(dāng)瀏覽器和設(shè)備的環(huán)境與指定的規(guī)則相匹配時，規(guī)則下的CSS才會被應(yīng)用。媒體查詢的基礎(chǔ)語法格式如下：<style>@mediamedia-typeand(media-rule){

/*符合條件時，被應(yīng)用的CSS樣式*/}</style>其中，media-type為媒體類型，具體包括：lall（用于所有媒體類型設(shè)備）lprint（用于所有媒體類型設(shè)備）lscreen（用于所有媒體類型設(shè)備）lspeech（用于大聲“讀出”頁面的屏幕閱讀器）media-rule是一個媒體表達(dá)式，它包含CSS生效所需的規(guī)則。例如，通過以下媒體查詢代碼實(shí)現(xiàn)兩種尺寸屏幕的響應(yīng)式布局：<!DOCTYPEhtml><htmllang="en"><head><metacharset="UTF-8"><metahttp-equiv="X-UA-Compatible"content="IE=edge"><metaname="viewport"content="width=device-width,initial-scale=1.0"><title>狗狗</title><style>@mediascreenand(min-width:320px){

/*當(dāng)設(shè)備尺寸大于或等于320px時，根節(jié)點(diǎn)文字大小為100px*/html{font-size:100px;}}@mediascreenand(min-width:640px){

/*當(dāng)設(shè)備尺寸大于或等于320px時，根節(jié)點(diǎn)文字大小為200px*/html{font-size:200px;}}

/*設(shè)置圖像寬度和高度為1rem*/img{width:1rem;height:1rem;}</style></head><body><imgsrc="dog.svg"alt="狗狗"></body></html>響應(yīng)式頁面的布局任務(wù)1移動端宣傳頁設(shè)計(jì)1.3任務(wù)實(shí)施vw單位和rem單位都能夠?qū)崿F(xiàn)頁面的響應(yīng)式布局，這兩種布局方案各有利弊。在通過rem單位進(jìn)行頁面的響應(yīng)式布局時，需要和根節(jié)點(diǎn)的font-size值強(qiáng)耦合，當(dāng)系統(tǒng)字體被放大或縮小時，可能會導(dǎo)致布局錯亂。在通過vw單位進(jìn)行頁面的響應(yīng)式布局時，需要考慮一定的兼容性問題，只有iOS8、Android4.4及以上版本才能完全支持。所以，響應(yīng)式頁面實(shí)現(xiàn)方案的選擇還需要根據(jù)項(xiàng)目實(shí)際情況來確定。本任務(wù)中將以vw單位進(jìn)行移動端宣傳頁的響應(yīng)式布局設(shè)計(jì)，效果如圖所示。移動端宣傳頁效果任務(wù)2移動端首頁設(shè)計(jì)1.4任務(wù)拓展請讀者根據(jù)所學(xué)內(nèi)容，在本任務(wù)基礎(chǔ)上完成廣告欄切換效果設(shè)計(jì)。任務(wù)2移動端宣傳頁設(shè)計(jì)任務(wù)概述flex布局是一種當(dāng)頁面需要適應(yīng)不同的屏幕大小及設(shè)備類型時確保元素?fù)碛星‘?dāng)行為的布局方式。對于響應(yīng)式頁面，flex布局能夠更加方便地實(shí)現(xiàn)頁面元素的排布和動態(tài)尺寸響應(yīng)。本任務(wù)主要介紹flex布局的使用技巧，并通過flex布局設(shè)計(jì)移動端首頁。任務(wù)2移動端宣傳頁設(shè)計(jì)2.1flex布局1．基本概念flex是flexiblebox的縮寫，意為“彈性布局”。如果需要進(jìn)行flex布局，則可以直接在元素的樣式上使用如下代碼：display:flex;使用flex布局的元素，稱為flex容器（flexcontainer），它的所有子元素稱為flex項(xiàng)目（flexitem）。flex容器默認(rèn)存在兩根軸，即主軸和交叉軸，默認(rèn)主軸為水平方向的，交叉軸為豎直方向的，flex項(xiàng)目沿著主軸的方向進(jìn)行排列，如圖所示：flex容器2．flex容器屬性flex容器屬性主要包括flex-direction、justify-content、align-items、flex-wrap、align-content、flex-flow等。這些屬性被設(shè)置在flex容器上，下面將對flex容器屬性的使用方法進(jìn)行具體介紹。（1）flex-direction屬性。flex-direction屬性決定了主軸的方向。該屬性擁有如下4個取值：flex-direction:row|row-reverse|column|column-reverse;flex-direction屬性效果（2）justify-content屬性。justify-content屬性定義了項(xiàng)目在主軸上的對齊方式。justify-content:flex-start|flex-end|center|space-between|space-around;justify-content屬性效果2.1flex布局（3）align-items屬性。align-items屬性定義了項(xiàng)目在交叉軸上的對齊方式。其使用方法如下，取值如下表所示。align-items:flex-start|flex-end|center|baseline|stretch;值描述flex-start元素向交叉軸起點(diǎn)對齊flex-end元素向交叉軸終點(diǎn)對齊center元素在交叉軸居中對齊。如果元素在交叉軸上的高度大于其容器高度，則在兩個方向上溢出距離相同baseline所有元素向基線對齊stretch如果元素未設(shè)置高度或?qū)挾龋瑢诮徊孑S方向被拉伸到與flex容器相同的高度或?qū)挾龋J(rèn)值）align-items屬性效果align-items屬性效果2.1flex布局（4）flex-wrap屬性。flex-wrap屬性用于指定flex項(xiàng)目采用單行顯示還是多行顯示，其使用方法如下，取值如下表所示。flex-wrap:nowrap|wrap|wrap-reverse;值描述nowrapflex項(xiàng)目被擺放到一行中，當(dāng)flex容器寬度不足時，將壓縮flex項(xiàng)目的寬度wrapflex項(xiàng)目被打斷到多行中wrap-reverseflex項(xiàng)目被打斷到多行中，以反方向排列flex-wrap屬性效果flex-wrap屬性的取值2.1flex布局（5）align-content屬性。align-content屬性定義了存在多根軸線時元素的對齊方式。如果僅存在一根軸線，則該屬性不起作用。其使用方法如下，取值如表所示。align-content:flex-start|flex-end|center|space-between|space-around|space-evenly|stretch;值描述flex-start所有行從交叉軸起點(diǎn)開始排列flex-end所有行從交叉軸末尾開始排列center所有行朝向容器的中心排列space-between所有行在容器中平均分布。相鄰兩行間距相等。容器的交叉軸起始線和終止線分別與第一行和最后一行的邊對齊space-around所有行在容器中平均分布，相鄰兩行間距相等。容器的交叉軸起始線與第一行，以及終止線與最后一行的距離是相鄰兩行間距的一半space-evenly所有行沿交叉軸均勻分布在對齊容器內(nèi)。相鄰行之間的間距，起始線和第一行，以及終止線和最后一行的距離都是完全相等的stretch拉伸所有行來填滿剩余空間。將剩余空間平均地分配給每一行align-content屬性的取值align-content屬性效果2.1flex布局（6）flex-flow屬性。flex-flow屬性是flex-direction屬性和flex-wrap屬性的簡寫形式，默認(rèn)值為row和nowrap。flex-flow:<flex-direction>||<flex-wrap>;任務(wù)2移動端宣傳頁設(shè)計(jì)2.2任務(wù)實(shí)施前文說過，使用flex布局的元素?fù)碛袕?qiáng)大的空間分布和對齊能力,能夠更加方便地實(shí)現(xiàn)頁面元素的排版布局。本任務(wù)主要完成移動端首頁設(shè)計(jì)，效果

溫馨提示

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

評論

0/150

提交評論