1、打开Dreamweaver软件，新建一个HTML文件
2、在body标签中建立一个盒标签div
3、建立CSS样式，添加对div的一些修饰，如图将图形设置为一个矩形，填充红色
4、将文件保存后，在浏览器中预览，效果如图所示
5、然后添加响应式代码，固定搭配 @media(max-width:800){}
小括号内添加条件，最大或最小 ；大括号内添加转换后效果属性
6、这里将响应后发生的变化是：宽度降低到400px;高度为300px;颜色转为蓝色；如图所示设置
7、然后保存在浏览器中查看效果，默认时是红色矩形，当拖动浏览器窗口到800px时，发生变化，转为蓝色小矩形。
