html5移动端各种适配

最新推荐文章于 2024-04-13 13:14:42 发布

温凉要加油

最新推荐文章于 2024-04-13 13:14:42 发布

阅读量1.1k

点赞数 1

本文链接：https://blog.csdn.net/luvzen0127/article/details/119188179

版权

根据老师上课内容写给自己看看

首先准备一个div盒子box

<div class="box"></div>

<!DOCTYPE html>
<html lang="zh_CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Title</title>
    <link rel="stylesheet" href="./rem.css">
</head>
<body>
    <div class="box">
        
    </div>
</body>
</html>

初始样式：

.box{
  width: 345px;
  height: 100px;
  background-color: gold;
  margin: 0 auto;
  margin-top: 15.px;

}

1.rem基础

<!-- rem 相对于根标签的大小 默认 chrome-->
    <!--1rem = 16px-->
    <style>
        /* em 单位：相对于自身或者是自身的上级字体的大小*/
        html{
            font-size: 20px;
        }
        .box{
            width: 10rem;
            height: 10rem;
            background-color: greenyellow;
        }
    </style>

浏览器支持的font-size最小为12px，默认是16px

最低0.47元/天解锁文章

确定要放弃本次机会？

福利倒计时

: :

立减 ¥

普通VIP年卡可用

立即使用

温凉要加油

关注关注

1
点赞
踩
8

收藏

觉得还不错? 一键收藏
0
评论
html5移动端各种适配

首先准备一个div盒子box<div class="box"></div><!DOCTYPE html><html lang="zh_CN"><head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Title<
复制链接

扫一扫