1、百分比布局：
使用百分比布局实现移动端的自适应布局，可以让页面元素随设备屏幕的大小自动适应缩放，从而实现不同设备的自适应。下面是具体的实现步骤：
1.1
在CSS中，使用百分比作为元素的宽高、边距等属性值。
例如，如果设计稿中某个元素的宽度为375px，那么在样式中应该设置其宽度为100%（相对于父元素），再设置padding、margin等。
.example {
width: 100%; /* 相对于父元素 */
padding: 10% 5%; /* 相对于元素宽度 */
margin: 5% auto; /* 相对于元素宽度 */
box-sizing: border-box; /* 让padding不影响元素实际宽度 */
}
1.2
在HTML中，设置viewport的宽度为设备宽度，并设置initial-scale为1，表示不缩放。这样，元素的宽度就会根据设备宽度自动缩放。
<head>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
</head>
1.3
在响应式设计中，可以使用媒体查询来针对不同的设备尺寸设置不同的样式。例如，当设备宽度小于等于768px时，设置某个元素的宽度为80%。
@media (max-width: 768px) {
.example {
width: 80%; /* 相对于父元素 */
}
}
通过以上步骤，就可以使用百分比布局实现移动端的自适应布局了。不同设备的屏幕大小，页面元素都会自动缩放，保证在任何设备上都能有良好的显示效果。同时，可以通过媒体查询针对不同设备尺寸设置不同的样式，进一步优化移动端的显示效果。
2、rem：
rem单位是相对于根元素html的字体大小来计算，这样可以在不同屏幕尺寸下保持一定比例的大小关系。例如，当html的字体大小为16px时，1rem等于16px。下面是具体的实现步骤：
2.1
在html中设置字体大小为设备宽度的1/10。这里的1/10是可以根据实际情况调整的，根据需求设置即可。
html {
font-size: calc(100vw / 10); /* 设备宽度的1/10 */
}
2.2
在设置样式时，使用rem作为单位。例如，如果设计稿中某个元素的宽度为375px，那么在样式中应该设置其宽度为23.4375rem（375/16）。
.example {
width: 23.4375rem; /* 设计稿中为375px */
}
2.3
由于不同设备像素比的存在，需要在head中设置viewport的参数，并使用JS动态改变html的字体大小，以达到适配不同设备的效果。
<head>
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no">
<script>
// 获取dpr
var dpr = window.devicePixelRatio || 1;
// 计算缩放比例
var scale = 1 / dpr;
// 设置viewport
document.querySelector('meta[name="viewport"]').setAttribute('content', 'width=device-width, initial-scale=' + scale + ', maximum-scale=' + scale + ', user-scalable=no');
// 动态设置html字体大小
function setFontSize() {
var html = document.documentElement;
var width = html.clientWidth;
html.style.fontSize = width / 10 + 'px'; /* 设备宽度的1/10 */
}
setFontSize();
window.onresize = function() {
setFontSize();
}
</script>
</head>
3、媒体查询：
使用媒体查询是实现移动端自适应布局的常见方法之一。媒体查询可以根据不同的设备宽度、设备朝向等条件，设置不同的CSS样式，从而实现不同设备上的自适应。下面是具体的实现步骤：
3.1
在CSS中，设置默认样式，并在需要针对不同设备尺寸设置不同样式的位置，使用@media规则来设置媒体查询条件和样式。
/* 默认样式 */
.example {
width: 100%;
padding: 20px;
font-size: 16px;
}
/* 当设备宽度小于等于768px时，设置样式 */
@media (max-width: 768px) {
.example {
font-size: 14px;
}
}
/* 当设备宽度小于等于480px时，设置样式 */
@media (max-width: 480px) {
.example {
padding: 10px;
font-size: 12px;
}
}
3.2
在HTML中，设置viewport的宽度为设备宽度，并设置initial-scale为1，表示不缩放。这样，页面元素的宽度就会根据设备宽度自动缩放。
<head>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
</head>
通过以上步骤，就可以使用媒体查询实现移动端的自适应布局了。根据不同的设备宽度、设备朝向等条件，设置不同的CSS样式，让页面在任何设备上都能有良好的显示效果。
4、vh，vw
使用vh、vw实现移动端的自适应布局，可以让页面元素随设备屏幕的大小自动适应缩放，从而实现不同设备的自适应。vh和vw分别是相对于视窗高度和宽度的单位，1vh等于视窗高度的1%，1vw等于视窗宽度的1%。下面是具体的实现步骤：
4.1
在CSS中，使用vh、vw作为元素的宽、高等属性值。例如，设计稿中某个元素的宽度为375px，那么在样式中应该设置其宽度为30vw（375/屏幕宽度 * 100）。
.example {
width: 30vw; /* 相对于视窗宽度 */
height: 50vh; /* 相对于视窗高度 */
margin: 5vh 10vw; /* 相对于视窗宽度和高度 */
}
4.2
在HTML中，设置viewport的宽度为设备宽度，并设置initial-scale为1，表示不缩放。这样，元素的宽度就会根据设备宽度自动缩放。
<head>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
</head>
4.3
在响应式设计中，可以使用媒体查询来针对不同的设备尺寸设置不同的样式。例如，当设备宽度小于等于768px时，设置某个元素的宽度为50vw。
@media (max-width: 768px) {
.example {
width: 50vw; /* 相对于视窗宽度 */
}
}
通过以上步骤，就可以使用vh、vw实现移动端的自适应布局了。不同设备的屏幕大小，页面元素都会自动缩放，保证在任何设备上都能有良好的显示效果。同时，可以通过媒体查询针对不同设备尺寸设置不同的样式，进一步优化移动端的显示效果。
需要注意的是，在设计移动端自适应布局时，应该考虑到不同屏幕尺寸、分辨率和方向等因素，保证网页在各种设备上都能够有良好的浏览体验。
