1. 使用meta标签设置viewport

在head标签中添加以下meta标签设置viewport属性，让页面根据设备屏幕大小自适应缩放。

“`
<meta name=”viewport” content=”width=device-width, initial-scale=1.0″>
“`

2. 使用媒体查询

使用CSS的媒体查询功能，根据屏幕宽度设置不同的样式，让页面以不同的方式显示。

“`
@media only screen and (max-width: 768px) {

}

@media only screen and (min-width: 768px) and (max-width: 1024px) {

}

@media only screen and (min-width: 1024px) {

}
“`

3. 使用弹性布局

使用弹性布局（flexbox）可以更方便地实现页面的自适应。

“`
.container {
display: flex;
flex-wrap: wrap;
}

.box {
flex: 1 1 200px;
margin: 10px;
}
“`

以上是一些主要的方法，根据实际情况可以选择其中一种或多种方式进行适配。