在使用div+css网页布局时，通常使用@media针对不同的分辨率设置不同的样式。下面小编举例讲解DIV+CSS怎样解决对不同分辨率的适应问题。
工具/原料
1
html+css
2
代码编辑器：Zend Studio 12.5.1
方法/步骤
1
新建一个html文件，命名为test.html，用于讲解DIV+CSS怎样解决对不同分辨率的适应问题。
2
在test.html文件中，使用div标签创建一个模块，并设置其class属性为myclass，下面将通过该class设置其css样式。
3
在test.html文件内，编写标签，页面的css样式将写在该标签内。
4
在css标签内，对类名为myclass的div进行样式设置，定义其高度为300px，背景颜色为红色。
5
在css标签内，使用@media针对不同的分辨率设置不同的样式。例如，对浏览器宽度不小于1201px ，不大于1200px，不大于500px这三种情况编写不同的样式。
6
在css标签内，当浏览器宽度不小于1201px时，设置div的宽度为1200px ，当浏览器宽度不大于1200px，设置div的宽度为900px，当浏览器宽度不大于500px，设置div的宽度为100px。
7
在浏览器打开test.html文件，查看实现的效果
总结：
1、创建一个test.html文件。 2、在文件内，创建一个div模块。 3、在css中，设置div的高度，它的宽度使用@media根据不同分辨率设置不同的数值。
注意事项
在实际开发中，可以添加更多的@media样式，对不同的分辨率设置不同的样式，让页面的兼容器更高。