<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>媒体查询</title> <style> body { padding: 0; margin: 0 } /* orientation: portrait | landscape */ /* 横/坚屏 */ /* 肖像（坚屏）模式 */ @media only screen and (orientation: portrait) { body { background-color: blue; } } /* 全景（横屏）模式 */ @media screen and (orientation: landscape) { body { background-color: red; } } </style> </head> <body> </body> </html>