步骤 3. Media Queries
CSS3 media query 是响应式设计所使用的技巧，他就像是在写条件语句，告诉浏览器在特定viewport宽度下如何展示页面。
例如，下面的命令将会在viewport的宽度等于或者小于980px的时候起作用。一般而言，我会用百分比的数值，而不是像素值来设置容器的宽度，这样可以实现流式布局的效果。
当viewport等于或者小于700px的时候，设置 #content 和 #sidebar 的宽度为auto，并且移除 float， 这样他们会以全部宽度方式显示。
对于480px或者更小的mobile屏幕，设置#header的高度为自动，h1得字体大小为24px，同时隐藏#sidebar。
你可以根据需要添加很多media query，在我的demo中我只添加了三个media query。media query的目的针对特定viewport的宽度，使用不同的css实现页面布局。media query可以在一个css文件中，也可以分布在几个css文件中。
总结
以上就是HTML5实践-三步实现响应式设计的详细介绍的详细内容，更多文章请关注木庄网络博客！
相关阅读 >>
HTML5 header标签怎么用？HTML5 header标签的作用介绍
更多相关阅读请进入《HTML5》频道 >>
Vue.js 设计与实现 基于Vue.js 3 深入解析Vue.js 设计细节
本书对 Vue.js 3 技术细节的分析非常可靠，对于需要深入理解 Vue.js 3 的用户会有很大的帮助。——尤雨溪，Vue.js作者
