媒体查询优化页面结构：横屏与竖屏布局差异

媒体查询可以根据设备的屏幕方向（横屏或竖屏）来调整页面的结构。以下是横屏和竖屏页面结构的变化示例：

1. 页面布局调整：

   • 在竖屏模式下，页面通常是以垂直方向布局的，元素从上到下依次排列。
   • 在横屏模式下，页面可以采用水平布局，元素从左到右排列。

2. 导航栏和菜单：

   • 在竖屏模式下，导航栏和菜单通常是垂直排列的，以适应较小的屏幕高度。
   • 在横屏模式下，导航栏和菜单可以水平排列，以利用较大的屏幕宽度。

3. 图片和视频：

   • 在竖屏模式下，图片和视频通常会根据屏幕宽度进行缩放，以适应较小的屏幕尺寸。
   • 在横屏模式下，图片和视频可以显示更多的内容，而无需进行缩放。

4. 响应式布局：

   • 在竖屏模式下，响应式布局可以根据屏幕宽度来调整元素的大小和位置。
   • 在横屏模式下，响应式布局可以根据屏幕高度来调整元素的大小和位置。

总之，媒体查询的使用可以根据设备的屏幕方向来调整页面的结构，以提供更好的用户体验。无论是横屏还是竖屏，页面结构的变化都应该符合设备的屏幕方向，并且能够适应不同的屏幕尺寸和分辨率。