媒体查询：横屏与竖屏内容的CSS技巧

媒体查询是一种用于在不同设备和屏幕尺寸上呈现不同样式的CSS技术。通过媒体查询，可以根据屏幕的宽度、高度、方向等条件来应用不同的样式。\n\n要查询横屏和竖屏，可以使用orientation属性。orientation属性的值可以是portrait（竖屏）或landscape（横屏）。\n\n以下是一个使用媒体查询查询横屏和竖屏的示例：\n\ncss\n/* 在竖屏时应用的样式 */\n@media (orientation: portrait) {\n body {\n background-color: red;\n }\n}\n\n/* 在横屏时应用的样式 */\n@media (orientation: landscape) {\n body {\n background-color: blue;\n }\n}\n\n\n在上面的示例中，当设备处于竖屏模式时，body元素的背景颜色将为红色。当设备处于横屏模式时，body元素的背景颜色将为蓝色。\n\n通过这种方式，您可以根据屏幕的方向来应用不同的样式，以提供更好的用户体验。