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

地址：杭州市滨江区滨文路528号邮政编码：3100532024/4/10LESSON14-2ImprovingWebpage

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

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

01CSS3forRWD关键词：@media根据不同的媒体特征，使用不同的样式

（实现）重排布局，或响应式流动布局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>例：使用媒体查询，实现不同页面宽度显示不同颜色背景与字体大小。

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

——是指让网页的显示产生变化的地方，即在不同的设备/视口中，网页应用不同的样式，让用户有更好的阅读和导航体验。在响应式网页中，通过设置断点，利用媒体查询检测视口大小，改变网页样式。明显：列数的变化、内容的消失显示（Ipanda实例）细微：微调文字大小考虑如何设定断点（断点值如何确定？）*渐进增强（从小屏开始）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;}三段响应式代码/*1column,formobile*//*2columnsformediumsize*//*3columnsforlargesizescreen*/768px992px1200px

通用的断点设置与布局块宽度通用左右布局断点设置方法：(+最小宽度)->单列->两列->三列->最大有效页面宽度布局块宽度：设置wrapper容器最小宽度，例如：min-width:480px;单列：如30~45EM，使用比例宽度两列：可使用float布局/Flexbox，使用比例宽度三列：使用固定宽度或比例…限制wrapper容器最大宽度，例如：max-width:1200px;2024/4/10改固定布局为响应式设置断点，小屏上下布局、大屏左右布局注意弹性布局，用比例不用固定值弹性图像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：将固定像素大小转换为弹性比例)