前端移动端适配是确保网页在不同尺寸和分辨率的移动设备上能够良好显示的关键技术。以下将详细介绍几种常见的移动端适配方案，并通过代码示例来具体说明。
一、百分比布局
百分比布局是基于父元素宽度的布局方式，通过百分比来定义元素的宽度或高度，从而实现响应式设计。然而，由于不同属性的百分比值可能基于不同的参照物，因此百分比布局在复杂布局中可能难以精确控制。
示例代码（简化版）：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>百分比布局示例</title>
<style>
.container {
width: 100%; /* 容器宽度占满屏幕 */
padding: 10px;
box-sizing: border-box; /* 边框和内边距包含在宽度内 */
}
.box {
width: 50%; /* 盒子宽度占容器宽度的50% */
height: 200px; /* 高度固定 */
background-color: lightblue;
}
</style>
</head>
<body>
<div class="container">
<div class="box"></div>
<div class="box"></div>
</div>
</body>
</html>
二、Flex布局
Flex布局（Flexible Box Layout）是一种更加灵活、强大的布局方式，适用于复杂布局场景。Flex布局能够轻松实现元素的对齐、分布和顺序调整。
示例代码：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Flex布局示例</title>
<style>
.container {
display: flex;
flex-wrap: wrap; /* 允许子元素换行 */
justify-content: space-around; /* 子元素之间平均分配空间 */
}
.box {
flex: 1; /* 子元素占据等宽空间 */
height: 100px;
background-color: lightgreen;
margin: 10px;
}
</style>
</head>
<body>
<div class="container">
<div class="box"></div>
<div class="box"></div>
<div class="box"></div>
</div>
</body>
</html>
三、rem布局
rem（root em）是一个相对单位，相对于HTML元素的字体大小。通过动态调整HTML元素的font-size，可以使得页面上的元素尺寸随着屏幕尺寸的变化而等比缩放。
示例代码（结合媒体查询和JavaScript）：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>rem布局示例</title>
<style>
html {
font-size: 16px; /* 默认字体大小 */
}
@media (min-width: 375px) {
html {
font-size: calc(375 / 16 * 1px); /* 根据屏幕宽度动态调整font-size */
}
}
/* 更多媒体查询... */
.box {
width: 5rem; /* 使用rem单位定义宽度 */
height: 3rem;
background-color: lightcoral;
}
</style>
</head>
<body>
<div class="box"></div>
<script>
// JavaScript动态调整font-size
function adjustFontSize() {
const html = document.documentElement;
const width = html.clientWidth || document.body.clientWidth;
html.style.fontSize = `${
width / 16}px`; // 假设设计稿宽度为320px，基准font-size为16px
}
adjustFontSize();
window.addEventListener('resize', adjustFontSize);
</script>
</body>
</html>
四、vw/vh单位
vw（Viewport Width）和vh（Viewport Height）是视口单位，分别表示视口宽度的1%和视口高度的1%。这些单位非常适合用于响应式设计，因为它们直接基于视口大小。
示例代码：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>vw/vh单位示例</title>
<style>
.box {
width: 80vw; /* 宽度占视口宽度的80% */
height: 50vh; /* 高度占视口高度的50% */
background-color: lightgrey;
}
</style>
</head>
<body>
<div class="box"></div>
</body>
</html>
以上代码示例展示了百分比布局、Flex布局、rem布局以及vw/vh单位在前端移动端适配中的应用。根据项目的具体需求，可以选择适合的方案来实现页面的响应式设计。
