移步web适配利器-rem

2016/03/28 · CSS ·
rem

原稿出处:
AlloyTeam   

前言

论及rem,大家首先会想到的是em,px,pt那类的辞藻,大许多人眼中这个单位是用于安装字体的轻重的,没有错那诚然是用来安装字体大小的,可是对于rem来讲它能够用来做活动端的响应式适配哦。

 

兼容性

 

凯旋门074网址 1

先看看包容性,关于移动端

ios:6.1体系以上都支持

android:2.1种类以上都帮衬

大部主流浏览器都扶持,能够欣尉的往下看了。

 

rem设置字体大小

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

凯旋门074网址 2

乐趣正是基于网页的根成分来设置字体大小,和em(font size of the element)的分别是,em是依据其父成分的字体大小来设置,而rem是依附网页的跟成分(html)来安装字体大小的,举一个简约的事例,

先天超过八分之四浏览器IE9+,Firefox、Chrome、Safari、Opera ,假设我们不修改相关的字体配置,都以暗中认可呈现font-size是16px即

XHTML

html { font-size:16px; }

1
2
3
html {
    font-size:16px;
}

那么一旦大家想给一个P标签设置12px的字体大小那么用rem来写正是

CSS

凯旋门074网址,澳门凯旋门注册网址,p { font-size: 0.75rem; //12÷16=0.75(rem) }

1
2
3
p {
    font-size: 0.75rem; //12÷16=0.75(rem)
}

大略采纳rem那些单位来设置字体大小基本上是其一套路,好处是假使顾客自身修改了浏览器的私下认可字体大小,那么使用rem时就能够依据顾客的调解的尺寸来展现了。
不过rem不只可以够适用于字体,同样能够用来width height
margin那么些样式的单位。下边来具体说一下

 

rem举行显示屏适配

在讲rem显示屏适配在此之前,先说一下常常做活动端适配的办法,常常能够分成:

1 简单一点的页面,日常高度直接设置成固定值,宽度相似撑满整个显示屏。

2 稍复杂一些的是使用百分比设置元素的轻重来拓展适配,或许使用flex等css去设置有个别急需定制的幅度。

3 再复杂一些的响应式页面,须要选用css3的media
query属性来进行适配,大约思路是依靠显示器不一致尺寸,来安装相应的css样式。

地点的一些艺术,其实也得以缓解显示器适配等主题材料,然则既然出来的rem那些新东西,也终将能专职到那个地点,上面具体应用rem:

rem适配

先看三个简约的例子:

CSS

.con { width: 10rem; height: 10rem; background-color: red; } <div
class=”con”> </div>

1
2
3
4
5
6
7
8
.con {
      width: 10rem;
      height: 10rem;
      background-color: red;
}
<div class="con">
 
</div>

凯旋门074网址 3

那是二个div,宽度和可观都用rem来设置了,在浏览器里面是那样展现的,
 能够看到,在浏览器里面width和height分别是160px,正好是16px *
10,那么一旦将html根成分的默许font-size修改一下吧?

XHTML

html { font-size: 17px; } .con { width: 10rem; height: 10rem;
background-color: red; } <div class=”con”> </div>

1
2
3
4
5
6
7
8
9
10
11
html {
    font-size: 17px;
}
.con {
      width: 10rem;
      height: 10rem;
      background-color: red;
}
<div class="con">
 
</div>

再来看看结果:

凯旋门074网址 4

此时width和height都以170px,那就印证了将rem应用与width和height时,同样适用rem的特色,依据根成分的font-size值来改变自己的值,由此大家理应能够联想到我们得以给html设定不相同的值,进而落成大家css样式中的适配效果。

rem数值计算

假如应用rem来安装css的值,日常要经过一层总括才行,举个例子假如要设置两个长度宽度为100px的div,那么就须要总结出100px对应的rem值是
100 / 16 =6.25rem,那在我们写css中,其实算相比繁琐的一步操作了。

对此尚未采用sass的工程:

为了方便起见,能够将html的font-size设置成100px,那样在写单位时,直接将数值除以100在累计rem的单位就能够了。

对于利用sass的工程:

前端创设中,完全能够行使scss来化解那几个标题,举例我们得以写叁个scss的function
px2rem即:

CSS

@function px2rem($px){ $rem : 37.5px; @return ($px/$rem) + rem; }

1
2
3
4
@function px2rem($px){
    $rem : 37.5px;
    @return ($px/$rem) + rem;
}

那般,当大家写实际数值的时候就足以写成:

CSS

height: px2rem(90px); width: px2rem(90px);;

1
2
height: px2rem(90px);
width: px2rem(90px);;

见到此间,你可能会开掘部分不明了的地方,正是地点十三分rem:37.5px是怎么来的,寻常状态下不是暗中同意的16px么,那一个实在便是页面包车型地铁基准值,和html的font-size有关。

rem基准值计算

唯独对于rem来讲它能够用来做活动端的响应式适配哦。至于rem的基准值,也正是地点十一分37.5px其实是依附我们所得到的视觉稿来调控的,主要有以下几点原因:

1 由于大家所写出的页面是要在不相同的显示屏大小设备上运转的

2 所以大家在写样式的时候必须求先以三个规定的荧屏来作为参照他事他说加以考察,这么些就由大家获得的视觉稿来定

3 假使大家获得的视觉稿是以iphone6的荧屏为条件设计的

4 诺基亚6的显示屏尺寸是375px,

CSS

rem = window.innerWidth / 10

1
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

动态设置html的font-size

当今关键难点来了,大家该怎么通过分歧的显示器去动态设置html的font-size呢,这里平时分为两种方法

1唯独对于rem来讲它能够用来做活动端的响应式适配哦。 利用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;} }

