移动web适配方案之rem

最新推荐文章于 2024-02-24 07:00:00 发布

LaughingHe

最新推荐文章于 2024-02-24 07:00:00 发布

阅读量203

点赞数

分类专栏： web 文章标签： html css 前端

本文链接：https://blog.csdn.net/qq_36050563/article/details/111476915

版权

web 专栏收录该内容

8 篇文章 5 订阅

订阅专栏

移动web适配方案之rem

1.概述

在我们的印象中移动web的适配有：百分比适配、flex适配（其实也是一种百分比）、bootstrap的栅格系统。而以上这几种方案只能做到宽度的适配，不能做到高度的适配。这时候就要使用rem进行适配了。

2.什么是rem

rem是相对单位,是基于html根元素的font-szie计算出来的。默认情况下浏览器的根元素的font-szie是16px。那么1rem=16px,那这样的话我们是不是可以通过媒体查询来改变html根元素的font-size,然后css页面中涉及px单位的都使用rem,来达到适配的效果呢？

3.换算逻辑

在这里插入图片描述

看这张图，比如我们的原型图是基于320px的设备进行设计的。我们这个页面上有个标题是320*50的标题。这个时候我们可以将320设备上的html根元素的font-size设置成比如50这只是一个基准值，怎么好计算怎么设置。这样css中的标题的宽高换算成rem就是宽：6.4rem和高：1rem。而如果到了640px设备上的话。按说宽：640px,高：100px才能达到适配的效果。因为这边有个公式：50/320=x/640。所以得出x等于100px。这样的话在640px的设备上html根元素的font-szie就是100px。这样的话css中还是6.4rem✖1rem不用动。这样就达到了适配的效果。

4.实战

我们还是以上面的标题适配为例，看看代码如何编写。这里我们以iphone6为例。宽为375px。html中font-size的基准值我们随便设置成50px。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>移动web之rem适配</title>
    <style>
        * {
            margin: 0;
            padding: 0;
        }

        @media (min-width: 375px) {
            html {
                font-size: 50px;
            }
        }

        @media (min-width: 414px) {
            html {
                font-size: 55.2px;
            }
        }

        .title {
            width: 100%;
            height: 1rem;
            background-color: hotpink;
            text-align: center;
            font-size: 0.4rem;
            line-height: 1rem;
        }
    </style>
</head>
<body>
<div class="title">
    标题
</div>
</body>
</html>