rem布局案例

最新推荐文章于 2024-04-29 11:17:53 发布
最新推荐文章于 2024-04-29 11:17:53 发布
阅读量526 收藏 4
点赞数 1
分类专栏： html、css 文章标签： css html css3 html5
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/DcTbnk/article/details/104756607
版权

1.案例一

在这里插入图片描述

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <link rel="stylesheet" href="./iconfont/iconfont.css">
    <style>
    *{ margin:0; padding:0;}
    html{ font-size:26.666667vw;}  必须存在①
    body{ font-size:0.16rem;}    必须存在②
    ul{ list-style: none;}
    a{ text-decoration: none;}
    img{ display: block;}
    .clear:after{ content:""; display: block; clear:both;}

					必须存在 其它的数值都用alt+z 将px转化为rem③
    #main{ display: flex; height:100vh; flex-direction: column;}
    #header{ height:0.51rem; background:#0dc441;}   
    #header .header-btns{ width:1.38rem; height:0.28rem; background:rgba(255,255,255,0.2); display: flex; line-height: 0.28rem; margin:0.12rem auto; border-radius: 0.14rem; overflow: hidden;}
    #header .header-btns a{ color:#a3e9b7;}
    #header .header-btns div{ flex:1; text-align: center;}
    #header .header-btns div.active{ background:rgba(255,255,255,0.2);}
    #header .header-btns div.active a{ color:white;}

    #nav{ height:0.41rem; border-bottom: 0.01rem #d9d9d9 solid;}
    #nav ul{ height:100%; text-align: center; line-height: 0.41rem;}
    #nav ul li{ float:left; width:1.18rem; height:100%; margin-right:0.1rem; position: relative;}
    #nav ul li:last-of-type{ margin:0;}
    #nav ul a{ color:#666666;}
    #nav ul li.active a{ color:#0dc441;}
    #nav ul li.active:after{ content:""; position: absolute; left:0; bottom:-0.01rem; width:100%; height:0.04rem; background:#0dc441;}

    #list{ flex:1; overflow-x: hidden; overflow-y: auto;}
    #list ul{ width:3.8rem;}
    #list ul li{ float:left; width:1.83rem; margin-top:0.04rem; margin-right: 0.05rem;  border:0.01rem #ecf0ec solid;}
    #list ul img{ width:100%;}
    #list ul p{ font-size:0.14rem; margin-left:0.11rem; line-height: 0.34rem; border-top:0.01rem #ecf0ec solid;}

    #tabbar{ height:.51rem; border-top:0.01rem #d9d9d9 solid;}
    #tabbar .tabbar-nav{ width:3.46rem; height:100%; margin:0 auto; display: flex; justify-content: space-between; align-items: center; text-align: center; font-size:0.14rem;}
    #tabbar .tabbar-nav a{ color:#cccbcc;}
    #tabbar .tabbar-nav i{ font-size:0.22rem;}
    #tabbar .tabbar-nav div.active a{ color:#0dc441;}
    #tabbar .tabbar-nav .tabbar-nav-photo{ border:0.01rem #cccbcc solid; border-radius: 50%;; width:0.59rem; height:0.59rem; line-height: 0.59rem; background:white; position: relative; top:-0.08rem;}
    #tabbar .tabbar-nav-photo i{ font-size:0.32rem;}
    </style>
