css3不同显示器宽使用不同样式；@media的使用

css3中提供了一个多媒体查询英文为media，可以通过多媒体查询设置页面响应式布局。以下案例将使用多媒体查询设置不同宽显示不一样的背景色。

方法/步骤

打开前端开发工具，创建一个html文件。如图所示

使用@media设置屏幕宽在1200px-1680px之前的背景色为粉色。代码：@media screen and (min-width: 1200px) and (max-width: 1680px) { body { background-color: #FFCCCC; } }

使用浏览器打开，即可修改浏览器的宽为1200px-1680px之前，即可看到背景色从白色变为粉色

使用@media设置屏幕宽小于1200px之前的背景色为黄色。代码： /* 屏幕宽小于1200px之前的背景色为黄色 */ @media screen and (max-width: 1200px){ body { background-color: #FFD700; } }

使用浏览器打开，即可修改浏览器的宽为1200px-1680px之前，即可看到背景色变为黄色

使用@media设置屏幕宽大于1680px的背景色为红色代码：@media screen and (min-width: 1680px){ body { background-color: #FF0000; } }

使用浏览器打开，即可修改浏览器的宽大于1680px，即可看到背景色变为红色

欧尼酱