移动端rem布局
移动端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布局
- 点赞
- 收藏
- 分享
- 文章举报
- html rem布局,在移动端超级好用,自适应效果非常好!
- 项目开发之rem加媒体查询实现移动端布局
- 移动端网页 rem 自适应布局
- 移动端自适应布局----rem字体
- 最新移动端rem布局
- rem自适应布局-移动端自适应必备:flexible.js
- 移动端布局最佳实践(viewport+rem)
- 移动端布局字体单位的选择之px、rem和em揭秘
- 浅谈css3长度单位rem,以及移动端布局技巧
- 移动端rem布局雪碧图解决方案 以及分享腾讯团队的在线雪碧图工具
- 移动端布局之REM,以及实际使用总结
- 移动端rem布局(阿里)
- 移动端网页 rem 自适应布局
- 关于移动端rem 布局的一些总结
- rem移动端自适应布局JS
- 关于移动端 rem 布局的一些总结
- 移动端页面使用rem布局
- 移动端的自适应rem布局
- REM布局计算,移动端,pc端有兼容性)
- client系列与移动端rem布局