👀作者小三是刚刚毕业不久全栈工程师,写的技术文章基本上是学习过程中笔记整理而来,大家看了之后如果喜欢可以给小弟点点赞哦。
👀例外小弟还有个程序员交流群,欢迎各位大佬来摸鱼哈。点击加群
我们作为前端初学者来说,是不是有一个疑惑,我们电脑屏幕大,但是手机屏幕小,那我在PC端页面写好的东西到了手机端岂不是很难看?
所以!我在这里将会给你们介绍关于rem的适配方案
关于rem的适配方案?
-
适配的目的是什么?
-
原理是什么
-
怎么做?
带着这三个疑问,我们一起来看看rem
适配的目的是什么?
肯定是为了适应在不同的设备下,我们写出来的效果差别不大,如果我们只按照PC端来开发,如果用户用手机打开这个页面,那肯定是用起来很难受。
而且,如果我们为了去适配某一台手机,而再去写一个样式,那岂不是工作量更大,更何况市面上的手机品类这么多,屏幕大小不一,什么刘海屏什么的,那工作量可想而知!
原理是什么
我们这就来看看。实现rem的原理是什么?
一. 根据UI给我们的设计稿与设备宽度的大小比例,动态的计算然后去设置html的字体大小(font-size);然后页面大小根据一个公式去规范元素的大小
二. 根据设计稿元素的宽,高的取值,根据同比例换算为rem单位的值
怎么做?
首先,我们以iphone6为例子,因为我们常用开发都是以iphone6作为移动端的例子来换算,这里为什么就需要您们自己去百度了。
less + @media(媒体查询) + rem
我们假设UI给我们的设计稿是750px的,然后呢我们把屏幕划分为15等份(看个人需求,15到20等份也是可以的),然后每一份作为HTML的文字大小,然后750除以15也就是50px,那么当我们在宽度为375px的设备的时候,字体大小的换算就是375除上15等分,算出结果25px,然后用页面元素的大小除以不同HTML字体大小,你会发现比例还是一样的,
比如一个100乘100像素大小的盒子在750屏幕下,就是100除以50转换为rem的话是2rem乘2rem,
再比如,当我们想在375的屏幕下画一个100px的盒子,那就是4rem乘4rem
然后我们看看代