怎么在移动端布局中实现动态rem?针对这个问题,这篇文章详细介绍了相对应的分析和解答,希望可以帮助更多想解决这个问题的小伙伴找到更简单易行的方法。
1. 首先我们先介绍当下的长度单位
px
像素
em
一个M的宽度 / 一个汉字的宽度 1em == 自身的font-size
rem
全称root em
是根元素(html)的font-size
vh
全称viewport height
100vh == 视口高度
vw
全程viewport width
100vw == 视口宽度
因为网页的默认font-size:16px 所以1rem默认是16pxchrome
的最小字体像素默认是12px
一个元素在没有设置font-size的情况下会去继承父元素的font-size
2. 移动端的布局
移动端的布局一般就两种
一是整体缩放
二是百分比布局
先说整体缩放
整体缩放,其实就是将pc端的网页缩小到手机端屏幕能看到网页全貌的大小
苹果手机刚出来时就是使用这种布局,苹果公司研究发现世界上大多数的网页宽度是980px,然而苹果手机的宽度像素是320px,所以苹果手机的浏览器用320像素的屏幕宽度去模拟980px的宽度,实现了整体缩放
为了看到效果,要将<meta name="viewport">
这一部分删除
<style> div{ width:980px; margin:0 auto; background:#f0f0f0; } ul{ list-style:none; } li{ float:left; margin-left:10px; } clearfix::after{ content:""; display:block; clear:both; } </style> </head> <body> <div> <ul> <li>选项1</li> <li>选项2</li> <li>选项3</li> <li>选项4</li> <li>选项5</li> <li>选项6</li> </ul> </div> </body>
但这种整体缩放的用户体验并不好,所以pass,我们来讲百分比布局
百分比布局
//百分比布局 <style> .child{ background-color:#ccc; text-align:center; width:40%; margin:10px 5%; float:left; } .clearfix::after{ content:""; display:block; clear:both; } </style> </head> <body> <div class="parent clearfix"> <div class="child">选项1</div> <div class="child">选项2</div> <div class="child">选项3</div> <div class="child">选项4</div> </div> </body>
可以看到百分比布局能自动适应屏幕宽度。
但是百分比布局有个缺点,宽度和高度不能做任何关联
可以看上面的gif图,宽度一直变长,然而高度没有变化
为了让选项方块的高度是宽度的一半,实现该效果我们需要知道屏幕的宽度,再来确定选项的宽度和高度
这里可以使用vw,但vw的兼容性比较差,我们可以使用rem来代替vw
首先rem是以html的font-size为基准的,所以我们可以让html的font-size==pageWidth
<script> let pageWidth = window.innerWidth; document.write('<style>html{font-size:'+ pageWidth/10 +'px}</style>') </script>
为了更好的使用rem,这里1rem等于屏幕宽度的10分之1。注意不能做到1rem==屏幕的百分之1。因为浏览器的最小font-size是12px
;
按如上改动代码
<style> .child{ background-color:#ccc; text-align:center; width:4rem; height:2rem; margin:10px 0.05rem; float:left; line-height:2rem; } .clearfix::after{ content:""; display:block; clear:both; } </style> </head> <body> <div class="parent clearfix"> <div class="child">选项1</div> <div class="child">选项2</div> <div class="child">选项3</div> <div class="child">选项4</div> </div> </body>
效果入图
可以看到宽度和高度都能按百分比变化了,但是我们会发现一个很麻烦的东西,设计师给我们的设计稿,我们却必须把每个元素的像素单位换算为rem。这里我们就要scss来换算px了
3.scss动态换算px
@function pxToRem($px){ @return $px/$designWidth*10+rem;//10是把整个屏幕分为10rem } $designWidth:320;//设计稿宽度 .child{ background-color:#ccc; text-align:center; width:pxToRem(128);//4rem; height:pxToRem(64);//2rem; margin: 10px pxToRem(1.6); float:left; line-height:pxToRem(64); } .clearfix::after{ content:""; display:block; clear:both; }
关于怎么在移动端布局中实现动态rem问题的解答就分享到这里了,希望以上内容可以对大家有一定的帮助,如果你还有很多疑惑没有解开,可以关注创新互联行业资讯频道了解更多相关知识。
新闻标题:怎么在移动端布局中实现动态rem-创新互联
文章分享:https://www.cdcxhl.com/article30/heeso.html
成都网站建设公司_创新互联,为您提供网站维护、企业网站制作、品牌网站建设、云服务器、网页设计公司、标签优化
声明:本网站发布的内容(图片、视频和文字)以用户投稿、用户转载内容为主,如果涉及侵权请尽快告知,我们将会在第一时间删除。文章观点不代表本网站立场,如需处理请联系客服。电话:028-86922220;邮箱:631063699@qq.com。内容未经允许不得转载,或转载时需注明来源: 创新互联