第1章 Flex布局与响应式布局

本章任务

任务1：认识Flex弹性盒布局

任务2：实现响应式布局

技能目标

◆ 熟练使用媒体查询完成响应式布局

◆ 掌握Flex弹性盒布局

本章知识梳理

本章简介

随着科学技术不断向前发展，网页的浏览终端越来越多样化，用户可以通过宽屏电视、台式机、笔记本电脑、平板电脑和智能手机来访问网站。尽管无法保证一个网站在不同屏幕尺寸和不同设备上看起来一模一样，但是至少要让制作的Web页面适配用户的终端，让它更好地呈现在用户面前。

针对这样的需求，本章将会介绍弹性的Flex布局，以及适配多终端的响应式布局。学完本章内容将能使用CSS3中的Media Query模块让一个网页适应不同的终端（或屏幕尺寸），从而让页面有一个更好的用户体验。

预习作业

简答题

（1）Flex布局的好处是什么？

（2）媒体查询有什么作用？