移动端rem布局实例

最新推荐文章于 2024-04-29 11:17:53 发布

kkkkzmt

最新推荐文章于 2024-04-29 11:17:53 发布

阅读量729

点赞数 1

本文链接：https://blog.csdn.net/weixin_42668319/article/details/104569878

版权

本文介绍了移动端rem布局的概念，强调了rem相对于根元素字体大小的特性，并详细讲解了rem布局的原理，通过vw单位实现font-size动态化。还提供了一个实际的布局实例，展示了如何根据设计图将尺寸转换为rem，确保在不同设备上实现等比例缩放。最后，分析了rem布局的优点——在不同设备上保持视觉协调，但同时也指出其缺点，即在大屏幕设备上可能会导致内容显示不足。

摘要由CSDN通过智能技术生成

逆战班学生记录：

rem理解：

em是一个相对单位，1em等于当前元素或父元素的font-size值
rem是指相对于根元素的字体大小的单位。简单的说它就是1个html标签的font-size大小。

rem的布局

原理： 先根据设计图量取高度，想办法动态改变html标签的font-size大小，然后转换成rem，从而适配不同设备进行等比例缩放。这里如何使font-size动态化？我采用通过vw（尺寸单位），这样不用用到js（后期学习再补充完整）也可实现font-size动态化。
vw —— 视口宽度的 1/100；
vh —— 视口高度的 1/100 ；

rem布局实例

例如：设计图宽750px,（可以选择都写完之后统一转换成rem）
假设iPhone6的html的font-size为100px，1vw=7.5px，所以font-size=100/(100/750)=13.33333vw

        html{
   font-size: 13.333333vw;}
        body{
   font-size: 16px;}
       /* 在body中要重置默认font-size值*/

在这里插入图片描述
注：可以用辅助工具计算px和rem的转换，在vs-code下载插件“px-to-rem”->设置font-size值->alt+z进行切换。
具体代码如下：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        html{
   font-size: 13.333333vw;}
        body{
   font-size: 16px;}
        *{
   margin: 0;padding: 0;}
        ul{
   list-style: none;}
        img{
   display: block;}
        a{
   text-decoration: none;}
        h1,h2,h3{
   font-size: 0.34rem;font-weight: normal;}
        #main{
    display: flex; height:100vh; flex-direction: column;}
        /* 头部 */
        #header{
   height:0.88rem;background: #02d1c5;text-align