Rem是如何实现自适应布局的？

时间 2021-01-30

标签 css html 前端前端工程师 app iphone ide 布局测试字体栏目 CSS 繁體版

原文原文链接

做为前端工程师的咱们，在h5页面布局的过程当中会使用rem布局，你们都知道rem是相对长度单位，可是做为前端的咱们该如何去让rem布局自适应iphone四、iphone六、iphone六、iphone6plus的呢？css

那咱们都看到天猫在手机网页端中，是根据手机大小的不同去自适应的，那么咱们接下来让咱们本身的h5网页的页面自适应手机设备html

1、首先咱们先看一下拥有几亿用户的淘宝天猫是怎么作的呢？前端

iphone4前端工程师

iphone6app

iphone 6 plusiphone

咱们看到整个页面中改变了根元素html中的属性font-size的大小，就作到让按钮中字体的大小发生变化。ide

2、使用在本身的项目中布局

咱们使用rem在页面中作一个按钮：测试

<style>
    html{
        font-size:32px;
    }
    .btn {
        height: 1.2rem;
        line-height: 1.2rem;
        font-size: 0.43rem;
        margin:0 2rem;
        background: #06c;
        color: #fff;
        border-radius: 5px;
        text-decoration: none;
        text-align: center;
        letter-spacing:0.2rem;
    }
</style>
<body>
  <div class="btn">肯定</div>
</body>

接着有两种方案字体

① 咱们能够像淘宝同样，经过使用js去控制根元素中html的font-size的大小，进而改变按钮的大小。

② 也可使用本身的知识点，使用css媒体查询去设置页面中根元素的font-size属性。

我这里就介绍使用css媒体查询设置font-size的属性，

@media screen and (min-width: 310px) {
    html{
        font-size:34px;
    }
}
@media screen and (min-width: 360px) {
    html{
        font-size:37.5px;
    }
}
@media screen and (min-width: 410px) {
    html{
        font-size:41.4px;
    }
}

最后咱们能够去谷歌中去测试，结果以下图

这就是我对rem自适应布局的研究和理解的总结，但愿对你们有帮助，我会持续进步更新个人知识库，嘻嘻*_*