移动端rem布局实例

最新推荐文章于 2022-08-07 17:28:10 发布

kkkkzmt

最新推荐文章于 2022-08-07 17:28:10 发布

阅读量648

点赞数 1

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

版权

逆战班学生记录：

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: center;line-height: 0.88rem;font-size: 0.34rem;color:#ffff;}
        /* 搜索栏 */
        #search{height: 1.32rem;}
        #search .bor{width: 5rem;height: 0.5rem;margin:0.39rem auto;background:#f3f3f3;}
        #search .icon41{margin-left: 0.18rem;}
        /* 大图 */
        #banner{height: 3rem;position: relative;}
        #banner img{width: 100%;height: 100%;}
        #banner .banner-dot{width:100%;position: absolute;left: 0;bottom: 0.3rem;text-align: center;font-size:0;}
        #banner .banner-dot li{width:0.1rem;height:0.1rem;border:0.01rem solid #fffefd;border-radius: 50%;cursor: pointer;display: inline-block; margin:0 0.07rem;font-size:0.14rem;}
        #banner .banner-dot .active{background: #fff;}
        /* 推荐 */
        #rec{height: 1.4rem;display: flex;justify-content: space-evenly;align-items: flex-end;}
        #rec div{display: flex; width: 3.3rem;height:1.02rem;box-shadow:0.03rem 0.03rem 0.05rem rgb(129, 127, 127);justify-content: space-evenly;}
        #rec div a{color: #23d1c5;line-height: 1.02rem;}

        /* 菜 */
      /* #dish{flex:1; overflow-x: hidden; overflow-y: auto;} */
         #dish h1{font-size: 0.3rem;color: #666666;margin-left: 0.39rem ;margin-top: 0.7rem;margin-bottom: 0.2rem;font-weight: bold;}
        #dish div {width:6.9rem;height: 2.5rem;margin: 0 auto;background: red;margin-bottom:0.36rem ;}
        #dish div a{display: block;width: 100%;height: 100%;text-align: center;line-height: 2.5rem;font-size: 0.38rem;font-weight: bolder;color:#fff;}
        #dish div:nth-of-type(1){background: url(../img/5.png) no-repeat center center;background-size: cover;}
        #dish div:nth-of-type(2){background: url(../img/6.png) no-repeat center center;background-size: cover;}
        #dish div:nth-of-type(3){background: url(../img/7.png) no-repeat center center;background-size: cover;}
        #dish div:nth-of-type(4){background: url(../img/5.png) no-repeat center center;background-size: cover;}
        /* 底部 */
        #footer{height: 1rem;display: flex;justify-content: space-around;width: 100%;font-size: 0.26rem;align-items: center;background: #fff;}
        #footer .iconfont{font-size: 0.5rem;}
        #footer .dif{border:1px #cccbcc solid; border-radius: 50%;; width:1rem; height:1rem; line-height:1rem; background:#02d1c5; position: relative; top:-0.47rem;}
        #footer img{width: 100%;height: 100%;}
        #footer div.active {color:#02d1c5}
        .hhh{flex:1;  overflow: auto;}
    </style>
    <link rel="stylesheet" href="../iconfont/iconfont.css">
</head>
<body>
    <div id="main">
    <!-- 头部 -->
    <div id="header">
        <h2>菜谱推荐</h2>
    </div>
    <!-- 搜索 -->
    <div id="search">
        <div class="bor">
            <span class="iconfont icon41"></span>
        </div>
    </div>
    <div class="hhh">
    <!-- 大图 -->
    <div id="banner">
        <img src="../img/1.png" alt="">
        <ul class="banner-dot">
            <li class="active"></li>
            <li></li>
            <li></li>
            <li></li>
        </ul>
    </div>
    <!-- 推荐 -->
    <div id="rec">
        <div>
            <img src="../img/2.png" alt="">
            <a href="./食谱2.html">三餐推荐</a>
        </div>
        <div>
            <img src="../img/3.png" alt="">
            <a href="#">食物库</a>
        </div>
    </div>
    <!-- 精品好菜列表 -->
    <div id="dish">
        <h1>精品好菜</h1>
        <div>
          <a href="#">金枪鱼的幻想</a> 
        </div>
        <div>
            <a href="#">早餐的诱惑</a> 
          </div>
          <div>
            <a href="#">进击的鸡小胸</a> 
          </div>
          <div>
            <a href="#">进击的鸡小胸</a> 
          </div>
    </div>
</div>
    <!-- 尾部 -->
    <div id="footer">
        <div>
            <div class="iconfont iconzhuye"></div>
            <span>主页</span>
        </div>
        <div class="active">
            <div class="iconfont iconwenben "></div>
            <span>食谱</span>
        </div>
        <div class="dif">
            <img src="../img/jiahao.png" alt="">
        </div>
        <div>
            <div class="iconfont iconfaxian"></div>
            <span>发现</span>
        </div>
        <div>
            <div class="iconfont iconwode"></div>
            <span>我的</span>
        </div>
    </div>
</div>
</body>
</html>

截图：在这里插入图片描述

不同设备均能适应其像素。

rem布局优缺点：

优点：不同设备下看起来比较协调
缺点：因为成比例缩放，在大屏幕上显示内容不会太多。

kkkkzmt

关注

1
点赞
踩
4

收藏

觉得还不错? 一键收藏
2
评论
移动端rem布局实例

逆战班学生记录：rem理解：em是一个相对单位，1em等于当前元素或父元素的font-size值rem是指相对于根元素的字体大小的单位。简单的说它就是1个html标签的font-size大小。rem的布局原理：先根据设计图量取高度，想办法动态改变html标签的font-size大小，然后转换成rem，从而适配不同设备进行等比例缩放。这里如何使font-size动态化？我采用通过vw（...
复制链接

扫一扫