00:00
大家好,我是上硅谷H5学科严老师,在程序员节日到来之际,和大家分享一道面试题,如何实现移动端的rem适配。那接下来我们说想要做移动端,我们的第一件事情就需要把上面这个Meta标签一定要写出来,来,那好呢,接下来我们说写完之后我们来阐述一下为什么要实现这个rem适配,为什么要实现这个适配,接下来呢,我们通过一个案例来给大家演示一下,当前我的页面上面呢,有一个div的盒子box,来接下来我们给它设置一下基本的样式,元素的宽呢,我们给它来一个200PX。来元素的高呢,为了展示我也给它呈现出200PX来背景颜色呢,我们说给它来个红色,接下来我们打开浏览器来看一下我们当前盒子的一个基本效果,来右键检查切换到我们最终的移动端,切换完成之后,那接下来我们整体来看一下当前我的body,也就是我的整个屏幕区的宽是不是375,而我当前盒子的宽是不是200,那你看在整个横向上边,我的盒子200占据我整个屏幕的份数是不是三百七十五分之二百,对吧?接下来我们再给它换一个屏幕,来换一个IPHONE6PLUS,换完IPHONE6PLUS你会发现我当前盒兹box啊,我当前的body,也就是我们这个整个屏幕区,它是不是变成了414,而最终我们盒子box宽度是不是仍旧是二?
01:44
100PXL,所以它占据的比例是不是四百一十四分之二百,那明显和我们之前这个效果的比例是不是不一样,那你想我的同一个元素在我不同的设备上呈现出的效果是不是不一样啊?而我们最终适配要解决的问题就是为了解决同一个元素在我不同屏幕上呈现出的效果是一样的效果来,那好呢,接下来我们说一起来做一下,怎么做呢?我们说看一下这个适配,让我们采用rem适配,那我们说到底什么是rem适配啊,说rem适配实质上就是让我们最终HTML的根元素的字体大小变成我的整个屏幕区的宽来接下来我们写一下这HTML根元素的字体大小,设置成我们最终的屏幕区的宽。
02:45
屏幕区域的宽来,那好,那现在呢,我们通过一个画图的形式,我们给大家演示一下,比如说当前我这个蓝色的屏幕是我们最终的手机屏幕,而我现在让我HTML根源色的字体大小是不是设置成屏幕宽,那就证明此时HTML的fo size从这里到这里,这是不是我们最终HTML的fo size,那接下来我们说想要设置完屏幕宽度,那也就证明我的整个屏幕是不是变成了E,那如果说我们当前盒子的box最终在我们当前的屏幕区里边占据其中一半的话,那最终我们占据一半,那占据的是不是0.52M呀,对吧?那你看不管我屏幕大小为多大。
03:39
我只认当前屏幕的宽是不是都是E,所以最终我想让元素占据整个屏幕一半,不管在什么样的屏幕上呈现的效果是不是都是1/2呀,对吧?来,那好呢,接下来我们说一起来设置一下,把我们最终根元素的字的大小设置成我们最终的整个屏幕区的宽,所以呢,接下来对于我们来讲,第一件事情我们就得来获取一下我们最终整个屏幕区的宽来获取一下我们整个屏幕区的宽来玩一个变量,Y等于我们最终的document来,Document element,第二我们的client来,这是我们获取整个屏幕宽,屏幕宽度获取完成之后,我们下一件事情是不是要获取我们最终HTML这个根元素啊,来,那好呢,接下来我们同样也给它定一个变量来Y一个HTML的node等于我们最终的document。
04:40
Query selector来获取一下我们当前的HTML来HTML完成之后,接下来我们另外一件事情,是不是要设置我们最终的字体大小啊,来设置我们最终的字体大小来设置一下吧,我们说接下来我们要操作HTML是不是HTML node操作字体大小,是不是要操作de style的样式,第2FO size字体大小等于我们最终的外当前这个区的宽,这个区的宽加完之后,我们别忘了干一件什么事情啊,是不是加上一个单位PX呀,来单位PX加完之后,我们说这一步写完之后,我现在对于我移动端的整个屏幕来讲,我是不是就已经变成121了呀,对吧?所以呢,接下来我们页面中的所有的元素部分,所有的元素部分的单位统一,是不是都得换成我们最终的ER em来,那接下来我们下面这个区域也是。
05:40
也给换成我们最终的E来,换完之后我们打开浏览器,整个屏幕去一起来看一下,来右键检查找到我们这边。刷新一下,你看我当前盒子的宽和高是不是都变成了414,因为我当前的设备是IPHONE6PLUS,接下来我们再看一下我们最终的IPHONE6来刷新一下,找到这边之后,同样看一下我们当前盒子大小是不是变成了375乘以375,接下来我们再演示一下,把我们最终的元素呢换成我们最终的0.52M来换完之后我们看一下它到底占没占据我们想要的一半来走,这个时候我们看body区域的宽是不是375,而我当前盒子是不是187.5,占据的比例是不是正好是1/2,来顺便我们再换一下设备来检查一下,换一下我的IPHONE6PLUS,我的body区是不是变成了414,而最终我的盒子box是不是变成了207,而207是不是占据我们最终414的一八?
06:51
二啊,最终的比例是不是1/2,那通过我们最终给我们根元素设置字体大小,是不是就实现了一个最终简单的一个移动端的二适配啊,对吧。
我来说两句