版權(quán)說明：本文檔由用戶提供并上傳，收益歸屬內(nèi)容提供方，若內(nèi)容存在侵權(quán)，請進(jìn)行舉報或認(rèn)領(lǐng)
文檔簡介
第1章響應(yīng)式網(wǎng)頁設(shè)計基礎(chǔ)1第1章響應(yīng)式網(wǎng)頁設(shè)計基礎(chǔ)1響應(yīng)式網(wǎng)頁設(shè)計基礎(chǔ)什么是響應(yīng)式網(wǎng)頁媒體查詢響應(yīng)式網(wǎng)頁呈現(xiàn)本章實(shí)訓(xùn)響應(yīng)式網(wǎng)頁設(shè)計基礎(chǔ)什么是響應(yīng)式網(wǎng)頁媒體查詢響應(yīng)式網(wǎng)頁呈現(xiàn)本章什么是響應(yīng)式網(wǎng)頁示例：EthanMarcotte個人的響應(yīng)式網(wǎng)頁/手動拖動鼠標(biāo)改變?yōu)g覽器窗口的大小，在不同瀏覽器窗口尺寸下，頁面顯示是否有變化？自動適應(yīng)、流式網(wǎng)格布局、流式圖像顯示3什么是響應(yīng)式網(wǎng)頁示例：EthanMarcotte個人的響應(yīng)什么是響應(yīng)式網(wǎng)頁“自適應(yīng)網(wǎng)頁”就是
響應(yīng)式網(wǎng)頁??不同瀏覽終端打開的并非同一個地址、同一個網(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è)計，普遍適用”不管使用什么設(shè)備，打開及顯示的都是同一個地址、同一個網(wǎng)頁，布局及顯示適應(yīng)不同的瀏覽環(huán)境什么是響應(yīng)式網(wǎng)頁響應(yīng)式網(wǎng)頁的核心思想：“一次設(shè)計，普遍適用”什么是響應(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)用動手練習(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)用動手練習(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è)備的默認(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è)置窗口顯示的最大寬度，為一個正整數(shù)，或字符串"width-
device"height設(shè)置窗口顯示的最大高度，這個屬性很少使用initial-
scale設(shè)置頁面的初始縮放值，為一個數(shù)字，可以帶小數(shù)minimum-
scale允許用戶的最小縮放值，為一個數(shù)字，可以帶小數(shù)maximum-
scale允許用戶的最大縮放值，為一個數(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)建一個響應(yīng)式網(wǎng)頁試增加不同頁面元素及媒體查詢條件，觀察頁面變化18本章實(shí)訓(xùn)：創(chuàng)建一個響應(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è)計基礎(chǔ)20第1章響應(yīng)式網(wǎng)頁設(shè)計基礎(chǔ)1響應(yīng)式網(wǎng)頁設(shè)計基礎(chǔ)什么是響應(yīng)式網(wǎng)頁媒體查詢響應(yīng)式網(wǎng)頁呈現(xiàn)本章實(shí)訓(xùn)響應(yīng)式網(wǎng)頁設(shè)計基礎(chǔ)什么是響應(yīng)式網(wǎng)頁媒體查詢響應(yīng)式網(wǎng)頁呈現(xiàn)本章什么是響應(yīng)式網(wǎng)頁示例：EthanMarcotte個人的響應(yīng)式網(wǎng)頁/手動拖動鼠標(biāo)改變?yōu)g覽器窗口的大小，在不同瀏覽器窗口尺寸下，頁面顯示是否有變化？自動適應(yīng)、流式網(wǎng)格布局、流式圖像顯示22什么是響應(yīng)式網(wǎng)頁示例：EthanMarcotte個人的響應(yīng)什么是響應(yīng)式網(wǎng)頁“自適應(yīng)網(wǎng)頁”就是
響應(yīng)式網(wǎng)頁??不同瀏覽終端打開的并非同一個地址、同一個網(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è)計，普遍適用”不管使用什么設(shè)備，打開及顯示的都是同一個地址、同一個網(wǎng)頁，布局及顯示適應(yīng)不同的瀏覽環(huán)境什么是響應(yīng)式網(wǎng)頁響應(yīng)式網(wǎng)頁的核心思想：“一次設(shè)計，普遍適用”什么是響應(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)用動手練習(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)用動手練習(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è)備的默認(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è)置窗口顯示的最大寬度，為一個正整數(shù)，或字符串"width-
device"height設(shè)置窗口顯示的最大高度，這個屬性很少使用initial-
scale設(shè)置頁面的初始縮放值，為一個數(shù)字，可以帶小數(shù)minimum-
scale允許用戶的最小縮放值，為一個數(shù)字，可以帶小數(shù)maximum-
scale允許用戶的最大縮放值，為一個數(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)容里面會有圖紙預(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)用戶因使用這些下載資源對自己和他人造成任何形式的傷害或損失。
最新文檔
- 二零二五年度成都社保局勞動合同勞動者節(jié)假日安排合同
- 二零二五年度體育場館停車場租賃及賽事服務(wù)協(xié)議
- 二零二五年度個人自愿捐贈養(yǎng)老機(jī)構(gòu)服務(wù)合同
- 2025年度校方責(zé)任險賠償協(xié)議書：校園學(xué)生實(shí)習(xí)責(zé)任賠償服務(wù)合同
- 二零二五年度醫(yī)療健康服務(wù)承攬合同增值稅發(fā)票開具規(guī)范及稅率
- 2025年度琴行音樂培訓(xùn)中心轉(zhuǎn)讓合同
- 二零二五年度農(nóng)莊租賃與農(nóng)業(yè)科技園區(qū)建設(shè)合同
- 二零二五年度勞動合同履行監(jiān)管與合規(guī)保障合同
- 2025年度銀行協(xié)議存款資金池業(yè)務(wù)合作合同
- 2025年度門面房房屋租賃及物業(yè)維護(hù)服務(wù)合同
- 2021學(xué)安全主題班會-《與法同行-法制進(jìn)校園》班會課件
- 機(jī)械加工工藝切削部分培訓(xùn)教材課件
- 數(shù)字信號處理(課件)
- 出口報關(guān)單填制規(guī)范課件
- 加油站防雷施工方案(標(biāo)準(zhǔn)版)
- 鉗工實(shí)操評分表(凹凸配合)
- 鑄造廠熔煉工部安全操作規(guī)程
- 刀具更換作業(yè)指導(dǎo)書
- 植物根莖葉課件
- 四年級下冊英語教案：Unit 4 There are seven days in a week-Lesson 19人教精通版
- 精選四川大學(xué)SCI期刊分級方案
評論
0/150
提交評論