网页代码如何适配移动端？媒体查询怎么写？

在当今的网页设计中，适配移动端已成为一个不可或缺的部分。随着智能手机的普及，如何让网页在不同设备上都能呈现出良好的用户体验，成为了开发者们关注的焦点。本文将深入探讨网页代码如何适配移动端，并详细解析媒体查询的编写方法。

一、响应式设计的重要性

随着移动设备的多样化，用户访问网页的方式也在不断变化。响应式设计能够确保网页在不同屏幕尺寸和分辨率下都能自适应显示，从而提升用户体验。媒体查询是实现响应式设计的关键技术之一。

二、媒体查询的基本概念

媒体查询是一种CSS技术，它允许开发者根据不同的设备特性（如屏幕宽度、分辨率等）来应用不同的样式规则。通过媒体查询，我们可以为移动端设备编写特定的CSS代码，使其在移动设备上呈现出最佳的显示效果。

三、媒体查询的编写方法

媒体查询的编写主要依赖于@media规则。以下是一个简单的媒体查询示例：

@media screen and (max-width: 600px) {
  / 在屏幕宽度小于或等于600px时应用的样式 /
  body {
    font-size: 14px;
  }
}

在这个示例中，当屏幕宽度小于或等于600px时，body元素的字体大小将被设置为14px。

四、媒体查询的高级应用

除了基本的屏幕宽度查询外，媒体查询还支持多种设备特性查询，如设备像素比、屏幕方向等。以下是一个更复杂的媒体查询示例：

@media screen and (min-device-pixel-ratio: 2) and (orientation: portrait) {
  / 在设备像素比大于或等于2且屏幕方向为竖屏时应用的样式 /
  img {
    max-width: 100%;
  }
}