【HTML+CSS】移动WEB开发之rem布局
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Rem Layout Example</title>
<style>
/* 基本字体大小设置为10px，方便后续计算 */
html {
font-size: 10px;
}
/* 使用rem单位设置元素宽度、高度、边距、填充等属性 */
.box {
width: 6rem; /* 60px */
height: 4rem; /* 40px */
margin: 1.5rem; /* 15px */
padding: 1rem; /* 10px */
border: 0.1rem solid #000; /* 1px */
font-size: 1.4rem; /* 14px */
line-height: 1.6rem; /* 16px */
}
/* 响应式视口宽度大于640px时，重置基本字体大小为16px */
@media (min-width: 640px) {
html {
font-size: 16px;
}
}
</style>
</head>
<body>
<div class="box">这是一个使用rem单位布局的盒子</div>
</body>
</html>这个例子中，我们设置了html的基本字体大小为10px，并且在样式中使用rem单位来设置元素的宽度、高度、边距、填充和文本大小。同时，我们添加了一个媒体查询，当屏幕宽度大于640px时，将html的字体大小重置为16px，这样可以保证在大屏幕上的显示效果。这个例子展示了如何使用rem单位进行移动端WEB开发的布局。
评论已关闭