《HTML5+CSS3响应式Web开发》课件——2.响应式布局基础.pptxVIP

掌握视口的概念及设置掌握媒体查询的用法

视口的概念及设置

视口的概念及设置视口的概念视口（viewport）在响应式布局中是一个非常重要的概念，它是用户在网页上的可见区域，随设备而异。作用：视口的出现，使得不管PC端网页尺寸有多大，都能将其缩小显示在移动端浏览器上。

视口的概念及设置视口的概念移动端浏览器中存在两种视口：一是可见视口，即设备大小；二是视窗视口，即网页宽度。

视口的概念及设置视口的设置通过?meta?标签来控制视口，语法如下：metaname=viewportcontent=width=device-width,initial-scale=1.0，maximum-scale=1.0

媒体查询的用法

媒体查询的用法媒体查询的定义媒体查询用来根据窗口宽度、屏幕比例和设备方向等差异来改变页面的显示方式。由媒体类型和条件表达式组成，语法如下：@medianot|only媒体类型and（条件表达式）{?????????选择器{?属性名:属性值;}?????????}

媒体查询的用法媒体查询的定义all：所有媒体类型设备screen：计算机屏幕、平板电脑、智能手机等print：打印预览常用的媒体类型包括：

媒体查询的用法媒体查询的定义style@mediascreenand(max-width:960px){??选择器{?属性名:属性值;}}/style示例语法代码：

媒体查询的用法媒体查询的定义linkrel=stylesheetmedia=媒体类型and|not|only(条件)href=样式表文件.css还可以针对不同的媒体使用不同的样式表，语法如下：

媒体查询的用法设备划分尺寸区间宽度设置超小屏幕（手机）≤575px100%小屏幕（平板）≥576px540px中等屏幕（桌面显示器）≥768px720px大屏幕（大桌面显示器）≥992px960px超大屏幕（超大桌面显示器）≥1200px1140px响应式布局容器的划分

媒体查询的用法使用媒体查询实现元素排列

运行结果媒体查询的用法注意：调整浏览器窗口看网页元素排列顺序使用媒体查询实现元素排列

小结

试一试自行设计一个响应式环保类网页，网页中要包含环境保护、垃圾分类、低碳生活等内容。