版權(quán)說明：本文檔由用戶提供并上傳，收益歸屬內(nèi)容提供方，若內(nèi)容存在侵權(quán)，請進(jìn)行舉報(bào)或認(rèn)領(lǐng)
文檔簡介
第1章響應(yīng)式網(wǎng)頁設(shè)計(jì)基礎(chǔ)1第1章響應(yīng)式網(wǎng)頁設(shè)計(jì)基礎(chǔ)1響應(yīng)式網(wǎng)頁設(shè)計(jì)基礎(chǔ)什么是響應(yīng)式網(wǎng)頁媒體查詢響應(yīng)式網(wǎng)頁呈現(xiàn)本章實(shí)訓(xùn)響應(yīng)式網(wǎng)頁設(shè)計(jì)基礎(chǔ)什么是響應(yīng)式網(wǎng)頁媒體查詢響應(yīng)式網(wǎng)頁呈現(xiàn)本章什么是響應(yīng)式網(wǎng)頁示例：EthanMarcotte個(gè)人的響應(yīng)式網(wǎng)頁/手動(dòng)拖動(dòng)鼠標(biāo)改變?yōu)g覽器窗口的大小，在不同瀏覽器窗口尺寸下，頁面顯示是否有變化？自動(dòng)適應(yīng)、流式網(wǎng)格布局、流式圖像顯示3什么是響應(yīng)式網(wǎng)頁示例：EthanMarcotte個(gè)人的響應(yīng)什么是響應(yīng)式網(wǎng)頁“自適應(yīng)網(wǎng)頁”就是
響應(yīng)式網(wǎng)頁??不同瀏覽終端打開的并非同一個(gè)地址、同一個(gè)網(wǎng)頁，這種不是真正的響應(yīng)式4什么是響應(yīng)式網(wǎng)頁“自適應(yīng)網(wǎng)頁”就是響應(yīng)式網(wǎng)頁??4什么是響應(yīng)式網(wǎng)頁響應(yīng)式網(wǎng)頁的核心思想：“一次設(shè)計(jì)，普遍適用”不管使用什么設(shè)備，打開及顯示的都是同一個(gè)地址、同一個(gè)網(wǎng)頁，布局及顯示適應(yīng)不同的瀏覽環(huán)境什么是響應(yīng)式網(wǎng)頁響應(yīng)式網(wǎng)頁的核心思想：“一次設(shè)計(jì)，普遍適用”什么是響應(yīng)式網(wǎng)頁響應(yīng)式網(wǎng)頁的特點(diǎn)什么是響應(yīng)式網(wǎng)頁響應(yīng)式網(wǎng)頁的特點(diǎn)媒體查詢及應(yīng)用媒體查詢（MediaQuery）是CSS3中獲取用戶行為和設(shè)備環(huán)境（比如屏幕寬度、屏幕分辨率、設(shè)備方向等）并適配相應(yīng)的CSS規(guī)則的過程，可以讓CSS能更精確地作用于不同的媒體類型和同一媒體的不同條件，也可以為一些特定的輸出設(shè)備定制特定的顯示效果，從而為不同終端的用戶都能提供較好的瀏覽體驗(yàn)。關(guān)鍵字：@media媒體查詢對瀏覽器的支持7媒體查詢及應(yīng)用媒體查詢（MediaQuery）是CSS3媒體查詢及應(yīng)用CSS3媒體查詢定義語句的基本格式：<style>@media(適用條件1)and/or(適用條件2)…{適用的CSS樣式}</style>8媒體查詢及應(yīng)用CSS3媒體查詢定義語句的基本格式：8媒體查詢及應(yīng)用例1-1@mediascreenand(max-width:300px)
{body
{
background-color:lightblue;
}}例1-2@mediascreenand(min-width:960px)and(max-width:1200px){body{background:yellow;}}9媒體查詢及應(yīng)用例1-19媒體查詢及應(yīng)用媒體查詢支持的媒體類型對所有媒體類型都適用：@mediaall……指定適用于多種設(shè)備：@mediascreenandspeech…只適用于某種設(shè)備：@mediaonlyscreen…10值描述all用于所有設(shè)備print用于打印機(jī)和打印預(yù)覽screen用于彩色屏幕，平板電腦，智能手機(jī)等。speech應(yīng)用于屏幕閱讀器等發(fā)聲設(shè)備媒體查詢及應(yīng)用媒體查詢支持的媒體類型10值描述all用于所有媒體查詢及應(yīng)用常用媒體特性11屬性描述device-
height，device-
width定義輸出設(shè)備的屏幕可見高度及寬度max-
height，max-
width定義輸出設(shè)備中的頁面最大可見區(qū)域高度及寬度min-
width，min-
height定義輸出設(shè)備中的頁面最小可見區(qū)域高度及寬度max-
device-
height，max-
device-
width定義輸出設(shè)備的屏幕最大可見高度及寬度min-
device-
height，min-
device-
width定義輸出設(shè)備的屏幕最小可見高度及寬度orientation定義輸出設(shè)備中的屏幕方向。取值可以是portrait（縱向）或landscape（橫向）resolution定義設(shè)備的分辨率。如：96dpi（每英寸點(diǎn)數(shù)），300dpi，118dpcm（每厘米點(diǎn)數(shù)）等媒體查詢及應(yīng)用常用媒體特性11屬性描述device-
hei媒體查詢及應(yīng)用例1-3@mediaonlyscreenand(max-width:500px){body{background-color:lightblue;}}例1-4@mediascreenand(min-width:900px){.wrapper{width:980px;}}例1-5@mediaonlyscreenand(orientation:portrait){body{background-color:lightblue;}}例1-6@mediascreenand(max-width:720px)and(min-width:320px){body{background-color:red;}}12媒體查詢及應(yīng)用例1-312媒體查詢及應(yīng)用動(dòng)手練習(xí)試增加媒體查詢條件及屬性，觀察網(wǎng)頁變化<head><styletype="text/css">#test{background:silver; width:400px; height:200px; margin:auto; } @mediascreenand(min-width:600px){#test{background:#EBEA89;}}</style></head><body><divid="test"></div></body>13媒體查詢及應(yīng)用動(dòng)手練習(xí)試增加媒體查詢條件及屬性，觀察網(wǎng)頁響應(yīng)式網(wǎng)頁呈現(xiàn)<metaname="viewport"content="width=device-width,initial-scale=1.0,maximum-scale=1.0,user-scalable=0">作用：讓當(dāng)前屏幕可視區(qū)域的寬度等于設(shè)備的寬度，同時(shí)不允許用戶手動(dòng)縮放。常見設(shè)備的默認(rèn)viewport14設(shè)備類型iPhoneiPadAndroidSamsungAndroidHTCChromeOperaPrestoIE默認(rèn)viewport980px980px980px980px980px980px1024px響應(yīng)式網(wǎng)頁呈現(xiàn)<metaname="viewport"c響應(yīng)式網(wǎng)頁呈現(xiàn)viewport常用屬性15屬性描述width設(shè)置窗口顯示的最大寬度，為一個(gè)正整數(shù)，或字符串"width-
device"height設(shè)置窗口顯示的最大高度，這個(gè)屬性很少使用initial-
scale設(shè)置頁面的初始縮放值，為一個(gè)數(shù)字，可以帶小數(shù)minimum-
scale允許用戶的最小縮放值，為一個(gè)數(shù)字，可以帶小數(shù)maximum-
scale允許用戶的最大縮放值，為一個(gè)數(shù)字，可以帶小數(shù)user-
scalable是否允許用戶進(jìn)行縮放操作，值為"no"或"yes"（0或1），no代表不允許，yes代表允許響應(yīng)式網(wǎng)頁呈現(xiàn)viewport常用屬性15屬性描述width響應(yīng)式網(wǎng)頁呈現(xiàn)絕對大小單位：px（像素）相對大小單位：%（百分比）、em、rem等。em:相對于當(dāng)前元素的父元素
rem:相對于根元素<html>16
響應(yīng)式網(wǎng)頁呈現(xiàn)絕對大小單位：px（像素）16響應(yīng)式網(wǎng)頁呈現(xiàn)響應(yīng)式圖像適配根據(jù)屏幕像素密度或屏幕寬度來匹配不同的圖像文件:<imgsrcset="img/1_1280.jpg3x,img/1_640.jpg2x,img/1_320.jpg1x"/>根據(jù)屏幕的寬度來匹配不同的圖像文件:<imgsrc="img/1_1280.jpg"srcset="img/1_1280.jpg1280w,img/1_640.jpg640w,img/1_320.jpg320w"/>使用類似媒體查詢語句來設(shè)置圖像的大小<imgsrc="img/1_1280.jpg"sizes="(min-width:1200px)calc(43vw),50vw"/>響應(yīng)式圖像適配實(shí)例17響應(yīng)式網(wǎng)頁呈現(xiàn)響應(yīng)式圖像適配17本章實(shí)訓(xùn)：創(chuàng)建一個(gè)響應(yīng)式網(wǎng)頁試增加不同頁面元素及媒體查詢條件，觀察頁面變化18本章實(shí)訓(xùn)：創(chuàng)建一個(gè)響應(yīng)式網(wǎng)頁試增加不同頁面元素及媒體查詢條件Thankyou!PPT模板下載：/moban/行業(yè)PPT模板：/hangye/節(jié)日PPT模板：/jieri/PPT素材下載：/sucai/PPT背景圖片：/beijing/PPT圖表下載：/tubiao/優(yōu)秀PPT下載：/xiazai/PPT教程：/powerpoint/Word教程：/word/Excel教程：/excel/資料下載：/ziliao/PPT課件下載：/kejian/范文下載：/fanwen/試卷下載：/shiti/教案下載：/jiaoan/PPT論壇：
Thankyou!PPT模板下載：第1章響應(yīng)式網(wǎng)頁設(shè)計(jì)基礎(chǔ)20第1章響應(yīng)式網(wǎng)頁設(shè)計(jì)基礎(chǔ)1響應(yīng)式網(wǎng)頁設(shè)計(jì)基礎(chǔ)什么是響應(yīng)式網(wǎng)頁媒體查詢響應(yīng)式網(wǎng)頁呈現(xiàn)本章實(shí)訓(xùn)響應(yīng)式網(wǎng)頁設(shè)計(jì)基礎(chǔ)什么是響應(yīng)式網(wǎng)頁媒體查詢響應(yīng)式網(wǎng)頁呈現(xiàn)本章什么是響應(yīng)式網(wǎng)頁示例：EthanMarcotte個(gè)人的響應(yīng)式網(wǎng)頁/手動(dòng)拖動(dòng)鼠標(biāo)改變?yōu)g覽器窗口的大小，在不同瀏覽器窗口尺寸下，頁面顯示是否有變化？自動(dòng)適應(yīng)、流式網(wǎng)格布局、流式圖像顯示22什么是響應(yīng)式網(wǎng)頁示例：EthanMarcotte個(gè)人的響應(yīng)什么是響應(yīng)式網(wǎng)頁“自適應(yīng)網(wǎng)頁”就是
響應(yīng)式網(wǎng)頁??不同瀏覽終端打開的并非同一個(gè)地址、同一個(gè)網(wǎng)頁，這種不是真正的響應(yīng)式23什么是響應(yīng)式網(wǎng)頁“自適應(yīng)網(wǎng)頁”就是響應(yīng)式網(wǎng)頁??4什么是響應(yīng)式網(wǎng)頁響應(yīng)式網(wǎng)頁的核心思想：“一次設(shè)計(jì)，普遍適用”不管使用什么設(shè)備，打開及顯示的都是同一個(gè)地址、同一個(gè)網(wǎng)頁，布局及顯示適應(yīng)不同的瀏覽環(huán)境什么是響應(yīng)式網(wǎng)頁響應(yīng)式網(wǎng)頁的核心思想：“一次設(shè)計(jì)，普遍適用”什么是響應(yīng)式網(wǎng)頁響應(yīng)式網(wǎng)頁的特點(diǎn)什么是響應(yīng)式網(wǎng)頁響應(yīng)式網(wǎng)頁的特點(diǎn)媒體查詢及應(yīng)用媒體查詢（MediaQuery）是CSS3中獲取用戶行為和設(shè)備環(huán)境（比如屏幕寬度、屏幕分辨率、設(shè)備方向等）并適配相應(yīng)的CSS規(guī)則的過程，可以讓CSS能更精確地作用于不同的媒體類型和同一媒體的不同條件，也可以為一些特定的輸出設(shè)備定制特定的顯示效果，從而為不同終端的用戶都能提供較好的瀏覽體驗(yàn)。關(guān)鍵字：@media媒體查詢對瀏覽器的支持26媒體查詢及應(yīng)用媒體查詢（MediaQuery）是CSS3媒體查詢及應(yīng)用CSS3媒體查詢定義語句的基本格式：<style>@media(適用條件1)and/or(適用條件2)…{適用的CSS樣式}</style>27媒體查詢及應(yīng)用CSS3媒體查詢定義語句的基本格式：8媒體查詢及應(yīng)用例1-1@mediascreenand(max-width:300px)
{body
{
background-color:lightblue;
}}例1-2@mediascreenand(min-width:960px)and(max-width:1200px){body{background:yellow;}}28媒體查詢及應(yīng)用例1-19媒體查詢及應(yīng)用媒體查詢支持的媒體類型對所有媒體類型都適用：@mediaall……指定適用于多種設(shè)備：@mediascreenandspeech…只適用于某種設(shè)備：@mediaonlyscreen…29值描述all用于所有設(shè)備print用于打印機(jī)和打印預(yù)覽screen用于彩色屏幕，平板電腦，智能手機(jī)等。speech應(yīng)用于屏幕閱讀器等發(fā)聲設(shè)備媒體查詢及應(yīng)用媒體查詢支持的媒體類型10值描述all用于所有媒體查詢及應(yīng)用常用媒體特性30屬性描述device-
height，device-
width定義輸出設(shè)備的屏幕可見高度及寬度max-
height，max-
width定義輸出設(shè)備中的頁面最大可見區(qū)域高度及寬度min-
width，min-
height定義輸出設(shè)備中的頁面最小可見區(qū)域高度及寬度max-
device-
height，max-
device-
width定義輸出設(shè)備的屏幕最大可見高度及寬度min-
device-
height，min-
device-
width定義輸出設(shè)備的屏幕最小可見高度及寬度orientation定義輸出設(shè)備中的屏幕方向。取值可以是portrait（縱向）或landscape（橫向）resolution定義設(shè)備的分辨率。如：96dpi（每英寸點(diǎn)數(shù)），300dpi，118dpcm（每厘米點(diǎn)數(shù)）等媒體查詢及應(yīng)用常用媒體特性11屬性描述device-
hei媒體查詢及應(yīng)用例1-3@mediaonlyscreenand(max-width:500px){body{background-color:lightblue;}}例1-4@mediascreenand(min-width:900px){.wrapper{width:980px;}}例1-5@mediaonlyscreenand(orientation:portrait){body{background-color:lightblue;}}例1-6@mediascreenand(max-width:720px)and(min-width:320px){body{background-color:red;}}31媒體查詢及應(yīng)用例1-312媒體查詢及應(yīng)用動(dòng)手練習(xí)試增加媒體查詢條件及屬性，觀察網(wǎng)頁變化<head><styletype="text/css">#test{background:silver; width:400px; height:200px; margin:auto; } @mediascreenand(min-width:600px){#test{background:#EBEA89;}}</style></head><body><divid="test"></div></body>32媒體查詢及應(yīng)用動(dòng)手練習(xí)試增加媒體查詢條件及屬性，觀察網(wǎng)頁響應(yīng)式網(wǎng)頁呈現(xiàn)<metaname="viewport"content="width=device-width,initial-scale=1.0,maximum-scale=1.0,user-scalable=0">作用：讓當(dāng)前屏幕可視區(qū)域的寬度等于設(shè)備的寬度，同時(shí)不允許用戶手動(dòng)縮放。常見設(shè)備的默認(rèn)viewport33設(shè)備類型iPhoneiPadAndroidSamsungAndroidHTCChromeOperaPrestoIE默認(rèn)viewport980px980px980px980px980px980px1024px響應(yīng)式網(wǎng)頁呈現(xiàn)<metaname="viewport"c響應(yīng)式網(wǎng)頁呈現(xiàn)viewport常用屬性34屬性描述width設(shè)置窗口顯示的最大寬度，為一個(gè)正整數(shù)，或字符串"width-
device"height設(shè)置窗口顯示的最大高度，這個(gè)屬性很少使用initial-
scale設(shè)置頁面的初始縮放值，為一個(gè)數(shù)字，可以帶小數(shù)minimum-
scale允許用戶的最小縮放值，為一個(gè)數(shù)字，可以帶小數(shù)maximum-
scale允許用戶的最大縮放值，為一個(gè)數(shù)字，可以帶小數(shù)user-
scalable是否允許用戶進(jìn)行縮放操作，值為"no"或"yes"（0或1），no代表不允許，yes代表允許響應(yīng)式網(wǎng)頁呈現(xiàn)viewport常用屬性15屬性描述width響應(yīng)式網(wǎng)頁呈現(xiàn)絕對大小單位：px（像素）相對大小單位：%（百分比）、em、rem等。em:相對于當(dāng)前元素的父元素
rem:相對于根元素<html>35
響應(yīng)式網(wǎng)頁呈現(xiàn)絕對大小單位：px（像素）16響應(yīng)式網(wǎng)頁呈現(xiàn)響應(yīng)式圖像適配根據(jù)屏
溫馨提示
- 1. 本站所有資源如無特殊說明，都需要本地電腦安裝OFFICE2007和PDF閱讀器。圖紙軟件為CAD,CAXA,PROE,UG,SolidWorks等.壓縮文件請下載最新的WinRAR軟件解壓。
- 2. 本站的文檔不包含任何第三方提供的附件圖紙等，如果需要附件，請聯(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ǔ)空間，僅對用戶上傳內(nèi)容的表現(xiàn)方式做保護(hù)處理，對用戶上傳分享的文檔內(nèi)容本身不做任何修改或編輯，并不能對任何下載內(nèi)容負(fù)責(zé)。
- 6. 下載文件中如有侵權(quán)或不適當(dāng)內(nèi)容，請與我們聯(lián)系，我們立即糾正。
- 7. 本站不保證下載資源的準(zhǔn)確性、安全性和完整性, 同時(shí)也不承擔(dān)用戶因使用這些下載資源對自己和他人造成任何形式的傷害或損失。
最新文檔
- 生態(tài)農(nóng)業(yè)園租賃合同模板
- 水產(chǎn)養(yǎng)殖銷售代表聘用合同范本
- 美容院防水施工合同
- 兒童攝影相機(jī)租賃協(xié)議
- 股份質(zhì)押合同三篇
- 高速公路路面養(yǎng)護(hù)承包合同三篇
- 車輛租賃公司和員工安全協(xié)議書（2篇）
- 挖機(jī)在工地干活合同范本
- 公共機(jī)構(gòu)合同能源管理的意義和作用
- 工商銀行解除貸款合同流程
- 腫瘤的類型和治療手段
- 美麗文字 民族瑰寶
- 化肥減量培訓(xùn)課件
- 牙合畸形的早期矯治通用課件
- 四川省資陽市安岳縣2023-2024年九年級上期期末化學(xué)試題
- 初中道德與法治差異化作業(yè)實(shí)踐探究
- 部編版小學(xué)道德與法治五年級上冊單元復(fù)習(xí)課件(全冊)
- 北京市2022-2023學(xué)年七年級上學(xué)期語文期末試卷（含答案）
- 電纜放線施工方案
- 廢水處理系統(tǒng)點(diǎn)檢表
- 2023-2024年新人教版pep六年級英語上冊試卷全套含答案
評論
0/150
提交評論