html文件前端页面 做样式自适应rem 代码
时间: 2024-01-17 14:03:20 浏览: 42
可以使用以下代码实现基于 rem 的自适应布局:
```html
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>rem 自适应布局示例</title>
<style>
/* 以下为基于 rem 的自适应布局代码 */
html {
font-size: 62.5%;
/* 1rem = 10px, 10px * 62.5% = 6.25px */
}
body {
font-size: 1.6rem;
/* 1.6rem = 16px */
}
.box {
width: 6.4rem;
/* 6.4rem = 64px */
height: 3.6rem;
/* 3.6rem = 36px */
}
</style>
</head>
<body>
<div class="box">这是一个自适应的盒子</div>
</body>
</html>
```
在上述代码中,我们通过设置 html 的 font-size 为 62.5%(即 1rem = 10px),然后通过设置 body 的 font-size 为 1.6rem(即 16px),就可以实现基于 rem 的自适应布局。在样式中,我们可以直接使用 rem 作为单位,比如设置宽度为 6.4rem(即 64px),高度为 3.6rem(即 36px),这样就可以实现自适应布局。
相关推荐
![pdf](https://img-home.csdnimg.cn/images/20210720083512.png)
![zip](https://img-home.csdnimg.cn/images/20210720083736.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)