通常的网络页面都会应对浏览器实际页面大小去做一些页面布局的适配，今天小编通过一个demo来实现一个简单的导航栏以及内容的适配，就是通过媒体查询来实现一个响应式的布局
视口
媒体查询依赖于视口去实现，所以小编这边首先介绍一下视口这个概念
PC 端
视口指的是浏览器的可视区域，其宽度和浏览器窗口的宽度保持一致也就是我们实际上所看到的网页区域，是可变的。
移动端
移动端视口就比较复杂分为三种
-
布局视口
早期他是去解决页面在移动端显示的问题，最开始是由苹果公司推出，认为大部分的网页页面的版心区域为980px，所以手机出厂时给他定义视口固定为980px，那么网页渲染在手机上就是根据视口宽度去渲染。 这是之前无意看到csdn一个页面，那么早期就是这样去解决页面在移动端的显示，显然用户体验会比较不好。
-
视觉视口
那么视觉视口就是实际视觉区域
-
理想视口
他的出现就是响应式页面实现的基础，理想视口是一个概念性的东西，显示在理想视口中的网站具有最理想的宽度，用户无需进行缩放。我们可以使用视口元标签（viewport meta 标签）来进行布局视口的设置。
<!--使视口宽度等于实际设备宽度--> <meta name="viewport" content="width=device-width,initial-scale=1.0">这样我们在通过媒体查询方式对不同视口宽度的情况给予不同的样式实现响应式页面
媒体查询
语法
@media (min-width: 830px) and (max-width: 1024px){
/* 视口宽度区间大于830小于1024，其他情况就不列举 */
/* 条件下样式的修改 */
}
实例
实际应用上会去解决一些页面布局问题，这边放上一个小demo
当这样的一个页面我们要渲染到手机端时应该呈现这样的一种情况，一个nav栏变成点击显示，再次点击隐藏，文章导航框单个展示。
ending...
