一、怎么让HTML自适应屏幕大小

在移动设备的浏览器中使用HTML时，一定要考虑页面的自适应问题。为了让HTML页面自适应不同尺寸的屏幕，开发人员可以采用以下几种方法： 1、使用Viewport Meta标签
Viewport Meta标签是用来告诉浏览器这个网站的最初视口的设定。我们可以利用这个标签来设置网页的缩放比例、宽度和高度，以让页面自适应不同尺寸的屏幕。

<meta name="viewport" content="width=device-width,initial-scale=1.0,maximum-scale=1.0,user-scalable=no">

2、使用CSS3的@media查询
CSS3 @media查询可以根据不同的设备、不同的屏幕大小和不同的分辨率调用不同的CSS文件，从而实现页面的自适应。以下是一个通过@media查询来实现页面自适应的例子：

/* 以下是通过 @media 查询实现自适应布局的实例 */
@media screen and (min-width: 480px) {
  /* 手机端横屏（竖屏会忽略该样式） */
  body {
    background-color: lightgreen;
  }
}
@media screen and (min-width: 768px) {
  /* 平板电脑 */
  body {
    background-color: lightblue;
  }
}
@media screen and (min-width: 992px) {
  /* 桌面显示器 */
  body {
    background-color: lightgray;
  }
}

二、HTML自适应屏幕代码

以下是一个基于Viewport Meta标签和CSS3的@media查询实现HTML自适应屏幕的代码示例：

<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>HTML自适应屏幕大小</title>
<style>
  body {
    padding: 0;
    margin: 0;
  }
  .box {
    width: 100%;
    height: 500px;
    background-color: gray;
    text-align: center;
    line-height: 500px;
    font-size: 48px;
    color: white;
  }
  @media screen and (max-width: 480px) {
    .box {
      font-size: 24px;
      height: 300px;
      line-height: 300px;
    }
  }
  @media screen and (min-width: 480px) and (max-width: 768px) {
    .box {
      font-size: 36px;
      height: 400px;
      line-height: 400px;
    }
  }
</style>
<div class="box">自适应屏幕</div>