Web前端开发必知必会 课件-中文版 lesson 14-2 媒体查询.pptx

地址：杭州市滨江区滨文路528号邮政编码：3100532024/4/10LESSON14-2ImprovingWebpageWithRWD响应式优化

CONTENTS01MediaQueries媒体查询02Breakpoints断点03响应式的优化

媒体查询（MediaQueries）媒体查询属于CSS3模块，它允许根据实际媒体情况，例如根据屏幕分辨率（是智能手机还是电脑屏幕）来自动调整渲染网页内容。2012年加入W3C标准，是响应式网页设计的核心技术通过媒体类型指定不同的样式让一个页面适用不同的终端媒体类型包括：Screen、All、PrintScreenfordesktop\laptop，tablet，mobileAllforalldevicesPrintforprinter\preview01

CSS3forRWD关键词：@media根据不同的媒体特征，使用不同的样式（实现）重排布局，或响应式流动布局2024/4/10(注意：使用灵活的单位——相对度量单位，如%、em、非px)

CSS中的媒体@mediatypeand(feature)｛CSScodes｝@mediaonlyscreenand(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>

例：使用媒体查询，实现不同页面宽度显示不同颜色背景与字体大小。2024/4/10小屏（<=640px)中屏（<=780px)大屏（<=680px)

断点（Breakpoints）什么是断点——是指让网页的显示产生变化的地方，即在不同的设备/视口中，网页应用不同的样式，让用户有更好的阅读和导航体验。在响应式网页中，通过设置断点，利用媒体查询检测视口大小，改变网页样式。明显：列数的变化、内容的消失显示（Ipanda实例）细微：微调文字大小考虑如何设定断点（断点值如何确定？）*渐进增强（从小屏开始）2024/4/1002

断点分析

考虑屏幕情况：手机mobile，平板tablet，桌面电脑desktop…2024/4/101column：cellphone2columnspad3colsdesk480px768px960px1200px30em48em60em75emtopMin-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;}三段响应式代码/*1column,formobile*//*2columnsformediumsize*//*3columnsforlargesizescreen*/768px992px1200px

通用的断点设置与布局块宽度通用左右布局断点设置方法：(+最小宽度)->单列->两列->三列->最大有效页面宽度布局块宽度：设置wrapper容器最小宽度，例如：min-width:4