响应式网页看起来高大上但实際上，不用JS只用CSS也能实现响应式网站的布局

要用到的就是CSS中的媒体查询下面来简单介绍一下怎么运用

第一： 直接在CSS文件中使用

第三也是朂常用的：使用link连接，media属性用于设置查询方式

我们只需用到width衍生出的max-width这个属性定义输出设备中的页面可见区域宽度来控制该改变的样式即可。

下面是一个简单响应式的布局的html代码

 

 窗口大于1200px时显示的样子
 
 

 
 
 

  窗口小于1200大于980时只会被压缩，并不会发生其他变化
 
 

 
 
 

 当大于640小于980时右側栏隐藏
 
 

 
 
 

 当小于640时，导航栏折叠body三部分竖直排列显示，若窗口持续缩小不在发生变化，区域被压缩
 
 

 
 
 

 好了布局就这么简单，细节的把握还靠不断地练习