1. 使用Viewport

Viewport是一个虚拟的窗口，它可以让浏览器按照设备的宽度进行布局。使用Viewport可以确保页面在任何设备上都显示正常。

在head标签中添加以下代码：

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

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

2. 使用rem

rem是相对于根元素（html元素）字体大小的单位。根据根元素的不同字体大小，可以动态地调整页面中元素的大小。

在css样式表中设置根元素的字体大小，并使用rem作为尺寸单位。

“`css
html{
font-size: 100%;
}
h1{
font-size: 2rem;
}
“`

在移动设备上，根元素字体大小为16px，而在桌面设备上，根元素字体大小为12pt。因此，在移动设备上，h1元素大小为32px（2rem*16px），在桌面设备上，h1元素大小为24pt（2rem*12pt）。

3. 使用媒体查询

媒体查询是一种根据设备特性（如宽度、高度、屏幕方向等）来控制页面样式的技术。使用媒体查询可以为不同设备设置不同的样式。

在css样式表中使用媒体查询：

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

}
“`

其中，@media表示媒体查询，screen表示设备类型为屏幕，max-width: 480px表示屏幕宽度小于480px时生效。可以在{}中设置该条件下的样式。

4. 使用Flex布局

Flex布局（Flexbox）是一种灵活的CSS布局方式，可使元素在容器内自适应布局，适合移动端页面的展示。使用Flex布局可以使页面元素的尺寸和位置根据容器大小自动调整。

在容器元素中使用以下CSS属性：

“`css
display: flex;
flex-wrap: wrap;
justify-content: center;
align-items: center;
“`

其中，display: flex表示启用Flex布局，flex-wrap: wrap表示使子元素自动换行，justify-content: center表示使子元素水平居中，align-items: center表示使子元素垂直居中。