屏幕自适应

要在 HTML 中实现自适应设备屏幕，你可以使用响应式设计技术。以下是一些常用的方法：

1.视口（Viewport）设置

在 HTML 文档的<head>部分，使用<meta>标签设置视口，以确保页面在不同设备上正确缩放。常见的设置如下：

html

<meta name="viewport" content="width=device-width, initial-scale=1.0" />

这行代码告诉浏览器视口的宽度应等于设备的宽度，并将初始缩放比例设为 1。

CSS 的 Flexbox 和 Grid 布局可以帮助创建响应式布局。例如：

css

.container {
  display: flex;
  flex-wrap: wrap;
}
.item {
  flex: 1 1 auto;
}

这段代码可以让子元素在容器中根据屏幕尺寸自动调整大小。

使用 CSS 媒体查询针对不同的屏幕尺寸应用不同的样式。

css

@media (max-width: 768px) {
  .container {
    flex-direction: column;
  }
}

这段代码在屏幕宽度小于 768px 时，将容器布局从水平改为垂直。

使用百分比（%）、em、rem等相对单位代替固定的像素单位，以便元素根据屏幕尺寸自动缩放。

css

.box {
  width: 50%;
  padding: 1em;
}

使用 CSS 设置图片的最大宽度为 100%，以确保图片不会超出其容器。

css

img {
  max-width: 100%;
  height: auto;
}