响应式开发

Responsive

实验题目

汉堡菜单

实验目的

熟悉响应式开发的原则和应用

掌握媒体查询 @media 的基本使用

熟悉响应式开发常见的CSS运用

实验内容

在个人网站的基础上开发并完善；简单起见，仅设置一个断点768px，匹配桌面端和移动端

桌面端需要满足：

.汉堡菜单隐藏

移动端需要满足：

.隐藏主菜单

.显示汉堡菜单

.部分内容需要响应式调整，如相册区，3列变为1列；底部区调整；其它区域调整；结合团队设计灵活调整

参考效果和参考代码

拓展与思考

使用弹性盒子 flex 响应式开发

使用网格 grid 响应式开发

其它响应式开发的思路和方法

完成个人网站其它部分的调整和优化