Web前端技术项目式教程课件 任务八 使用Flex实现网页响应式布局.pptxVIP

Web前端技术项目式教程

（HTML5+CSS3+Flex+Bootstrap）;任务八

使用Flex实现网页响应式布局;知识目标;能力目标;素质目标;思维导图;任务描述;知识引入;1.响应式布局基础知识;1.响应式布局基础知识;1.响应式布局基础知识;1.响应式布局基础知识;1.响应式布局基础知识;2.Flex布局;2.Flex布局;2.Flex布局;2.Flex布局;2.Flex布局;2.Flex布局;2.Flex布局;2.Flex布局;2.Flex布局;2.Flex布局;2.Flex布局;2.Flex布局;2.Flex布局;2.Flex布局;2.Flex布局;2.Flex布局;2.Flex布局;任务实现：使用Flex布局重构中国传统文化网站首页;任务实现：使用Flex布局重构中国传统文化网站首页;3.弹性文字

网页中所有字体的大小均使用rem为单位，示例如下。

html{

font-size:10px;

}

;4．清除超链接下划线

a{

text-decoration:none;

};5.媒体查询

媒体查询的原理是根据断点应用不同的样式。断点就是网页样式发生变化的设备宽度值。

中国传统文化网站响应式代码有两个断点：768像素和992像素。媒体查询语句如下。

@media(min-width:768px){