1
2
3
@media (min-device-width : 375px) and (max-device-width : 667px) and (-webkit-min-device-pixel-ratio : 2){
      html{font-size: 37.5px;}
}

2唯独对于rem来讲它能够用来做活动端的响应式适配哦。 利用javascript来动态设置
依照我们前边算出的基准值,大家可以应用js动态算出当前显示屏所适配的font-size即:

CSS

唯独对于rem来讲它能够用来做活动端的响应式适配哦。document.getElementsByTagName(‘html’)[唯独对于rem来讲它能够用来做活动端的响应式适配哦。0].style.fontSize =
window.innerWidth / 10 + ‘px’;

1
document.getElementsByTagName(‘html’)[0].style.fontSize = window.innerWidth / 10 + ‘px’;

接下来大家看一下事先特别demo展现的法力

唯独对于rem来讲它能够用来做活动端的响应式适配哦。CSS

.con { width: px2rem(200px); height: px2rem(200px); background-color:
red; } <div class=”con”> </div>
document.addEventListener(‘DOMContentLoaded’, function(e) {
document.getElementsByTagName(‘html’)[0].style.fontSize =
window.innerWidth / 10 + ‘px’; }, false);

1
2
3
4
5
6
7
8
9
10
11
.con {
      width: px2rem(200px);
      height: px2rem(200px);
      background-color: red;
}
<div class="con">
 
</div>
document.addEventListener(‘DOMContentLoaded’, function(e) {
                document.getElementsByTagName(‘html’)[0].style.fontSize = window.innerWidth / 10 + ‘px’;
}, false);

Samsung6下,符合规律展现200px

凯旋门074网址 5

在iphone4下,显示169px

凯旋门074网址 6

有鉴于此大家得以经过安装差异的html基础值来达成在不相同页面适配的目标,当然在行使js来安装时,必要绑定页面包车型大巴resize事件来达到变化时更新html的font-size。

 

rem适配升级

大家精通,常常我们获得到的视觉稿超越贰分一是iphone6的,所以大家看来的尺码平日是双倍大小的,在利用rem之前,大家平常会乐得的将评释/2,其实这也并无道理,不过当咱们相称rem使用时,完全能够服从视觉稿上的尺码来安装。

1 设计给的稿件双倍的缘故是iphone6这种荧屏属于高清屏,相当于设备像素比(device
pixel ratio)dpr极大,所以显得的像素较为清晰。

2 日常手提式有线电话机的dpr是1,iphone4,iphone5这种高清屏是2,iphone6s
plus这种高清屏是3,可以由此js的window.devicePixelRatio获取到近来配备的dpr,所以iphone6给的视觉稿大小是(*2)750×1334了。

3 得到了dpr之后,大家就足以在viewport
meta头里,撤消让浏览器自动缩放页面,而友好去设置viewport的content举例(这里之所以要安装viewport是因为我们要完结border1px的作用,参与自身给border设置了1px,在scale的熏陶下,高清屏中就展览会示成0.5px的功力)

CSS

meta.setAttribute(‘content’, ‘initial-scale=’ + 1/dpr + ‘,
maximum-scale=’ + 1/dpr + ‘, minimum-scale=’ + 1/dpr + ‘,
user-scalable=no’);

1
meta.setAttribute(‘content’, ‘initial-scale=’ + 1/dpr + ‘, maximum-scale=’ + 1/dpr + ‘, minimum-scale=’ + 1/dpr + ‘, user-scalable=no’);

4 设置完事后合作rem,修改

CSS

@function px2rem($px){ $rem : 75px; @return ($px/$rem) + rem; }

1
2
3
4
@function px2rem($px){
    $rem : 75px;
    @return ($px/$rem) + rem;
}

双倍75,那样就足以完全依据视觉稿上的尺寸来了。不用在/2了,那样做的益处是:

1 消除了图片高清难点。

2 化解了border
1px标题(大家设置的1px,在iphone上,由于viewport的scale是0.5,所以就自然缩放成0.5px)

在iphone6下的事例:

我们利用动态设置viewport,在iphone6下,scale会被设置成四分三即0.5,其余手提式无线电话机是1/1即1.

CSS

meta.setAttribute(‘content’, ‘initial-scale=’ + 1/dpr + ‘,
maximum-scale=’ + 1/dpr + ‘, minimum-scale=’ + 1/dpr + ‘,
user-scalable=no’);

1
meta.setAttribute(‘content’, ‘initial-scale=’ + 1/dpr + ‘, maximum-scale=’ + 1/dpr + ‘, minimum-scale=’ + 1/dpr + ‘, user-scalable=no’);

大家的css代码,注意这里安装了1px的边框

CSS

.con { margin-top: 200px; width: 5.3rem; height: 5.3rem; border-top:1px
solid #000; }

1
2
3
4
5
6
.con {
            margin-top: 200px;
            width: 5.3rem;
            height: 5.3rem;
            border-top:1px solid #000;
}

在iphone6下的来得:

凯旋门074网址 7

在android下的来得:

凯旋门074网址 8

rem实行荧屏适配总括

下边这么些网站是针对性rem来写的二个简便的demo页面,大家能够在不相同的手提式有线话机上看一下效应

凯旋门074网址 9

但是rem也而不是德才兼备的,上边也许有部分景观是不适应使用rem的

1 当用作图片或许局地无法缩放的展现时,必供给利用一定的px值,因为缩放大概会促成图片压缩变形等。

在列举多少个使用rem的线上网址:

今日头条快讯:

聚划算:

 

参谋资料:

1 赞 14 收藏
评论

凯旋门074网址 10

相关文章