REM方案

rem是如何实现自适应布局的?

摘要:rem是相对于根元素,这样就意味着,我们只需要在根元素确定一个px字号,则可以来算出元素的宽高。本文讲的是如何使用rem实现自适应。

rem这是个低调的css单位,近一两年开始崭露头角,有许多同学对rem的评价不一,有的在尝试使用,有的在使用过程中遇到坑就弃用了。但是我对rem综合评价是用来做web app它绝对是最合适的人选之一。

rem是什么?

rem(font size of the root element)是指相对于根元素的字体大小的单位。简单的说它就是一个相对单位。看到rem大家一定会想起em单位,em(font size of the element)是指相对于父元素的字体大小的单位。它们之间其实很相似,只不过一个计算的规则是依赖根元素一个是依赖父元素计算。

rem是一个相对单位,1rem等于html元素上字体设置的大小。我们只要设置html上font-size的大小,就可以改变rem所代表的大小。这样我们就有了一个可控的统一参考系。我们现在有两个目标:
rem单位所代表的尺寸大小和屏幕宽度成正比,也就是设置html元素的font-size和屏幕宽度成正比
rem单位和px单位很容易进行换算,方便我们按照标注稿写css
这里有一个前提,无论是设置html的font-size和屏幕宽度成正比,还是换算单位,我们都是以我们的标注稿为参考的。移动端的标注稿一般是640px(iphone5)或者750px(iphone6/7/8),现在750px用的比较多一些,我们假设标注稿是750px的。这里的750px是指设备的实际尺寸,也是UI标注稿的实际尺寸。而我们编码写的px是指css尺寸,是设备无关的尺寸,css尺寸和屏幕实际尺寸不是1比1的映射关系,而是取决于屏幕的像素密度。比如iphoneX是3倍屏,iphone8是2倍屏,但是两个的屏幕css尺寸都是375px。而实际的设备尺寸,iphonex是1125px,iphone8是750px,我们编码过程中只需要设置css尺寸,设备会自动帮我们映射实际的尺寸。我们按照标注稿写完页面之后,页面应该是可以在其他所有尺寸设备上正常自适应地显示的。

为什么web app要使用rem?

这里我特别强调web app,web page就不能使用rem吗,其实也当然可以,不过出于兼容性的考虑在web app下使用更加能突显这个单位的价值和能力,接下来我们来看看目前一些企业的web app是怎么做屏幕适配的。

rem能等比例适配所有屏幕

html {
	font-size: 100px;
}


 ~ function () {
      let evt = 'onorientationchange' in window ? 'orientationchange' : 'resize';

      function computed() {
        let HTML = document.documentElement,
          deviceW = HTML.clientWidth,
          designW = 750,
//DPR(devicePixelRatio) 设备像素比=物理像素(设备像素)/逻辑像素(CSS像素),这告诉浏览器应该使用多少个屏幕的实际像素来绘制单个 CSS 像素
// 这里的100是在基础样式中设置的html的根元素font-size=100px.100px=1rem.
// 通过JS去动态计算根元素的font-size,这样的好处是所有设备分辨率都能兼容适配
          ratio = deviceW / designW * 100;
        if (deviceW >= designW) ratio = 100;
        HTML.style.fontSize = ratio + 'px';
      }
      computed();
      window.addEventListener(evt, computed);
    }();

H5自适应改造方案——rem方案

原理

之前我们H5页面使用的方案是设置viewport meta头,让浏览器帮我们把页面缩放,使得页面看起来好像是自适应。实际上这不是自适应,只是在中小屏设备上,看起来差距不大,问题不明显而已。

现在大屏高清设备流行,自适应的问题也越来越明显了。在大屏设备上,课程封面小,title被拉长,文字小,按钮扁等问题越来越突出,已经达到不能忍受的程度,因此需要一套自适应的方案。

页面缩放

在viewport meta头里,取消让浏览器自动缩放页面,页面的自适应由页面自身管理。
因为有dpr的问题,为了统一管理,让浏览器帮我们根据dpr缩小页面,比如dpr=2,就缩小0.5让页面统一处在dpr=1的环境中。

rem

rem是一个半相对单位,它相对的是html(或body)元素的font-size值,例如有html { font-size: 10px; },则1rem = 10px。

当html元素的font-size是根据设备宽度自适应时,使用rem的页面也就会有自适应的特性。

文字

根据以下两个原因,对于文字使用px:

在大屏设备希望看到更多的文字
中文点阵最好是在12px,14px,16px这种尺寸,使用rem就会无法避免使用13px,15px尺寸,这样文字会显示的很奇怪
没有浏览器帮助我们缩放页面,在高清设备里面需要我们手动对文字进行缩放,为了方便这个而不需要写media query,页面在计算html的font-size值的同时,会设置一个data-dpr的属性。这时文字的media query就可以这样写:

p { font-size: 12px; } /* dpr = 1 /
[data-dpr=“2”] p { font-size: 24px; } /
dpr = 2 /
[data-dpr=“3”] p { font-size: 36px; } /
dpr = 3 */
规范
在head头引入初始化js脚本,可以使用两种代码:

淘宝移动端自适应方案开源代码,注:这里的因子是10,即font-size = W/10

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

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值