媒体查询是一种CSS技术，能够根据设备的特性（如宽度、高度、分辨率等）调整网页的布局和样式。通过使用媒体查询，可以使网站在不同的设备上呈现良好的用户体验。
在使用媒体查询时，主要关注的是视口宽度和高度。可以通过以下方法来实现适配：
1. 使用`@media`规则来定义不同的样式。例如，可以针对屏幕宽度小于768像素的设备设置样式。
```css @media (max-width: 768px) { body { background-color: lightblue; } } ```
2. 制定不同的布局。对于手机设备，可以采用单列布局，而对桌面设备可以使用多列布局。
```css @media (max-width: 600px) { .container { display: block; /* 单列布局 */ } } @media (min-width: 601px) { .container { display: grid; /* 多列布局 */ } } ```
3. 针对不同设备的字体大小及其他元素的调整。小设备上的文字通常需要稍大一些以便更好阅读。
```css @media (max-width: 400px) { p { font-size: 16px; } } @media (min-width: 401px) { p { font-size: 18px; } } ```
4. 媒体查询支持多个条件的组合，通过逻辑运算符如“and”来组合条件，提升适配效果。
```css @media (min-width: 600px) and (max-width: 1200px) { .sidebar { display: block; } } ```
5. 使用`orientation`属性针对横屏和竖屏设备进行样式调整。例如，调整横屏模式下的菜单展示方式。
```css @media screen and (orientation: landscape) { .menu { display: flex; } } @media screen and (orientation: portrait) { .menu { display: none; } } ```
设计响应式网站时，对图片和视频等媒体元素进行大小控制也十分重要。通常可以使用百分比来定义宽度，使其适应不同屏幕。
通过这些方式结合合理的设计理念，可以确保网站在各种设备上都能良好运作。让用户可以无缝切换设备，同时提供一致的体验。