</head>
<body>
    <div id="main">
        <div id="header">
            <div class="header-btns">
                <div class="active"><a href="#">热点</a></div>
                <div><a href="#">关注</a></div>
            </div>
        </div>
        <div id="nav">
            <ul class="clear">
                <li class="active"><a href="#">足球现场</a></li>
                <li><a href="#">足球生活</a></li>
                <li><a href="#">足球美女</a></li>
            </ul>
        </div>
        <div id="list">
           <ul class="clear">
               <li>
                   <div><a href="#"><img src="./img/pic.png" alt=""></a></div>
                   <p><a href="#">樱桃小丸子樱桃小丸子</a></p>
               </li>
               <li>
                    <div><a href="#"><img src="./img/pic2.png" alt=""></a></div>
                    <p><a href="#">樱桃小丸子樱桃小丸子</a></p>
                </li>
                <li>
                    <div><a href="#"><img src="./img/pic3.png" alt=""></a></div>
                    <p><a href="#">樱桃小丸子樱桃小丸子</a></p>
                </li>
                <li>
                    <div><a href="#"><img src="./img/pic4.png" alt=""></a></div>
                    <p><a href="#">樱桃小丸子樱桃小丸子</a></p>
                </li>
                <li>
                    <div><a href="#"><img src="./img/pic.png" alt=""></a></div>
                    <p><a href="#">樱桃小丸子樱桃小丸子</a></p>
                </li>
                <li>
                     <div><a href="#"><img src="./img/pic2.png" alt=""></a></div>
                     <p><a href="#">樱桃小丸子樱桃小丸子</a></p>
                 </li>
                 <li>
                     <div><a href="#"><img src="./img/pic3.png" alt=""></a></div>
                     <p><a href="#">樱桃小丸子樱桃小丸子</a></p>
                 </li>
                 <li>
                     <div><a href="#"><img src="./img/pic4.png" alt=""></a></div>
                     <p><a href="#">樱桃小丸子樱桃小丸子</a></p>
                 </li>
                 <li>
                    <div><a href="#"><img src="./img/pic.png" alt=""></a></div>
                    <p><a href="#">樱桃小丸子樱桃小丸子</a></p>
                </li>
                <li>
                     <div><a href="#"><img src="./img/pic2.png" alt=""></a></div>
                     <p><a href="#">樱桃小丸子樱桃小丸子</a></p>
                 </li>
                 <li>
                     <div><a href="#"><img src="./img/pic3.png" alt=""></a></div>
                     <p><a href="#">樱桃小丸子樱桃小丸子</a></p>
                 </li>
                 <li>
                     <div><a href="#"><img src="./img/pic4.png" alt=""></a></div>
                     <p><a href="#">樱桃小丸子樱桃小丸子</a></p>
                 </li>
           </ul>
        </div>
        <div id="tabbar">
            <div class="tabbar-nav">
                <div class="active">
                    <a href="#">
                        <i class="iconfont icon-shouye"></i>
                        <p>首页</p>
                    </a>
                </div>
                <div>
                    <a href="#">
                        <i class="iconfont icon-Group-"></i>
                        <p>发现</p>
                    </a>
                </div>
                <div class="tabbar-nav-photo">
                    <a href="#">
                        <i class="iconfont icon-weibiaoti1"></i>
                    </a>
                </div>
                <div>
                    <a href="#">
                        <i class="iconfont icon-wode"></i>
                        <p>我的</p>
                    </a>
                </div>
                <div>
                    <a href="#">
                        <i class="iconfont icon-msnui-logout"></i>
                        <p>退出</p>
                    </a>
                </div>
            </div>
        </div>
    </div>
</body>
</html>

2.案例二

