响应式开发从原理到实战案例（十一）：响应式改版完整案例-头部菜单

效果图

响应式后

实现的关键过程

第一步：菜单按钮媒体查询样式

第二步:外层布局媒体查询样式

padding: 0 20px;//左填充 20px

text-align: left;//文本左对齐

第三步：列表媒体查询样式

第四步：编写显示与隐藏的脚本

按钮点击事件，对菜单项进行显示和隐藏切换操作

 ~~~~~~~~~~~~~~~~~下一节《响应式改版完整案例-文章列表》~~~~~~~~~~~~~~~~~