移动web适配利器-rem

分享到:  QQ好友和群QQ好友和群 QQ空间QQ空间 腾讯微博腾讯微博 腾讯朋友腾讯朋友 微信微信
查看查看159 回复回复1 收藏收藏 分享淘帖 转播转播 分享分享 微信
查看: 159|回复: 1
收起左侧

移动web适配利器-rem

[复制链接]
瑶池 发表于 2016-6-15 01:31:29 | 显示全部楼层 |阅读模式
快来登录
获取优质的苹果资讯内容
收藏热门的iOS等技术干货
拷贝下载Swift Demo源代码
订阅梳理好了的知识点专辑



1、前言

提到rem,大家首先会想到的是em、px、pt这类的词语,大多数人眼中这些单位是用于设置字体的大小的,没错这的确是用来设置字体大小的,但是对于rem来说它可以用来做移动端的响应式适配哦。




2、兼容性

移动web适配利器-rem 1

移动web适配利器-rem - 敏捷大拇指 - 移动web适配利器-rem 1


先看看兼容性,关于移动端:

  • iOS:6.1系统以上都支持
  • Android:2.1系统以上都支持


大部分主流浏览器都支持,可以安心的往下看了。




3、rem设置字体大小

rem是(font size of the root element),官方解释:

移动web适配利器-rem 9

移动web适配利器-rem - 敏捷大拇指 - 移动web适配利器-rem 9


意思就是根据网页的根元素来设置字体大小,和em(font size of the element)的区别是,em是根据其父元素的字体大小来设置,而rem是根据网页的跟元素(html)来设置字体大小的,举一个简单的例子。

现在大部分浏览器IE9+,Firefox、Chrome、Safari、Opera ,如果我们不修改相关的字体配置,都是默认显示font-size是16px即

[CSS] 纯文本查看 复制代码
html {
    font-size:16px;
}


那么如果我们想给一个P标签设置12px的字体大小那么用rem来写就是

[CSS] 纯文本查看 复制代码
p {
    font-size: 0.75rem; //12÷16=0.75(rem)
}


基本上使用rem这个单位来设置字体大小基本上是这个套路,好处是假如用户自己修改了浏览器的默认字体大小,那么使用rem时就可以根据用户的调整的大小来显示了。 但是rem不仅可以适用于字体,同样可以用于width height margin这些样式的单位。下面来具体说一下。




4、rem进行屏幕适配

在讲rem屏幕适配之前,先说一下一般做移动端适配的方法,一般可以分为:

1、简单一点的页面,一般高度直接设置成固定值,宽度一般撑满整个屏幕。

2、稍复杂一些的是利用百分比设置元素的大小来进行适配,或者利用flex等css去设置一些需要定制的宽度。

3、再复杂一些的响应式页面,需要利用css3的media query属性来进行适配,大致思路是根据屏幕不同大小,来设置对应的css样式。

上面的一些方法,其实也可以解决屏幕适配等问题,但是既然出来的rem这个新东西,也一定能兼顾到这些方面,下面具体使用rem:



4.1、rem适配

先看一个简单的例子:

[CSS] 纯文本查看 复制代码
.con {
      width: 10rem;
      height: 10rem;
      background-color: red;
 }


[HTML] 纯文本查看 复制代码
<div class="con">
        
</div>


移动web适配利器-rem 2

移动web适配利器-rem - 敏捷大拇指 - 移动web适配利器-rem 2


这是一个div,宽度和高度都用rem来设置了,在浏览器里面是这样显示的,  可以看到,在浏览器里面width和height分别是160px,正好是16px * 10,那么如果将html根元素的默认font-size修改一下呢?

[CSS] 纯文本查看 复制代码
html {
    font-size: 17px;
}
.con {
      width: 10rem;
      height: 10rem;
      background-color: red;
 }


[HTML] 纯文本查看 复制代码
<div class="con">
        
</div>


再来看看结果:

移动web适配利器-rem 3

移动web适配利器-rem - 敏捷大拇指 - 移动web适配利器-rem 3


这时width和height都是170px,这就说明了将rem应用与width和height时,同样适用rem的特性,根据根元素的font-size值来改变自身的值,由此我们应该可以联想到我们可以给html设定不同的值,从而达到我们css样式中的适配效果。



4.2、rem数值计算

如果利用rem来设置css的值,一般要通过一层计算才行,比如如果要设置一个长宽为100px的div,那么就需要计算出100px对应的rem值是 100 / 16 =6.25rem,这在我们写css中,其实算比较繁琐的一步操作了。


4.2.1、对于没有使用sass的工程:

为了方便起见,可以将html的font-size设置成100px,这样在写单位时,直接将数值除以100在加上rem的单位就可以了。


4.2.2、对于使用sass的工程:

前端构建中,完全可以利用scss来解决这个问题,例如我们可以写一个scss的function px2rem即:

[CSS] 纯文本查看 复制代码
@function px2rem($px){
    $rem : 37.5px;
    @return ($px/$rem) + rem;
}


这样,当我们写具体数值的时候就可以写成:

[CSS] 纯文本查看 复制代码
height: px2rem(90px);
width: px2rem(90px);


看到这里,你可能会发现一些不理解的地方,就是上面那个rem:37.5px是怎么来的,正常情况下不是默认的16px么,这个其实就是页面的基准值,和html的font-size有关。



4.3、rem基准值计算

关于rem的基准值,也就是上面那个37.5px其实是根据我们所拿到的视觉稿来决定的,主要有以下几点原因:

1、由于我们所写出的页面是要在不同的屏幕大小设备上运行的

2、所以我们在写样式的时候必须要先以一个确定的屏幕来作为参考,这个就由我们拿到的视觉稿来定

3、假如我们拿到的视觉稿是以iphone6的屏幕为基准设计的

4、iPhone6的屏幕大小是375px,

[JavaScript] 纯文本查看 复制代码
rem = window.innerWidth  / 10


这样计算出来的rem基准值就是37.5(iphone6的视觉稿),这里为什么要除以10呢,其实这个值是随便定义的,因为不想让html的font-size太大,当然也可以选择不除,只要在后面动态js计算时保证一样的值就可以,在这里列举一下其他手机的

iphone3gs: 320px / 10 = 32px
iphone4/5: 320px  / 10 = 32px
iphone6: 375px  / 10 =37.5px



4.4、动态设置html的font-size

现在关键问题来了,我们该如何通过不同的屏幕去动态设置html的font-size呢,这里一般分为两种办法


4.4.1、利用css的media query来设置即

[CSS] 纯文本查看 复制代码
@media (min-device-width : 375px) and (max-device-width : 667px) and (-webkit-min-device-pixel-ratio : 2){
      html{font-size: 37.5px;}
}



4.4.2、利用javascript来动态设置

根据我们之前算出的基准值,我们可以利用js动态算出当前屏幕所适配的font-size即:

[JavaScript]