Web前端開發(fā)必知必會(huì) 課件-中文版 lesson 14-2 媒體查詢

地址：杭州市濱江區(qū)濱文路528號(hào)郵政編碼：3100532024/4/10LESSON14-2ImprovingWebpage

WithRWD響應(yīng)式優(yōu)化CONTENTS01MediaQueries媒體查詢02Breakpoints斷點(diǎn)03

響應(yīng)式的優(yōu)化媒體查詢（MediaQueries）媒體查詢屬于CSS3模塊，它允許根據(jù)實(shí)際媒體情況，例如根據(jù)屏幕分辨率（是智能手機(jī)還是電腦屏幕）來自動(dòng)調(diào)整渲染網(wǎng)頁內(nèi)容。2012年加入W3C標(biāo)準(zhǔn)，是響應(yīng)式網(wǎng)頁設(shè)計(jì)的核心技術(shù)通過媒體類型指定不同的樣式讓一個(gè)頁面適用不同的終端媒體類型包括：Screen、All、PrintScreenfordesktop\laptop，tablet，mobileAllforalldevicesPrintforprinter\preview

01CSS3forRWD關(guān)鍵詞：@media根據(jù)不同的媒體特征，使用不同的樣式

（實(shí)現(xiàn)）重排布局，或響應(yīng)式流動(dòng)布局2024/4/10(注意：使用靈活的單位——相對(duì)度量單位，如%、em、非px)CSS中的媒體@mediatype

and(feature)｛CSScodes｝

@mediaonly

screen

and(max-width:1024px)and(min-width:300px){

div{color:red;}}@mediaprint{{

text-shadow:none!important;color:#000!important;background:transparent!important;box-shadow:none!important;……}}注意：“and”

后面空格不可省略媒體查詢CSS語法<style>/*CSS，

usuallyforscreenwithsmallsize*/@mediaonlyscreenand(min-width:560px){/*formediumsize*/}@mediaonlyscreenand(min-width:800px){

/*forlargesize*/}</style>例：使用媒體查詢，實(shí)現(xiàn)不同頁面寬度顯示不同顏色背景與字體大小。

2024/4/10小屏（<=640px)中屏（<=780px)大屏（<=680px)斷點(diǎn)（Breakpoints）什么是斷點(diǎn)

——是指讓網(wǎng)頁的顯示產(chǎn)生變化的地方，即在不同的設(shè)備/視口中，網(wǎng)頁應(yīng)用不同的樣式，讓用戶有更好的閱讀和導(dǎo)航體驗(yàn)。在響應(yīng)式網(wǎng)頁中，通過設(shè)置斷點(diǎn)，利用媒體查詢檢測(cè)視口大小，改變網(wǎng)頁樣式。明顯：列數(shù)的變化、內(nèi)容的消失顯示（Ipanda實(shí)例）細(xì)微：微調(diào)文字大小考慮如何設(shè)定斷點(diǎn)（斷點(diǎn)值如何確定？）*漸進(jìn)增強(qiáng)（從小屏開始）2024/4/1002斷點(diǎn)分析

考慮屏幕情況：手機(jī)mobile，平板tablet，桌面電腦desktop…2024/4/10

1column：cellphone2columns

pad3colsdesk480px768px960px1200px30em48em60em75emtopMin-widthbrkpoint1brkpoint2Max-width@mediaonlyscreenand(min-width:48em){

body{ }#fullpage{ border:3pxsolid#F00; }

}@mediaonlyscreenand(min-width:60em){

body{ …… }#fullpage{……}

}</style><styletype="text/css">body{background-color:#E6E6E6;}#fullpage{ max-width:1200px;/*75em*/ min-width:480px;/*30em*/ padding:1em;border:3pxsolid#333;}三段響應(yīng)式代碼/*1column,formobile*//*2columnsformediumsize*//*3columnsforlargesizescreen*/768px992px1200px

通用的斷點(diǎn)設(shè)置與布局塊寬度通用左右布局?jǐn)帱c(diǎn)設(shè)置方法：(+最小寬度)->單列->兩列->三列->最大有效頁面寬度布局塊寬度：設(shè)置wrapper容器最小寬度，例如：min-width:480px;單列：如30~45EM，使用比例寬度兩列：可使用float布局/Flexbox，使用比例寬度三列：使用固定寬度或比例…限制wrapper容器最大寬度，例如：max-width:1200px;2024/4/10改固定布局為響應(yīng)式設(shè)置斷點(diǎn)，小屏上下布局、大屏左右布局注意彈性布局，用比例不用固定值彈性圖像2024/4/1003

固定寬度改為彈性布局注意2點(diǎn):比例寬度彈性圖像#fullpage{

max-width:1200px;

margin-left:auto;

margin-right:auto;}#downbar{clear:both;}#leftbar{

width:35%;

float:left;}#rightbar{

width:60%;

float:right;}

/*totalwidth<=100%*/例1：將固定像素大小轉(zhuǎn)換為彈性比例)