您的位置:首页 > 移动开发

移动端rem布局

2020-03-08 14:13 976 查看

移动端rem布局

在了解移动端rem布局之前我们先搞清楚rem是什么,px em rem之间有什么区别。

PX
px像素(Pixel),相对长度单位。像素px是相对于显示器屏幕分辨率而言的。

EM
em,相对长度单位。相对于当前对象内文本的字体尺寸。如当前对行内文本的字体尺寸未被人为设置,则相对于浏览器的默认字体尺寸。一般浏览器默认字体尺寸大小为16px,这时,1em=16px。

REM
rem是CSS3新增的一个相对单位(root em,根em),使用rem为元素设定字体大小时,仍然是相对大小,但相对的只是HTML根元素。通过它可以做到只修改根元素就成比例地调整所有字体大小。移动端设备的尺寸大小不是固定的,因此rem特别适合移动端布局。我们只需要改变html标签font-size的大小,就可以适配不同的设备。如何做到font-size动态化呢?在这里我们通过vw来实现。

vw (vw是尺寸单位)
vw -> view width
vh -> view height
它们是相对单位:表示把屏幕自动分成了100vw宽和100vh高
vw/vh:把屏幕分为100份,1vw等于屏幕宽的1%
假设屏幕是375px -> 100vw -> 1vw == 3.75px
假设屏幕是414px -> 100vw -> 1vw == 4.14px
iphone6 -> html的font-size -> 100px
1vw == 3.75px ->多少个vw?== 100px -> 26666.7vw
iphone6 plus -> html的font-size
1vw ==4.14px -> 266666.7*4.14px -> 110.4px

接下来我们做个实例,通过REM布局实现:

这个是我们要实现的效果图,首先先把定义html文字大小

html{ font-size:26.666667vw;}

这里要注意一点,因为我们默认是在ipnone6设备下进行设置,当设备改变的时候,文字大小也会变化,所以要给body重置font-size

body{ font-size:0.16rem;}


图片整体可以分为六部分,利用弹性布局来实现纵向排列,通过 flex-direction:colum 设置主轴为纵向,进行布局。

这里有个小技巧,利用VS Code中的“px to rem”插件可以快速的进行px与rem的换算,在红框内设置100,1rem=100px,选中需要换算的代码,快捷键Alt+Z就可以转换了。

以下是代码:
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;}

#main{display: flex; flex-direction: column; height: 100vh;}

#header{ color: white; height: 0.44rem; background: #02d1c5; text-align: center; line-height: 0.44rem; font-size: 0.18rem;}

#serch{ height: 0.66rem;}
#serch div span{ font-size: 0.16rem; position: relative; left: 20%; top: 50%;}
#serch div input{ border: none; background: #f3f3f3; width: 2.5rem; height: 0.25rem; margin-top: 0.2rem; margin-left: 0.49rem; border-radius: 0.05rem;}

#pic{ position: relative; overflow: hidden; height: 1.5rem;}
#pic .pic-case{ height: 100%;}
#pic .pic-case img{ height: 100%;}
#pic .icon{width: 0.36rem; height: 0.05rem;}
#pic .icon ul{ position: absolute; left: 1.71rem; bottom: 0.15rem; }
#pic .icon ul li{float: left; width: 0.02rem; height: 0.02rem; border: 0.01rem white solid; border-radius: 50%; margin-right: 0.06rem;}
#pic .icon ul .active{background: white;}

#content{ height: 0.82rem; display: flex; justify-content: space-evenly; align-items: center; }
#content div p{ font-size: 0.16rem; color: #02d1c5;line-height: 0.5rem; text-indent: 0.79rem;}
#content div:first-of-type{ width: 1.65rem; height: 0.5rem; background: url(./arrow1.png) no-repeat 0.25rem 0.125rem; background-size: 0.36rem 0.25rem; box-shadow: 0.02rem 0.02rem 0.1rem rgba(0, 0, 0, .3);border-radius: 0.05rem;}
#content div:last-of-type{  width: 1.65rem; height: 0.5rem; background: url(./arrow2.png) no-repeat 0.25rem 0.125rem; background-size: 0.36rem 0.25rem; box-shadow: 0.02rem 0.02rem 0.1rem rgba(0, 0, 0, .3);border-radius: 0.05rem;}

#case{ flex:1; overflow: auto;}
#case  p{ height: 0.54rem; font-size: 0.16rem; color: #666666; text-indent: 0.35rem; line-height: 0.54rem;}
#case div{ width: 3.45rem; height: 1.25rem; background-position:center center; background-size:cover; margin-bottom:0.15rem ;  border-radius: 0.4rem; overflow: hidden; margin-left: 0.15rem;}
#case div span{ display: block; font-size: 0.2rem; color: white; text-align: center; line-height: 1.25rem; background: rgba(0, 0, 0, .3); }

#footer{ height: 0.49rem; background: #f7f7f7; }
#footer .footer-nav { justify-content: space-around; display: flex; }
#footer .footer-nav .active a{color: #04d1c5; }
#footer .footer-nav div a{ color: #666666;}
#footer .footer-nav span{ font-size: 0.25rem;}
#footer .footer-nav p{ font-size: 0.14rem;}
#footer .footer-nav div:nth-of-type(3){width: 0.5rem; height: 0.5rem;  font-size: 0.21rem; border-radius:50%; background: #04d1c5; text-align: center; line-height: 0.5rem; position: relative; top:-0.2rem;}
#footer .footer-nav div:nth-of-type(3) a{color: white;}
</style>
<div id="main">
<div id="header">
<p>菜谱推荐</p>
</div>

<div id="serch">
<div>
<span class="iconfont icon-sousuo"></span>
<input type="text">
</div>
</div>

<div id="pic">
<div class="pic-case"><img src="./pic1.png" alt=""></div>
<div class="icon">
<ul class="clear">
<li class="active"></li>
<li></li>
<li></li>
<li></li>
</ul>
</div>
</div>

<div id="content">
<div>
<p>三餐推荐</p>
</div>
<div>
<p>食物库</p>
</div>
</div>

<div id="case">
<p>精品好菜</p>
<div style="background: url(./pic2.png);">
<span>金枪鱼的幻想曲</span>
</div>
<div style="background: url(./pic3.png);">
<span>早餐的诱惑</span>
</div>
<div style="background: url(./pic4.png);">
<span>进击的鸡小胸</span>
</div>
</div>

<div id="footer">
<div class="footer-nav">
<div>
<a href="#">
<span class="iconfont icon-tubiao115"></span>
<p>主页</p>
</a>
</div>
<div class="active">
<a href="#" >
<span class="iconfont icon-caidan"></span>
<p>食谱</p>
</a>
</div>
<div>
<a href="#">
<span class="iconfont icon-jiahao"></span>
</a>
</div>
<div>
<a href="#">
<span class="iconfont icon-faxian"></span>
<p>发现</p>
</a>
</div>
<div>
<a href="#">
<span class="iconfont icon-mine"></span>
<p>我的</p>
</a>
</div>
</div>
</div>
</div>

在iphone6/7/8下的宽度为为375px

在iphone 6/7/8 plus下的宽度为414px

这样就实现了rem布局

  • 点赞
  • 收藏
  • 分享
  • 文章举报
ab_dk 发布了6 篇原创文章 · 获赞 0 · 访问量 56 私信 关注
内容来自用户分享和网络整理,不保证内容的准确性,如有侵权内容,可联系管理员处理 点击这里给我发消息
标签: