1. 使用Viewport标签

Viewport标签是一种特殊的HTML meta标签，可以让移动设备自动调整页面的展示比例和大小，使页面可以适应不同大小的屏幕。可以在HTML文件头部添加以下代码。

“`
<meta name=”viewport” content=”width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no”>
“`

其中，width=device-width表示页面的宽度等于设备的宽度，initial-scale=1表示初始缩放比例为1，maximum-scale=1表示最大缩放比例为1，user-scalable=no表示禁止用户手动缩放页面。

2. 使用CSS3媒体查询

CSS3媒体查询是一种可以根据设备不同的特性和尺寸，调整页面样式的技术。可以在CSS样式表中添加以下代码。

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

}
“`

其中，max-width表示当设备宽度小于等于480px时，应用该样式。可以在媒体查询内定义不同的样式，以适应不同的设备。

3. 弹性布局

弹性布局（Flexbox）是一种用于移动设备自适应的布局技术。可以通过在父元素中设置display:flex，来让子元素自动适应父元素宽度，并根据设备尺寸自动调整元素排列。可以在CSS样式表中添加以下代码。

“`
.container {
display: flex;
flex-direction: row;
justify-content: space-around;
align-items: center;
}
“`

其中.container是父元素，flex-direction表示子元素排列方式为横向，justify-content表示子元素沿主轴方向（水平方向）的对齐方式为两端对齐，并且元素之间有间距，align-items表示子元素沿侧轴方向（垂直方向）的对齐方式为居中对齐。

4. Rem布局

Rem布局是一种根据根元素的字体大小来设置元素大小的技术。可以通过在根元素的CSS样式中设置font-size来实现。可以在CSS样式表中添加以下代码。

“`
html {
font-size: 16px;
}
body {
font-size: 1rem;
}
“`

其中，html元素是根元素，在这里设置了字体大小为16px，然后在body元素中使用1rem作为基准大小，其他元素的大小可以根据这个基准适应不同的设备尺寸。