div+css媒体查询使用方法怎么做响应式代码

1、启动Dreamweaver CC2018并新建一个html文件

2、我们先来做一个模拟导航，添加一个DIV引入CSS：<div class="nav"></div>.nav { height: 100%; background: #000000; position: fixed; left: 0; top: 0;}保存并刷新效果如图

3、把宽度单独分离出来，并引入CSS：<div class="nav w-400"></div>.w-400 { width: 400px;}保存并刷新效果如图

4、那怎么能让网页宽度随着变化而让左侧的导航筐毙险裆变窄呢，这就需要响应式代码媒体查询了。把单独的w-400样式设置成如下代码：@media screen and (min-width: 1000px) {.w-400 { width: 400px;}}那是什么意思呢？意思就是导航大于1000像素就会引入这个CSS样式，如下图网页宽度为1920px，可以看到导航宽度是400px

5、当网页低于1000PX后，会发现就不会加载宽度值了，所以就看不到导航了

6、我们聪艄料姹再加入第二个媒体查询代码：@media screen and (max-width: 1000px) {.w-200 { width: 200px;}}并引入CSS：<div c造婷用痃lass="nav w-400 w-200"></div>意思是当网页宽度小于1000px时，加载w-200样式。也就是网页小于1000px时，导航就不加载400的宽而是加载200的宽了，这样就完成自适应啦。可以看到下图是网页宽度为1920时，导航宽和刚才一样400不变

7、当小于1000后可以看到导航变成了200的宽了，这就完成自适应样式啦，是不是很方便