W3School TIY Editor
W3School 在线教程
改变方向
暗黑模式
运行代码
<!DOCTYPE html> <html> <head> <style> body { background-color: tan; color: black; } /* 在宽度为 992px 或更小的屏幕上，背景颜色为蓝色 */ @media screen and (max-width: 992px) { body { background-color: blue; color: white; } } /* 在宽度为 600px 或更小的屏幕上，背景色为橄榄色 */ @media screen and (max-width: 600px) { body { background-color: olive; color: white; } } </style> </head> <body> <h1>请调整浏览器窗口大小以查看效果！</h1> <p>默认情况下，文档的背景色为棕褐色。如果屏幕尺寸为 992px 或更小，则颜色将变为蓝色。如果小于或等于 600px，它将变为橄榄色。</p> </body> </html>