【CSS面试题】CSS响应式

最新推荐文章于 2023-02-08 14:42:20 发布

VIP文章 Milk595

最新推荐文章于 2023-02-08 14:42:20 发布

阅读量372

点赞数 1

分类专栏： CSS 前端面试文章标签： css 面试

本文链接：https://blog.csdn.net/weixin_43352901/article/details/107417147

版权

1. rem是什么?

rem是一个长度单位

px是绝对长度单位，最常用（但无法做响应式）
em，相对长度单位，相对于父元素，不常用
rem,相对长度单位，相对于根元素，常用于响应式布局

核心代码演示：

初始化：

  <style>
    html{
   
       font-size: 100px;
    }
    div{
   
        background-color: #ccc;
        margin-top: 10px;
    }
    </style>
</head>
<body>
    
    <p>rem 1</p>
    <p>rem 1</p>
    <p>rem 1</p>

    <div>
        this is div1
    </div>
    <div>
        this is div2
    </div>
    <div>
        this is div3
    </div>

</body>

在这里插入图片描述
第一步，针对div,设置font-size:0.16rem;

 html{
   
       font-size: 100px; /*1rem等于html根元素设定的font-size的px值*/
    }
    div{
   
        background-color: #ccc;
        margin-top: 10px;
        font-size: 0.16rem;

最低0.47元/天解锁文章

优惠劵

Milk595

关注关注

1
点赞
踩
2

收藏

觉得还不错? 一键收藏
0
评论
【CSS面试题】CSS响应式

1. rem是什么?rem是一个长度单位px是绝对长度单位，最常用（但无法做响应式）em，相对长度单位，相对于父元素，不常用rem,相对长度单位，相对于根元素，常用于响应式布局核心代码演示：初始化： <style> html{ font-size: 100px; } div{ background-color: #ccc; margin-top: 10px; } </style>
复制链接

扫一扫