div+css媒体查询使用方法？怎么做响应式代码
工具/原料
Dreamweaver CC2018
方法/步骤
1
启动Dreamweaver CC2018并新建一个html文件
2
我们先来做一个模拟导航，添加一个DIV引入CSS：
.nav { height: 100%; background: #000000; position: fixed; left: 0; top: 0;}保存并刷新效果如图3
把宽度单独分离出来，并引入CSS：
.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：
意思是当网页宽度小于1000px时，加载w-200样式。也就是网页小于1000px时，导航就不加载400的宽而是加载200的宽了，这样就完成自适应啦。可以看到下图是网页宽度为1920时，导航宽和刚才一样400不变7
当小于1000后可以看到导航变成了200的宽了，这就完成自适应样式啦，是不是很方便
上一篇：使用遨游浏览器下载在线视频的方法