编写一个移动端的按照百分比布局的页面
时间: 2024-03-18 19:40:35 浏览: 61
好的,下面是一个简单的移动端页面按照百分比布局的代码示例:
```html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Mobile Page</title>
<style>
/* 设置整个页面的宽度为100% */
html, body {
width: 100%;
height: 100%;
margin: 0;
padding: 0;
}
/* 设置头部的高度为10% */
header {
height: 10%;
background-color: #333;
color: #fff;
text-align: center;
line-height: 10%;
}
/* 设置内容区域的高度为70% */
main {
height: 70%;
text-align: center;
}
/* 设置底部的高度为20% */
footer {
height: 20%;
background-color: #333;
color: #fff;
text-align: center;
line-height: 20%;
}
</style>
</head>
<body>
<header>Header</header>
<main>Main Content</main>
<footer>Footer</footer>
</body>
</html>
```
在这个示例中,我们使用了百分比布局来设置页面的头部、内容区域和底部的高度,以适应不同尺寸的移动设备。具体来说,我们将整个页面的宽度和高度都设置为100%,然后将头部、内容区域和底部的高度分别设置为10%、70%和20%。这样,无论用户使用何种尺寸的移动设备访问页面,这些元素的高度都将按照相应的百分比进行自适应布局。
阅读全文