怎么在移动端布局中实现动态rem-创新互联

怎么在移动端布局中实现动态rem？针对这个问题，这篇文章详细介绍了相对应的分析和解答，希望可以帮助更多想解决这个问题的小伙伴找到更简单易行的方法。

创新互联建站于2013年创立，是专业互联网技术服务公司，拥有项目成都做网站、成都网站建设网站策划，项目实施与项目整合能力。我们以让每一个梦想脱颖而出为使命，1280元汉中做网站,已为上家服务,为汉中各地企业和个人服务,联系电话:028-86922220

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的宽度，实现了整体缩放

为了看到效果，要将这一部分删除

怎么在移动端布局中实现动态rem

但这种整体缩放的用户体验并不好，所以pass，我们来讲百分比布局

百分比布局

//百分比布局



    
        选项1

选项2

选项3

选项4

为了让选项方块的高度是宽度的一半，实现该效果我们需要知道屏幕的宽度，再来确定选项的宽度和高度

这里可以使用vw，但vw的兼容性比较差，我们可以使用rem来代替vw

首先rem是以html的font-size为基准的，所以我们可以让html的font-size==pageWidth

为了更好的使用rem,这里1rem等于屏幕宽度的10分之1。注意不能做到1rem==屏幕的百分之1。因为浏览器的最小font-size是12px ;

选项1 选项2 选项3 选项4

可以看到宽度和高度都能按百分比变化了，但是我们会发现一个很麻烦的东西，设计师给我们的设计稿，我们却必须把每个元素的像素单位换算为rem。这里我们就要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-创新互联

扫二维码与项目经理沟通

其他资讯

行业动态

企业网站建设的重要性！

服务项目

网站建设

移动端/APP

微信/小程序

技术支持

其它服务

更多服务项目

联系吧在百度地图上找到我们

电话：13518219792

怎么在移动端布局中实现动态rem-创新互联

扫二维码与项目经理沟通

其他资讯

行业动态

企业网站建设的重要性！

服务项目

网站建设

移动端/APP

微信/小程序

技术支持

其它服务

更多服务项目

联系吧 在百度地图上找到我们

电话：13518219792

联系吧在百度地图上找到我们