移动端自适应布局为什么要使用rem+vw

1.可以使用百分比吗?
如果所有元素的大小都设置成html或body大小的一个百分比,理论上的确可以在不同的设备上实现自适应。但是事与愿违,并非所有情况都可以设置百分比,比如浮动元素会脱离文档流,父级元素必须预先确定高度才能设置高度百分比。这些问题当然都有很好的解决方案,但是这些缺陷已经足以让我们在自适应的道路上抛弃它了。

2.rem如何实现自适应
实际的元素 / 设计的元素 == 实际的页面 / 设计的页面
所谓"设计"就是我们写代码期望网页呈现出来的样子,所有元素的大小和位置都和我们预想的一摸一样。通常在电脑端呈现出来的就是和设计的是一样的,但是移动端由于屏幕比电脑端小,呈现出来的样子就会不太一样,错位时有发生,所以才需要适配。
如果上面的等式恒成立,则说明适配成功。实际的元素 == 设计的元素 * ( 实际的页面 / 设计的页面),也就是是说需要知道( 实际的页面 / 设计的页面),设为k。试想,如果css中有一个属性能知道这个比例k,那么适配问题就已经完美解决了。可惜,并没有这个属性。但是,幸运的是,rem可以充当我们和这个比例之间的桥梁,rem可以看作一个单位,它可以和根元素的文字大小关联,也就是说把html的font-size设为k,比如设备屏幕尺寸是300px,设计稿宽度是600px,则html的字体大小就是320/640 = 0.5px,没错,这个值一般都很小,但是font-size的值一般在10px以上,虽然html里的font-size肯定会被下面设置的font-size所覆盖,但是处于习惯,还是会将这个k值乘上一个系数,一般是100,上面这个例子的话,html的字体大小就是50px。
这样,我们就找到了页面上不变的东西,就可以以不变应万变。至此,页面上所有元素的大小都可以用rem,或者说比例k来表示。

rem的缺陷
第一,和根元素font-size值强耦合,系统字体放大或缩小时;第二,rem是通过px换算的,难免会出现小数点(虽然乘上一个系数已经削弱了这个问题的影响),部分安卓机很容易出现的样式错乱的问题;第三,html文件头部需插入一段js代码。为什么需要这段代码呢?就是为了计算上面的比例k,为了计算k,就必须知道当前设备的宽高,因此js代码是鼻部可少的。
下面是我在网上找到的一段比较好的代码。

(function(doc, win) {
 var docEl = doc.documentElement,
  resizeEvt = 'orientationchange' in window ? 'orientationchange' : 'resize',
  recalc = function() {
   var clientWidth = docEl.clientWidth;
   if (!clientWidth) return;
   docEl.style.fontSize = 50 * (clientWidth / 375) + 'px';
  };
 if (!doc.addEventListener) return;
 win.addEventListener(resizeEvt, recalc, false);
 doc.addEventListener('DOMContentLoaded', recalc, false);
})(document, window)

也挺长的,看着确实烦人。

4.那么vw可以做什么呢
为了弥补这些缺陷,目前比较主流的自适应方式就是rem+vw布局(至少解决了大部分问题吧…)。
首先,什么是vw呢?
1vw = 可视窗口的宽度的百分之一。
1vh = 可视窗口的宽高度的百分之一。
顺便一提,
vmin是指选择vw和vh中最小的那个,而vmax是选择最大的那个。
第一,vmin和vmax配合@media查询使用,就可以解决窗口适配的问题了!
第二,rem的那段js代码不用写了,代码简洁性大大增加。而vw和vh是css3自带的属性,无需添加额外的代码。
5.使用vw+rem实现移动端自适应
前面已经说了用SASS函数,将px转换成rem,然后整个页面就可实现自适应,但是要写一段js代码实现rem的动态变化。现在就不用这么麻烦了,只要用SASS函数将rem的值用vw来表示,vw自己会动态变化。
5.为什么一开始不用vw+rem进行布局
因为vw最大的弱点在于兼容性,毕竟这是css3新加的属性,ios8,Android4.4以上才兼容。但是时过境迁,现在大部分设备都已经兼容了。
6.为什么不单独使用vw
因为因为视口单位有个缺点就是它没有最小或者最大限制,这就达不到我们都时候所希望的一个限制(比如窗口太小了,字都看不清)。所以我们可以在根元素上设置vw和vh,然后在根元素上限制最大最小值,然后配合body设置最大最小宽度。
这个博客对我产生了一点点启发:
https://blog.csdn.net/MaYang_/article/details/100620781

  • 1
    点赞
  • 7
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值