rem适配 - 简单讲解和案例

小卷卷不动了

已于 2022-05-09 11:19:28 修改

阅读量371

点赞数 2

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

于 2022-05-07 09:35:14 首次发布

本文链接：https://blog.youkuaiyun.com/weixin_47293087/article/details/124623800

版权

前端专栏收录该内容

2 篇文章

订阅专栏

对rem适配的理解

使用媒体查询根据不同设备按比例设置html的字体大小，然后页面元素使用rem做尺寸单位，当html字体大小变化元素尺寸也会发生变化，从而达到等比缩放的适配。

自适应示例网站

星巴克官网

简单案例

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        body{
            margin: 0px;
            padding: 0px;
        }
        /* 媒体查询设置不同屏幕下的 html 的字号 */
        /* 设计图参考 750px */
        /* 将屏幕划分为 15 份 */
        /* 字号 = 屏幕宽度 / 15 */
        @media only screen and (max-width:750px){ /* 使用min-width或max-width的效果是不同的 */
        /* width小于或者等于max-width，采用{...}的样式 */
        /* width大于或者等于min-width，采用{...}的样式 */
            html{font-size: 50px;} /* 750px/15=50px */
        }
        @media only screen and (max-width:414px){
            html{font-size: 27.6px;} /* 414px/15=27.6px */
        }
        @media only screen and (max-width:375px){
            html{font-size: 25px;} /* 375px/15=25px */
        }
        .title{font-size: 0.75rem;} /* font-size:37.5px */
        .content{font-size: 0.32rem;} /* font-size:16px */
        img{width: 1rem;} /* 50px */
        .box1{
            width: 1rem; /* 50px */
            height: 1rem;
            background-color:antiquewhite
        }
        .box2{
            width: 2rem;
            height: 2rem;
            background-color:antiquewhite
        }
        .box3_75{
            width: 3.75rem;
            height: 3.75rem;
            background-color:antiquewhite
        }
        .box7_5{
            width: 7.5rem;
            height: 7.5rem;
            background-color:antiquewhite
        }
        .box15{
            width: 15rem;
            height: 15rem;
            background-color:antiquewhite
        }
    </style>
</head>
<body>
    <div class="title">
        天行健，君子以自强不息。(414-750标题37.5px)<br>
        天行健，君子以自强不息。(375-414标题20.7px)<br>
        天行健，君子以自强不息。(0-375标题18.75px)
    </div>
    <div class="content">
        我才21岁，我好累。(414-750正文内容16px)<br>
        我才21岁，我好累。(375-414正文内容12px)<br>
        我才21岁，我好累。(0-375正文内容12px)
    </div>
    <img src="./img/二维码.jpg" alt="">
    <div class="box1"></div>
    <div class="box2"></div>
    <div class="box3_75"></div>
    <div class="box7_5"></div>
    <div class="box15"></div>
</body>
</html>