在这里插入图片描述

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <link rel="stylesheet" href="./iconfont/iconfont.css">
    <style>
    *{ margin:0; padding:0;}
    html{ font-size:26.6666667vw;}
    body{ font-size:.16rem;}
    ul{ list-style: none;}
    a{ text-decoration: none; color:#555555;}
    img{ display: block;}

    #header{ height:0.45rem; background:#00b38a; font-size:0.18rem; text-align: center; line-height: 0.45rem; color:white;}
    #login{ height:0.43rem; display: flex; justify-content: space-between; align-items: center; font-size:0.14rem;}
    #login p{ margin-left:0.16rem;}
    #login div{ width:0.84rem; height:0.3rem; background:#f5f5f5; border-radius: 0.15rem; text-align: center; line-height: 0.3rem; margin-right:0.15rem;}
    #login div a{ width:100%; height:100%; display: block;}

    #list{ border-bottom:0.01rem #e8e8e8 solid;}
    #list li{ border-top:0.01rem #e8e8e8 solid; height:0.9rem; display: flex; align-items: center;}
    #list .list-pic{ width:0.6rem; height: 0.6rem; margin-left:0.14rem; margin-right:0.1rem;}
    #list .list-pic img{ width:100%; height:100%;}
    #list .list-content{ flex:1;}
    #list .list-content h2{ font-size:0.18rem;}
    #list .list-content p:first-of-type{ font-size:0.14rem; line-height: 0.26rem; display: flex; justify-content: space-between;}
    #list .list-content p:last-of-type{ font-size:0.12rem;}
    #list .list-content span:last-of-type{ margin-right:0.14rem; color:#00b38a;}

    #more{ height:0.5rem; background:#fafafa; text-align: center; line-height: 0.5rem;}
    #more a{ width:100%; height:100%; display: block;}
    #footer{ text-align: center; font-size:0.12rem; line-height: 0.22rem; margin-top:0.27rem; margin-bottom: 0.9rem;}
    #footer a.active{ color:#999999;}
    
    #navbar{ width:100%; height:0.45rem; border-top:0.01rem #e8e8e8 solid; position: fixed; bottom:0; background:#f6f6f6; display: flex; line-height: 0.45rem;}
    #navbar div{ flex:1; text-align: center; height:100%;}
    #navbar div.active{ background: #e7f3f0;}
    #navbar div.acitve a{ color:#00b38a;}
    #navbar div span{ font-size:0.2rem; margin-right: 0.05rem; position: relative; top:0.02rem;}
    </style>
</head>
<body>
    <div id="header">
        拉勾网
    </div>
    <div id="login">
        <p>10秒钟订制职位</p>
        <div><a href="#">去登陆</a></div>
    </div>
    <ul id="list">
        <li>
            <div class="list-pic">
                <a href="#"><img src="./img/xiaomi.jpg" alt=""></a>
            </div>
            <div class="list-content">
                <h2>正大艾特</h2>
                <p>
                    <span>中级java开发工程师[上海]</span>
                    <span>13K-20K</span>
                </p>
                <p>今天 11:16</p>
            </div>
        </li>
        <li>
            <div class="list-pic">
                <a href="#"><img src="./img/xiaomi.jpg" alt=""></a>
            </div>
            <div class="list-content">
                <h2>正大艾特</h2>
                <p>
                    <span>中级java开发工程师[上海]</span>
                    <span>13K-20K</span>
                </p>
                <p>今天 11:16</p>
            </div>
        </li>
        <li>
            <div class="list-pic">
                <a href="#"><img src="./img/xiaomi.jpg" alt=""></a>
            </div>
            <div class="list-content">
                <h2>正大艾特</h2>
                <p>
                    <span>中级java开发工程师[上海]</span>
                    <span>13K-20K</span>
                </p>
                <p>今天 11:16</p>
            </div>
        </li>
        <li>
            <div class="list-pic">
                <a href="#"><img src="./img/xiaomi.jpg" alt=""></a>
            </div>
            <div class="list-content">
                <h2>正大艾特</h2>
                <p>
                    <span>中级java开发工程师[上海]</span>
                    <span>13K-20K</span>
                </p>
                <p>今天 11:16</p>
            </div>
        </li>
        <li>
            <div class="list-pic">
                <a href="#"><img src="./img/xiaomi.jpg" alt=""></a>
            </div>
            <div class="list-content">
                <h2>正大艾特</h2>
                <p>
                    <span>中级java开发工程师[上海]</span>
                    <span>13K-20K</span>
                </p>
                <p>今天 11:16</p>
            </div>
        </li>
        <li>
            <div class="list-pic">
                <a href="#"><img src="./img/xiaomi.jpg" alt=""></a>
            </div>
            <div class="list-content">
                <h2>正大艾特</h2>
                <p>
                    <span>中级java开发工程师[上海]</span>
                    <span>13K-20K</span>
                </p>
                <p>今天 11:16</p>
            </div>
        </li>
        <li>
            <div class="list-pic">
                <a href="#"><img src="./img/xiaomi.jpg" alt=""></a>
            </div>
            <div class="list-content">
                <h2>正大艾特</h2>
                <p>
                    <span>中级java开发工程师[上海]</span>
                    <span>13K-20K</span>
                </p>
                <p>今天 11:16</p>
            </div>
        </li>
        <li>
            <div class="list-pic">
                <a href="#"><img src="./img/xiaomi.jpg" alt=""></a>
            </div>
            <div class="list-content">
                <h2>正大艾特</h2>
                <p>
                    <span>中级java开发工程师[上海]</span>
                    <span>13K-20K</span>
                </p>
                <p>今天 11:16</p>
            </div>
        </li>
    </ul>
    <div id="more">
        <a href="#">加载更多</a>
    </div>
    <div id="footer">
        <p>&copy;2015 lagou.com,all right reserved</p>
        <p>
            <a href="#" class="active">移动版</a> · <a href="#">移动版</a> · <a href="#">移动版</a> 
        </p>
    </div>
    <div id="navbar">
        <div class="active">
            <a href="#"><span class="iconfont icon-home"></span>职位</a>
        </div>
        <div>
            <a href="#"><span class="iconfont icon-sousuo-"></span>搜索</a>
        </div>
        <div>
            <a href="#"><span class="iconfont icon-wode"></span>我的</a>
        </div>
    </div>
</body>
</html>

3.案例三

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

咩有猫腻.
关注
  • 1
    点赞
  • 踩
  • 4
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
(七）移动端前端开发-基于rem布局案例2
m0_56517198的博客
02-12 159
移动端前端开发，基于rem布局，制作淘宝交易成功页面头部。通过javascript代码获取设备屏幕的宽度，来调整html根节点的字体大小。使用相对单位rem设置页面字体、宽度等大小尺寸。HTML部分包含头部、交易成功、地址三部分。让页面自适应不同型号屏幕的移动设备。
rem移动端布局方案解析+案例
qq_40463625的博客
02-25 1413
rem移动端布局方案解析+案例
【CSS】872- 浅析rem布局方案
pingan8787
02-17 196
一些像素概念物理像素：即实际的每一个物理像素，也就是移动设备上每一个物理显示单元（点）设备逻辑像素（css中的px）：可以理解为一个虚拟的相对的显示块，与物理像素有着一定的比例关系，也就是...
使用rem单位实现移动端页面自适应布局——以flexible.js为例(文章结尾有详细解释)
最新发布
weixin_67244432的博客
04-29 1862
在移动端开发中，页面布局的自适应是一个重要的问题。不同的设备屏幕尺寸和分辨率要求我们的页面能够灵活地适应各种环境，确保用户获得良好的体验。在CSS中，rem单位是一个相对单位，它是相对于根元素（html）的字体大小的。通过动态地设置根元素的字体大小，我们可以方便地实现页面的自适应布局。本文将介绍如何使用来实现基于rem单位的移动端页面自适应布局，并给出一个相关的例子。是一个自执行函数，它主要用于处理移动端页面的适配问题。它的核心原理是根据设备的屏幕宽度动态地设置根元素的font-size，使得1rem。
CSS day12 移动端布局练习
qq_34620296的博客
09-13 728
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta http-equiv="X-U...
rem 布局（基础案例）
m0_49378755的博客
05-21 117
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title></title> <script> window.onload = function () { (function (window, document) { let hm = document.documentElement; let fen = 10; (fun
移动web开发-rem布局案例源码，html+css素材
02-16
总的来说，这个“移动web开发-rem布局案例”涵盖了移动Web开发的核心技术，包括REM布局、响应式设计、HTML5语义化标签和CSS3的Flexbox/Grid布局。通过深入学习和实践这些知识点，开发者可以创建出更加适应各种设备和...
移动端rem布局的两种实现方法
12-03
本文将详细介绍两种在移动端实现rem布局的常见方法：CSS媒体查询和JavaScript动态计算。 ### 方法一：CSS媒体查询 媒体查询是CSS3引入的一种特性，用于定义不同屏幕尺寸下的样式规则。在rem布局中，媒体查询常用来...
rem详细使用案例
10-23
这个"rem详细使用案例"项目就是一个简单的移动端布局示例，旨在帮助开发者快速理解和掌握`rem`单位的运用。 首先，`rem`代表“根元素的em”，这里的“根元素”通常指的是HTML元素。`rem`单位的大小取决于HTML元素的...
移动Web开发之 rem适配布局----苏宁首页案例制作
06-23
在这个“苏宁首页案例制作”中，我们将深入探讨如何利用rem单位来构建响应式的网页布局，确保在各种设备上提供一致且良好的用户体验。 首先，我们了解rem（root em）单位，它是相对于根元素（通常是html元素）的...
rem 简介
大概关于
05-03 3157
rem 是网页上的一种长度单位。 如果根节点（html 节点）的字体大小是 16px，那么： 2rem 就等同于 32px； 3rem 就等同于 48px； 1.5rem 就等同于 24px； 也就是： html{ font-size: 14px; } .target{ width: 2rem; /* 28px */ } 有时为了方便计算，会把根节点的字体设置成 10 的倍数，比如...
rem是什么
HonG
07-29 3681
rem 是一个长度单位 px，绝对长度单位，最常用 em，相对长度单位 ，相对于父元素，不常用 rem，相对长度单位，相对于根元素，常用语响应式布局
rem布局
清风的博客
08-17 1062
rem布局 1.rem rem :root em 是一个相对单位，类似于em ,em是父元素字体大小； rem的基准是相对于HTML元素字体大小 /* 根html 为 16px */ html { font-size: 16px; } /* 此时 div 的字体大小就是 32px */ div { font-size: 2rem; } 2.rem布局准备工作 基本思路...
rem实例
徐同保的专栏
11-29 582
rem实例
css中的rem的使用实例和要义说明
洛神赋
08-02 1346
&lt;html&gt; &lt;head&gt; &lt;style&gt; html { font-size: 0.625; /*根元素默认的大小是16px*/ } #peotry { font-size: 10px; } #header { f...
单位rem 触屏适配总结
weixin_34198881的博客
07-14 126
总结过的：定宽320 缩放适配手机屏幕 参考文章：web app变革之rem   先了解一下rem css3 中引入了新的长度单位，rem。 官方定义 font size of the root element rem:rem和em单位一样，都是一个相对单位。不同的是em是相对于元素的父元素的font-size进行计算；rem是相对于根元素html的font-size进行计算。...
html中rem的理解&简单运用示例
热门推荐
Jacoh的专栏
11-21 2万+
作为一名前端开发工程师，很有必要梳理并记录下自己成长过程中的问题，以温故知新。 尽量做到： 把前端开发成长中遇到的概念，原子性的拆分开，单独的去理解学习； 不添加太多个人情感化语言，以知识为中心； 会运用，不等于理解，文章侧重于理解； ？rem是什么 rem是css中的单位。 类同举例: height: 1px 表示height的值为1个css像素； vertial-align: 50...
移动Web开发——rem适配布局（完结）、苏宁首页实战
zhr_beyond的博客
03-02 753
rem适配布局（完结） 1.rem适配方案（第二种） （1）使用技术 flexible.js+rem （2）flexible.js的原理 github地址链接: https://github.com/amfe/lib-flexible. 不需要写不同的媒体查询，js做处理 原理：把设备划分成10等份，不同设备下，比例是一致的 我们要做的是确定好当前设备的 html大小 比如当前设计稿是750px，只需要把html文字大小设置为75px（750px/10） 页面元素 rem 值 = 页面元素的px值 / 7
flex布局 rem布局 grid布局
09-01
Flex布局是一种用于进行页面布局的CSS3模块，它能够让元素在容器中灵活地伸缩和对齐。...以上是对Flex布局、Rem布局和Grid布局的简要介绍。如果你有具体的问题或者需要更详细的示例代码，请告诉我。

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值