HTML-响应式基本用法

1、打开Dreamweaver软件，新建一个HTML文件

2、在body标签中建立一个盒标签div

3、建立CSS样式，添加对div的一些修饰，如图将图形设置为一个矩形，填充红色

4、将文件保存后，在浏览器中预览，效果如图所示

5、然后添加响应式代码，固定搭配 @media(max-width:800){}小辖艮鲔鸣括号内添加条件，最大或最小 ；大括号内添加转换后效果属性

6、这里将响应后发生的变化是：宽度降低到400px;高度为300px;颜色转为蓝色；如图所示设置

7、然后保存在浏览器中查看效果，默认时是红色矩形，当拖动浏览器窗口到800px时，葛激握颟发生变化，转为蓝色小矩形。