移动端rem布局

最新推荐文章于 2021-08-05 22:10:26 发布
最新推荐文章于 2021-08-05 22:10:26 发布
阅读量288 收藏
点赞数
文章标签： css html js css3
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/LPKJJSHSSB/article/details/104574952
版权

经过一周的逆战学习，知道了移动端布局，下面是我的个人经验：
所谓rem布局，就是想办法去动态改变html标签的font-size大小，这样就可以适配不同的设备进行等比缩放，从而有效地适应各种移动端。
了解rem布局需要了解rem单位，我么可以从最开始的em单位来说，em单位是一个相对单位，1em等于当前元素或父元素的font-size值，而rem是相对于根元素的font-size值，
相当于1rem = 1个根元素的font-size大小 就是 1个html标签的font-size大小
知道上述概念后，我们就知道，需要让页面适配移动端，就应该添加页面html的font-size值,使其转换单位，适配移动端：
我们动态改变html的方法有两种：
1.通过JS （JavaScript）

<script>
	 var html = document.getElementsByTagName('html')[0];
	 var number = document.documentElement.clientWidth / 3.75;
	 html.style.fontSize = number + 'px';
</script>

因为iphone6，等移动端界面不容易换算，让其变为100,方便用户更容易换算
2.通过vw （vw是尺寸单位）相对单位：表示把屏幕自动分成了100vw宽和100vh高
vw -> view width
vh -> view height
vw / vh : 把屏幕分为100份，1vw等于屏幕宽的1%。
意思是当屏幕为375时，则100vw就等于375px
若屏幕为414时，则100vw就等于414px
那在屏幕为375px时，1vw就等于3.75px,那么100px就等于26.66667vw,
则在html处写上html{font-size:26.66667vw}，然后就可以自己写页面了，将页面在375px屏幕下的距离以及字号，包括px相关单位，测量出来，然后通过100px=26.66667vw，换算出对应的vw单位值，简单方法：通过vscode编码工具中的一个插件 -> px to rem -> 在设置把对应的font-size设置为你的换算单位值，这就是100。-> alt + z进行px转rem的操作。
注：
1.当设计师给你的设计图在375px以上可以通过ps的画布大小调整为375px,如果设计给的时一套图，那么就根据设计师的图来做，做完之后在来调整换算单位，假如设计师给的时750px的，那么我们就可以通过375px为100vw，那么750px为多少？vw，然后将其作为工具的换算单位，按下alt+z就可以实现rem布局
2.在html设置了font-size的情况下，我们需要将html重置一下，防止页面布局混乱，我们可以在html下加一个body{font-size=16px}
通过以上内容，我做的一个小案例：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link rel="stylesheet" href="./font_1660555_9nezdjkvhf8/iconfont.css">
    <title>Document</title>
    <style>
        *{
            margin: 0;
            padding: 0;
        }
        html{
            font-size: 26.66667vw;
        }
        body{
            font-size: 16px;
        }
        ul{
            list-style: none;
        }
        img{display: block;}
        a{
            text-decoration: none;
        }
        header{
            width: 3.75rem;
            height: 0.44rem;
            display: flex;
            justify-content: center;
            align-items: center;
            color: #fefefe;
            background-color: #02d1c5;
            font-size: 0.17rem;
        }
        .nav{
            width: 3.75rem;
            height: 0.66rem;
            background-color: #fff;
            display: flex;
            justify-content: center;
            align-items: center;
        }
        .nav input{
            width: 2.5rem;
            height: 0.25rem;
            display: block;
            outline: none;
            border: none;
            border-radius: 0.025rem;
            background-color: #f3f3f3;
            text-indent: 0.35rem;
        }
        .nav .icon-fangdajing{
            font-size: 0.15rem;
            position: relative;
            left: 0.25rem;
            color: #ababab;
        }
        .banner{
            width: 3.75rem;
            height: 1.5rem;
            overflow: hidden;
            position: relative;
        }
        .banner .banner-pic{
            width: 100%;
            height: 100%;
        }
        .banner .banner-pic li{
            width: 100%;
            height: 100%;
            float: left;
        }
        .banner .banner-pic img{
            width: 100%;
            height: 100%;
        }
        .banner .banner-dot{
            height: 0.05rem;
            font-size: 0rem;
            margin-left: -0.145rem;
            text-align: center;
            position: absolute;
            left: 50%;
            bottom:0.165rem;
        }
        .banner .banner-dot li{
            width: 0.03rem;
            height: 0.03rem;
            margin-right: 0.03rem;
            border: 0.01rem solid #fff;
            border-radius: 50%;
            float: left;
        }
        .banner .banner-dot .active{
            background-color: #fff;
        }
        .tab{
            width: 3.75rem;
            height: 0.87rem;
            display: flex;
            justify-content:space-evenly;
            align-items: center;
        }
        .tab .tab_menu{
            width: 1.65rem;
            height: 0.5rem;
            box-shadow: 0.025rem 0.025rem 0.025rem #e9e8e8;
            border-radius: 0.025rem;
        }
        .tab .tab_menu a{
            width: 100%;
            height: 100%;
            display: flex;
            align-items: center;
        }
        .tab .tab_menu a span{
            font-size: 0.25rem;
            color: #23d0c4;
            margin-left: 0.245rem;
            margin-right: 0.18rem;
        }
        .tab .tab_menu a p{
            color: #23d0c4;
            font-size: 0.15rem;
            margin-right: 0.245rem;
        }
        .list{
            width: 3.45rem;
            margin: 0rem 0.15rem;
            margin-bottom: 0.66rem;
        }
        .list h2{
            width: 100%;
            height: 0.19rem;
            line-height: 0.19rem;
            font-size: 0.17rem;
            color: #666666;
            text-indent: 0.35rem;
        }
        .list .list-sublist li{
            width: 100%;
            height: 1.25rem;
            margin: 0.08rem auto;
            overflow: hidden;
            background-position: center center;
            background-size: cover;
            position: relative;
            border-radius: 0.05rem;
        }
        .list .list-sublist span{
            display: block;
            width: 100%;
            height: 1.25rem;
            background-color: #000;
            opacity: 0.5;
            line-height: 1.25rem;
            text-align: center;
            color: #fff;
            font-size: 0.18rem;
            position: absolute;
            left: 0;
            top: 0;
        }
        .footer{
            width: 3.75rem;
            height: 0.49rem;
            background-image: linear-gradient(#f2f2f2 5%,#fff);
            position: fixed;
            bottom: 0;
        }
        .footer .footer-list{
            width: 100%;
            height: 100%;
            display: flex;
            justify-content: space-around;
            align-items: center;
        }
        .footer .footer-list li:nth-of-type(3){
            width: 0.495rem;
            height: 0.495rem;
            border-radius: 50%;
            background-color: #02d1c5;
            margin-bottom: 0.5rem;
            display: flex;
            justify-content: center;
            align-items: center;
        }
        .footer .footer-list li:nth-of-type(3) span{
            color: #fff;
        }
        .footer .footer-list li span{
            font-size: 0.245rem;
            color: #666666;
        }
        .footer .footer-list li p{
            font-size: 0.13rem;
            color: #666;
        }
        .footer .footer-list .active p{
            color: #02d1c5;
        }
        .footer .footer-list .active span{
            color: #02d1c5;
        }
    </style>
</head>
<body>
    <header>
        食谱推荐
    </header>
    <div class="nav">
        <span class="iconfont icon-fangdajing"></span><input type="text" name="" id="">
    </div>
    <div class="banner">
        <ul class="banner-pic">
            <li><img src="./images/1.png" alt=""></li>
            <li><img src="./images/1.png" alt=""></li>
            <li><img src="./images/1.png" alt=""></li>
            <li><img src="./images/1.png" alt=""></li>
        </ul>
        <ul class="banner-dot">
            <li class="active"></li>
            <li></li>
            <li></li>
            <li></li>
        </ul>
    </div>
    <div class="tab">
        <div class="tab_menu">
            <a href="./list1.html">
                <span class="iconfont icon-jingyu7"></span>
                <p>三餐推荐</p>
            </a>
        </div>
        <div class="tab_menu">
            <a href="./list.html">
                <span class="iconfont icon-cailanzi"></span>
                <p>食物库</p>
            </a>
        </div>
    </div>
    <div class="list">
        <h2>精品好菜</h2>
        <ul class="list-sublist">
            <li style="background-image: url(./images/list1.png);">
                <a href="./content.html">
                    <span>金枪鱼的幻想曲</span>
                </a>
            </li>
            <li  style="background-image: url(./images/list2.png);">
                <a href="">
                    <span>早餐的诱惑</span>
                </a>
            </li>
            <li  style="background-image: url(./images/list2.png);">
                <a href="">
                    <span>进击的鸡小胸</span>
                </a>
            </li>
            <li  style="background-image: url(./images/list2.png);">
                <a href="">
                    <span>进击的鸡小胸</span>
                </a>
            </li>
            <li  style="background-image: url(./images/list2.png);">
                <a href="">
                    <span>进击的鸡小胸</span>
                </a>
            </li>
        </ul>
    </div>
    <div class="footer">
        <ul class="footer-list">
            <li>
                <a href="">
                    <span class="iconfont icon-home"></span>
                    <p>首页</p>
                </a>
            </li>
            <li class="active">
                <a href="">
                    <span class="iconfont icon-shipu"></span>
                    <p>食谱</p>
                </a>
            </li>
            <li>
                <a href="">
                    <span class="iconfont icon-addTodo-nav"></span>
                </a>
            </li>
            <li>
                <a href="">
                    <span class="iconfont icon-faxian"></span>
                    <p>发现</p>
                </a>
            </li>
            <li>
                <a href="">
                    <span class="iconfont icon-wode"></span>
                    <p>我的</p>
                </a>
            </li>
        </ul>
    </div>
</body>
</html>
爱篮球的程序猿
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
H5移动端开发之基础字体大小设置
juliotang的博客
03-15 5315
前段时间接触了h5移动端的开发，移动端字体大小不同于pc端一般直接用px单位，而是经常用rem作为基础单位，常规做法使用1rem=100px的换算方式，如果设计稿是375px作为整个屏幕端度的话，那么我们换算过的屏幕宽度则为3.75rem；如果设计稿是450px的话，屏幕宽度则为4rem。具体设置方法见如下代码： <script> fnResize() window.onresize = function () { fnResize() } function fnResi
rem详细介绍与实际开发使用
gongliming_qd的博客
11-19 1343
作用 : 解决前端工作中移动端适配问题 基本概念 rem rem 是啥? rem等于css中html中font-size设定的值, 如下代码: 当font-size设置为75px, 在box设置width的值设置为1rem, 那么此时的1rem 等于 75px html { font-size: 75px; } .box { /* 75px === 1rem */ width: 1rem; } 提出等分概念? 假设我有一个750px的设计.
rem单位的使用
lw_yl
09-26 5018
1.对rem单位的简单认识： rem是css3中新增加的一个单位属性(font size of the root element),根据页面的根节点的字体大小进行转变的单位。而根节点就是节点。 2.对rem单位的简单换算： 我们知道，浏览器默认的字号16px，来看一些px单位与rem之间的转换关系： 12px/16px=0.75rem 14px/16px=0.875rem 16px/16px=1r...
rem做响应式
weixin_43996362的博客
02-25 307
rem 1.浏览器默认字体大小为16px。 2.rem兼容性： IE9+、火狐、谷歌、safari、欧朋主流版本都支持了 rem。 食用方法：（html根元素 + 百分比 + 媒体查询） rem只是相对于根元素html标签的font-size，即px与rem的换算都基于html根元素的大小来算的。如：要设置 16px为1rem，那么根元素html就设置为100%（16px / 浏览器默认字体大小）以此类推。 html设置之后，其他元素都按 需要的字体大小 / 跟元素 字体大小 换算为rem来设置即可，如
1.rem和em单位的使用
扛麻袋的少年的博客
03-08 3143
区别： 相同点：二者都是相对单位 不同点：rem（font size of the root element）是指相对于根元素的字体大小的单位， em（font size of the element）是指相对于父元素的字体大小的单位。它们之间其实很相似，只不过一个计算的规则是依 赖根元素一个是依赖父元素计算。 px：...
rem布局---个人首页设计
寻常的博客
08-05 213
运行结果 index.html <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0" /> <meta http-e...
移动端REM布局与ViewportVW布局的实例运用
08-10
**一、REM布局** 1. **REM（Root Em）介绍** REM是以根元素（通常是html元素）的字体大小为单位的长度单位。通过调整根元素的字体大小，可以实现整个页面的响应式设计。这种方式允许开发者设定一个基准值，然后...
rem:移动端rem布局
05-09
移动端rem布局rem：相对长度单位。相对于根元素(即html元素)font-size计算值的倍数 ./js/rem.js中 默认设计稿宽度为640 1rem =100px 可自行修改HOW TO USE设置移动端网页专用的viewport meta，至少需要包含width=...
详解H5 活动页之移动端 REM 布局适配方法
09-27
本文将深入探讨移动端REM布局的适配方法，这是H5活动页实现响应式设计的关键技术。 首先，我们需要理解什么是REM（Root EM）。REM是一个相对于根元素（通常是html元素）font-size的长度单位。这意味着，如果我们...
移动端rem布局的两种实现方法
09-27
现在有两种rem布局的样式控制，其中一种是通过css的媒体查询，另外一种是通过引入js来控制，这两种方法各有各的优点，但是我还是喜欢用引入js的方法来实现rem布局
页面适配之pt、px、em、rem用法和特点
小小喵的博客
08-10 1万+
因为自己也经常做移动端的开发工作，现总结一份页面适配的笔记。 1. pt 点（Points），绝对长度单位。 印刷业上常使用的单位，磅的意思，一般用于页面打印排版。 不知道经常做设计的同学知不知道zeplin这个网站，它用的像素单位都是pt。 1in = 2.54cm = 25.4 mm = 101.6q = 72pt = 6pc = 96px 用法： div { font-...
所请求vi未加载至服务器内存_前端面试题（2020自己所遇到过的面试题）
weixin_42510670的博客
12-21 262
以下是2020年自己面试时所遇到的面试题，欢迎大家补充一些奇葩的面试题（有些问题的答案可能不太完整，欢迎大家补充）1.讲一下this？this 既不指向函数自身，也不指函数的词法作用域。this具体指向什么，取决于你是怎么调用的函数。this的4种绑定规则分别是：默认绑定、隐式绑定、显示绑定、new 绑定。优先级从低到高。什么叫默认绑定，即没有其他绑定规则存在时的默认规则。这也是函数调用中最常用的...
1rem等于多少px (rem和px怎样转换)
热门推荐
会点php的前端小渣渣
06-17 6万+
1rem等于html根元素设定的font-size的px值 如果css里面没有设定html的font-size，则默认浏览器以1rem=16px来换算。 假如我们在css里面设定下面的css html{font-size:14px} 那么后面的CSS里面的rem值则是以这个14来换算。 例如设定一个div宽度为3rem,高度为2.5rem. 则它换算成px为width:42px.height:35px 同理，假如一个设计稿为宽度42px,高度为35px 则换成rem，则是4...
【移动端适配方案一 弹性布局】@media标签+rem+viewport实现移动端屏幕适配
劲枫的博客
06-25 1万+
另一篇布局 方案：【移动端适配方案二 弹性布局】Flex弹性布局+rem实现移动端适配（JS+rem+viewport） 一、从设计稿说起： 采用rem来布局，其实设计稿是多大都没有关系，设计稿给480、600或者750都可以，其他尺寸也可以，你就想成它是一张A4纸，然后这些数字只是对这张纸的最大计量单位。反正一张图就那么大，无论计量单位是多少，UI设计师能够在一张A4上给的东西都是一样的。比...
移动端适配解决方案rem的js换算（非font-size:31.25vw,非font-size:62.5%）
xiasohuai的博客
11-11 841
在这之前做web app开发的的时候，在自适应方面一般都是宽度通过百分比，高度以iPhone6跟iPhone5之间的一个平衡值写死，我们的设计稿都是iPhone5的640 * 1136标准，所以高度一般取个大概值，各种图标的宽高也是取平衡值写死，然后部分样式通过媒体查询来设置，例如背景图的多倍图、基础字体大小、图标宽高。 这样做的弊端很明显： 1. 做出来的页面在各种手机端看起来的物理大小（高度...
一行css代码轻松实现前端响应式布局（vw+rem）
weixin_34318956的博客
12-08 392
大家知道rem可以用来做响应式布局，只是html元素上的font-size样式需要根据屏幕宽度来指定。 之前有用@media媒体查询，根据各种屏幕宽度写html的样式，也用过类似lib-flexible这样的js库动态改变html样式，总觉得挺麻烦的。 今天突然想到vw这个单位，发现用它来做响应式布局实在太方便了。 只需一行css： ht...
移动端rem布局之逆战班系列二
王 濤
03-01 292
时光荏苒，岁月如梭。愉快的周末又到啦！经过这一周的时间，我们学到了移动端的布局。 简单说一下哈，移动端布局简单分为两种布局方式： 流式布局。 它的好处是在大屏的情况下，可以显示更多的内容。 坏处是在宽屏情况下我们的显示比例会变得有些不协调。 rem布局。 好的，到了咱们今天要说的rem布局啦！ 它的好处是在不同设备下（也就是屏幕的大小）内容结构会比较协调。也就是我们的内容会随着屏幕的大小进...
rem布局，能等比例缩放的布局
weixin_44392027的博客
03-25 865
html如下（这是一个简单的移动端案例） <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> &lt...
rem自适应移动端布局
wimenlo的前端博客
12-10 3842
现在的移动终端 以前，实现移动端适配的时候，我使用CSS3 @media 监测视口宽度，根据不同宽度实现不同的布局，从而实现一套CSS适配所有终端（PC，移动）。虽说听起来很方便，但实际上工作量也是相当多的，那有什么方法可以更简单地去适配移动端呢？
移动端rem布局与高清适配深度解析
移动端rem布局与高清适配是现代移动开发中至关重要的一部分，特别是在处理不同屏幕尺寸和像素密度的问题上。rem（root em）是一种基于相对单位的布局方式，它通过设定html元素的font-size属性来调整整个页面的布局，...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值