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

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

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

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

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

（實現(xiàn)）重排布局，或響應(yīng)式流動布局2024/4/10(注意：使用靈活的單位——相對度量單位，如%、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>例：使用媒體查詢，實現(xiàn)不同頁面寬度顯示不同顏色背景與字體大小。

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

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

考慮屏幕情況：手機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

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

固定寬度改為彈性布局注意2點:比例寬度彈性圖像#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)換為彈性比例)