rem在响应式布局中的应用,移动web适配利器

一举手一投足web适配利器-rem

2016/03/28 · CSS ·
rem

初稿出处:
AlloyTeam   

前言
关系rem,我们先是会想到的是em,px,pt那类的词语,大好多人眼中那个单位是用来安装字体的轻重缓急的,没有错那确实是用来设置字体大小的,然则对于rem来讲它可以用来做运动端的响应式适配哦。

参照地址:

rem/em/px/pt的基友关系

px
像素相对长度单位,相对于显示器显示屏分辨率来说

em
争辨长度单位,依据其父成分来安装字体大小

pt
point,是印刷行当常用单位,等于七分一2英寸

rem
CSS三新扩张的贰个相对单位,是依附网页的跟成分(html)来安装字体大小

前言

关联rem,大家首先会想到的是em,px,pt那类的词语,大繁多人眼中这么些单位是用来安装字体的大小的,没有错这真的是用来安装字体大小的,不过对于rem来说它能够用来做运动端的响应式适配哦。

 

兼容性

rem应用于适配

rem的特征同样适用于width和height,咱们得以依赖根成分的font-size值来改动成分的宽高值,由此大家应当能够联想到大家得以依据荧屏尺寸动态地给html设定不一致的值,从而到达大家css样式中的适配效果。

兼容性

 

亚洲必赢官网 1

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

ios:陆.1系统以上都帮忙

android:二.一类别以上都协理

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

 

亚洲必赢官网 2

  rem是绝对于html根元素的一个单位。rem是px的1陆倍,即1rem =
1陆px;除了IE低版本浏览器不支持它以外,其余都援救,看下图:

rem的适配规则

1.抉择原则
纵然如此大家所写出的页面要在区别的显示屏尺寸设备上运行,但是大家写页面包车型客车时候,供给求挑选个中一种显示屏大小作为早先的尺度,而这几个条件的取舍应该依靠我们所得到的视觉稿来支配,

二.rem数值总结
例市价形下rem的值默认为16px,那样在总体页面包车型地铁css总括进度中太过繁琐。比方,今后有个30px大幅的成分,就得写成30/1陆rem。对于全体页面来讲职业量仍旧挺大的。所以那里提供了俩种方式

  • 可以将html的font-size设置成100px
    诸如此类设置,在写单位时平素将数值除以十0在增多rem的单位就能够了。若是设计稿的字体是1陆px;大家就足以写成1.6rem。

    • 此间为啥不要10?
      因为google等浏览器对小小字体有限定,即最小为12px,所以设置10px会不寻常。
  • 使用sass

    $rem : 16x;
    @function px_rem($px){
    @return ($px/$rem) + rem;
    }
    

3.动态设置html的font-size
乘势屏幕尺寸的改动,html的font-size的值应该是基准rem*改变后的屏幕宽度 / 基准屏幕宽度

  • 运用css的media query来安装(那种是八个幅度区间内三个rem)

    @media (min-device-width : 375px) and (max-device-width : 667px) and (-webkit-min-device-pixel-ratio : 2){
      $rem : 16x;
    }
    
  • 使用javascript来动态设置(那种办法每1个增长幅度点都会有二个新的rem)

    document.getElementsByTagName('html')[0].style.fontSize = 基准rem*window.innerWidth / 基准屏幕宽度 + 'px';
    

rem设置字体大小

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

亚洲必赢官网 3

意思正是基于网页的根成分来设置字体大小,和em(font size of the element)的界别是,em是依靠其父元素的字体大小来安装,而rem是基于网页的跟元素(html)来安装字体大小的,举1个轻易的事例,

近年来抢先十分之五浏览器IE玖+,Firefox、Chrome、Safari、Opera ,要是我们不修改相关的字体配置,都以私下认可展现font-size是1陆px即

XHTML

html { font-size:16px; }

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

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

rem在响应式布局中的应用,移动web适配利器。CSS

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

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

多数选拔rem这些单位来设置字体大小基本上是以此套路,好处是1旦用户自个儿修改了浏览器的默许字体大小,那么使用rem时就能够依照用户的调动的大小来呈现了。
不过rem不仅可以适用于字体,同样能够用来width height
margin那个样式的单位。上面来具体说一下

 

先看看兼容性,关于移动端
ios:陆.一体系以上都扶助
android:二.一系统以上都接济
绝大多数主流浏览器都支持,能够欣慰的往下看了。

亚洲必赢官网 4

考虑dpr

貌似我们获得到的视觉稿超过二分之一尺码是双倍大小的,大家一般会乐得的将标注/二,可是当我们相称rem使用时,完全能够遵从视觉稿上的尺码来安装。

  • 设计给的稿子双倍的来由是iphone等高清屏手提式有线电话机的存在,高清屏的像素比(device
    pixel ratio)dpr一点都一点都不小,所以显得的像素较为清晰。

  • 一般手提式有线电话机的dpr是一,iphone4,iphone5这种高清屏是二,iphone六s
    plus那种高清屏是叁,能够通过js的window.devicePixelRatio获取到眼下配备的dpr,所以iphone陆给的视觉稿大小是(*2)750×1334了。

  • 获得了dpr之后,大家就足以在viewport
    meta头里,撤除让浏览器自动缩放页面,而温馨去设置viewport的content

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

    诸如此类我们就平昔能够运用视觉稿上的尺码了。

点击查阅示例>>

小编的博客:、

借使认为本文不错的话,扶助点击下边包车型大巴推荐哦,多谢!

rem实行显示屏适配

在讲rem荧屏适配此前,先说一下一般做运动端适配的章程,一般能够分为:

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

2 稍复杂一些的是应用百分比设置成分的大小来举行适配,可能使用flex等css去设置有个别要求定制的上涨的幅度。

3 再繁杂一些的响应式页面,需求选择css三的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>

亚洲必赢官网 5

那是三个div,宽度和可观都用rem来设置了,在浏览器里面是那般突显的,
 能够见到,在浏览器里面width和height分别是160px,正好是1陆px *
十,那么1旦将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>

再来看看结果:

亚洲必赢官网 6

此时width和height都以170px,那就表明了将rem应用与width和height时,同样适用rem的特点,依照根成分的font-size值来改动作者的值,由此大家相应可以联想到大家得以给html设定不相同的值,从而达到我们css样式中的适配效果。

rem数值总计

一经运用rem来安装css的值,一般要由此一层总括才行,举个例子假如要安装1个长度宽度为十0px的div,那么就必要总计出拾0px对应的rem值是
十0 / 16 =陆.二伍rem,那在大家写css中,其实算相比较繁琐的一步操作了。

对于尚未运用sass的工程:

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

对于利用sass的工程:

前端营造中,完全能够选用scss来缓慢解决那一个难点,举个例子大家能够写一个scss的function
px二rem即:

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);;

看来此间,你大概会开采有的不知晓的地点,就是地点10分rem:三7.五px是怎么来的,不奇怪意况下不是暗中认可的1陆px么,那个实际正是页面包车型地铁基准值,和html的font-size有关。

rem基准值计算

至于rem的基准值,也等于地点3/107.五px其实是依据大家所获得的视觉稿来决定的,首要有以下几点原因:

1 由于大家所写出的页面是要在分裂的显示器大小设备上运维的

2 所以大家在写样式的时候必须求先以一个鲜明的显示屏来作为参照,那么些就由我们得到的视觉稿来定

3 假如咱们得到的视觉稿是以iphone6的显示屏为基准设计的

4 三星陆的显示器尺寸是37五px,

CSS

rem = window.innerWidth / 10

1
rem = window.innerWidth  / 10

诸如此类总计出来的rem基准值就是叁柒.五(iphone六的视觉稿),那里怎么要除以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 利用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 利用javascript来动态设置
依据大家事先算出的基准值,我们得以选择js动态算出当前显示屏所适配的font-size即:

CSS

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

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

下一场我们看一下以前11分demo显示的功用

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);

黑莓陆下,符合规律展现200px

亚洲必赢官网 7

在iphone4下,显示169px

亚洲必赢官网 8

有鉴于此我们得以通过安装不一样的html基础值来落成在分裂页面适配的目的,当然在利用js来安装时,需求绑定页面包车型客车resize事件来落成变化时更新html的font-size。

 

rem设置字体大小
rem是(font size of the root element),官方解释

  今后当先八分之四浏览器IE玖+,Firefox、Chrome、Safari、Opera ,如若大家不修改有关的字体配置,都以暗中同意展现font-size是16px即

rem适配进阶

咱俩知晓,一般大家取获得的视觉稿当先四分一是iphone六的,所以我们来看的尺码一般是双倍大小的,在选拔rem在此以前,大家一般会自愿的将标注/二,其实那也并无道理,不过当我们合营rem使用时,完全能够根据视觉稿上的尺寸来安装。

1 设计给的稿子双倍的原由是iphone陆那种显示屏属于高清屏,也等于设备像素比(device
pixel ratio)dpr非常大,所以显得的像素较为清晰。

2 一般手机的dpr是一,iphone四,iphone伍那种高清屏是贰,iphone陆s
plus这种高清屏是三,能够因此js的window.devicePixelRatio获取到近年来设备的dpr,所以iphone陆给的视觉稿大小是(*2)750×1334了。

3 获得了dpr之后,我们就能够在viewport
meta头里,撤消让浏览器自动缩放页面,而友好去设置viewport的content举个例子(这里之所以要设置viewport是因为大家要得以落成border1px的职能,加入自身给border设置了一px,在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’);

四 设置完之后合营rem,修改

CSS

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

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

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

1 消除了图片高清难题。

2 解决了border
一px难题(我们设置的壹px,在iphone上,由于viewport的scale是0.5,所以就自然缩放成0.伍px)

在iphone6下的例子:

咱俩接纳动态设置viewport,在iphone陆下,scale会被设置成拾分之5即0.5,其他手提式有线电话机是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代码,注意那里设置了一px的边框

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;
}

在iphone六下的显示:

亚洲必赢官网 9

在android下的来得:

亚洲必赢官网 10

亚洲必赢官网 11

html {
    font-size:16px;
}

rem进行荧屏适配总计

下边那么些网站是对准rem来写的二个简约的demo页面,大家能够在差异的无绳电话机上看一下功力

亚洲必赢官网 12

只是rem也并不是万能的,上面也有一对光景是不适于使用rem的

1 当用作图片或许有个别无法缩放的展现时,必要求接纳一定的px值,因为缩放恐怕会招致图片压缩变形等。

在罗列多少个应用rem的线上网址:

网易新闻:

聚划算:

 

参考资料:

1 赞 14 收藏
评论

亚洲必赢官网 13

那便是说一旦我们想给多少个P标签设置12px的字体大小那么用rem来写正是

情趣正是依赖网页的根成分来设置字体大小,和em(font size of the
element)的分别是,em是基于其父成分的字体大小来设置,而rem是依照网页的跟成分(html)来安装字体大小的,举贰个简易的例证,
近日大多浏览器IE九+,Firefox、Chrome、Safari、Opera
,借使我们不改造相关的书体配置,都以默许展现font-size是1陆px即

p {
    font-size: 0.75rem; //12÷16=0.75(rem)
}
html {
    font-size:16px;
}

用它的好处就是,只要改动根的深浅,前边全数的rem设置都会转移,那样很好做显示器适配。

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

rem进行显示屏适配

  在讲rem显示屏适配此前,先说一下一般做运动端适配的不二等秘书技,一般能够分为: 1 不难一点的页面,一般中度直接设置成固定值,宽度相似盛满全体显示屏。 2 稍复杂一些的是选拔百分比设置成分的尺寸来进展适配,只怕应用flex等css去设置有个别内需定制的拉长率。 3 再繁杂负担一些的响应式页面,要求采纳css三的media
query属性来进展适配,大概思路是依据显示器区别大小,来安装相应的css样式。
上面包车型客车一些方式,其实也能够消除显示屏适配等主题材料,不过既然出来的rem那几个新东西,也终将能专职到那一个地点,下边具体来讲具体运用rem:

先看三个简练的事例:

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

</div>

亚洲必赢官网 14

那是1个div,宽度和惊人都用rem来安装了,在浏览器里面是那般展现的,
 能够见到,在浏览器里面width和height分别是160px,正好是16px *
10,那么只要将html根成分的暗中同意font-size修改一下啊?

 

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

</div>

 

再来看看结果:

亚洲必赢官网 15

那时候width和height都以170px,那就印证了将rem应用与width和height时,同样适用与rem的表征,依据根成分的font-size值来改动自己的值,因而大家应该能够联想到大家能够给html设定不相同的值,从而达成我们css样式中的适配效果。

rem数值总括

 

即使应用rem来设置css的值,一般要透过1层总计才行,比如借使要设置二个长度宽度为十0px的div,那么就须要总计出拾0px对应的rem值是
十0 / 16=6.二五rem,那在大家写css中,其实算比较繁琐的一步操作了,不过那实则都不是事。
想想我们明日的工程,哪个没有用创设的,前端构建中,完全能够运用scss来化解这些主题材料,举例大家得以写一个scss的function
px二rem即:

 

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

这么,当大家写具体数值的时候就足以写成:

 

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

 

见状那里,你只怕会发觉一些不领会的地方,便是地点十三分rem:三7.五px是怎么来的,常常状态下不是暗中同意的16px么,那些其实就是页面包车型客车基准值,和html的font-size有关。

 

rem基准值计算

 

有关rem的基准值,约等于上边十一分三7.5px其实是基于大家所得到的视觉稿来支配的严重性有以下几点原因:

1 由于大家所写出的页面是要在区别的荧屏大小设备上运维的

2 所以大家在写样式的时候必供给先已二个鲜明的显示屏来作为参照,那一个就由大家获得的视觉稿来定

3 要是大家得到的视觉稿是以iphone六的显示屏为尺度设计的

4 小米陆的显示器尺寸是375px,

 

rem = window.innerWidth  / 10

 

诸如此类总结出来的rem基准值便是三柒.伍(iphone陆的视觉稿),那里怎么要除以10吧,其实这几个值是不管定义的,借使不除以10,依照大家算出来的准绳值会偏大,那样在装置html的font-size时候会偏小,大家领略浏览器的font-size假使低于1二px就显示不出效果了,在那边列举一下别的手提式有线话机的

iphone3gs: 320px / 10 = 32px

iphone4/5: 320px  / 10 = 32px

iphone6: 375px  / 10 =37.5px

 

动态设置html的font-size

 

后天关键难题来了,我们该怎么通过区别的显示器去动态设置html的font-size呢,那里一般分为三种办法

1 利用css的media query来安装即

 

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

 

2 利用javascript来动态设置
依据大家在此之前算出的基准值,大家得以动用js动态算出当前显示器所适配的font-size即:

 

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

接下来大家看一下事先特别demo呈现的效应

 

.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);

 

亚洲必赢官网 16

在iphone4下,显示169px

亚洲必赢官网 17

有鉴于此大家得以由此设置区别的html基础值来到达在分歧页面适配的目标,当然在利用js来安装时,须要绑定页面包车型客车resize事件来落成变化时更新html的font-size。

 

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

rem适配进阶

咱俩明白,一般我们获得到的视觉稿超越3/陆是iphone陆的,所以大家看到的尺寸一般是双倍大小的,在动用rem从前,大家一般会自觉的将标注/二,其实那也并无道理,然而当大家协作rem’使用时,完全能够遵循视觉稿上的尺寸来设置。

壹设计给的稿子双倍的原故是iphone陆那种荧屏属于高清屏,相当于设备像素比(device
pixel ratio)dpr极大,所以显得的像素较为清晰。

二一般手提式有线电话机的dpr是1,iphone那种高清屏是二,能够由此js的window.devicePixelRatio获取到近日设备的dpr,所以iphone六给的视觉稿大小是(*2)750×1334了。

三 得到了dpr之后,大家就可以在viewport
meta头里,打消让浏览器自动缩放页面,而友好去设置viewport的content举例

 

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

 

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

 

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

 

双倍75,那样就足以完全依照视觉稿上的尺码来了。不用在/二了,那样做的补益是:

1 解决了图片高清难点。

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

 

不过rem也并不是万能的,上边也有局地场景是不适于使用rem的

1 当用作图片只怕有些不可能缩放的来得时,必需要选择一定的px值,因为缩放只怕会导致图片压缩变形等。

2 再安装backgroundposition或许backgroundsize时不宜选拔rem。

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

和讯新闻:

聚划算:

多数选择rem那一个单位来设置字体大小基本上是以此套路,好处是只要用户本人修改了浏览器的暗中认可字体大小,那么使用rem时就足以依附用户的调度的轻重缓急来显示了。
但是rem不仅可以适用于字体,同样能够用于width height
margin那么些样式的单位。下边来具体说一下

rem举办屏幕适配
在讲rem显示屏适配从前,先说一下一般做运动端适配的方法,一般能够分成:

  1. 粗略一点的页面,一般中度直接设置成固定值,宽度相似撑满整个显示屏。
  2. 亚洲必赢官网,稍复杂一些的是运用百分比设置成分的轻重缓急来进展适配,大概应用flex等css去设置某些亟需定制的肥瘦。
  3. 再繁杂一些的响应式页面,须要接纳css三的media
    query属性来拓展适配,大概思路是遵照显示器分裂尺寸,来安装相应的css样式。

地方的一对艺术,其实也得以解决显示屏适配等难点,然而既然出来的rem那几个新东西,也迟早能兼顾到这几个地点,上面具体使用rem:
rem适配
先看四个简便的事例:

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

</div>

亚洲必赢官网 18

那是二个div,宽度和冲天都用rem来安装了,在浏览器里面是这么呈现的,
能够阅览,在浏览器里面width和height分别是160px,正好是16px *
十,那么只要将html根成分的暗中同意font-size修改一下吗?

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

</div>

再来看看结果:

亚洲必赢官网 19

此时width和height都以170px,那就注明了将rem应用与width和height时,一样适用rem的天性,遵照根成分的font-size值来改造自己的值,由此我们应有能够联想到大家得以给html设定不一样的值,从而完成我们css样式中的适配效果。
rem数值总结
万1使用rem来安装css的值,一般要因而壹层总括才行,比方假诺要安装一个长度宽度为十0px的div,那么就供给总括出拾0px对应的rem值是
100 / 1六 =六.二五rem,那在我们写css中,其实算相比麻烦的一步操作了。
对此尚未行使sass的工程:
为了方便起见,可以将html的font-size设置成拾0px,那样在写单位时,直接将数值除以拾0在增进rem的单位就能够了。
对此利用sass的工程:
前端创设中,完全能够选拔scss来消除那么些难点,比方我们可以写三个scss的function
px二rem即:

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

那样,当大家写现实数值的时候就可以写成:

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

看来那里,你也许会开采一些不了解的地方,正是下面13分rem:三七.伍px是怎么来的,符合规律境况下不是暗许的1陆px么,这几个实际上正是页面包车型地铁基准值,和html的font-size有关。

rem基准值总结
有关rem的基准值,也正是地点11分三7.5px其实是基于大家所获得的视觉稿来支配的,首要有以下几点原因:
1 由于大家所写出的页面是要在分裂的显示屏大小设备上运营的
2
所以大家在写样式的时候必须求先以一个规定的荧屏来作为参考,这些就由我们得到的视觉稿来定
3 假使大家获得的视觉稿是以iphone陆的显示屏为标准设计的
4 华为陆的荧屏大小是37伍px,

rem = window.innerWidth  / 10

如此那般总结出来的rem基准值正是三7.伍(iphone陆的视觉稿),那里怎么要除以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 利用css的media query来安装即

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

2 利用javascript来动态设置
根据大家前边算出的基准值,我们可以使用js动态算出当前显示器所适配的font-size即:

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

下一场大家看一下事先11分demo体现的功能

<style>
.con {
      width: px2rem(200px);
      height: px2rem(200px);
      background-color: red;
}
</style>
<div class="con">

</div>
<script>
document.addEventListener('DOMContentLoaded', function(e) {
  document.getElementsByTagName('html')[0].style.fontSize = window.innerWidth / 10 + 'px';
}, false);
</script>

BlackBerry6下,平常突显200px

亚洲必赢官网 20

在iphone4下,显示169px

亚洲必赢官网 21

总来说之大家能够通过安装差别的html基础值来完结在分裂页面适配的目标,当然在选拔js来设置时,须求绑定页面包车型地铁resize事件来到达变化时更新html的font-size。

rem适配进阶
大家领略,一般大家赢获得的视觉稿大多数是iphone陆的,所以大家看来的尺码一般是双倍大小的,在运用rem以前,大家一般会自愿的将标注/二,其实那也并无道理,可是当大家匹配rem使用时,完全能够依照视觉稿上的尺寸来安装。
1
设计给的稿子双倍的原故是iphone六那种显示屏属于高清屏,也便是设备像素比(device
pixel ratio)dpr异常的大,所以浮现的像素较为清晰。
2 一般手提式有线电话机的dpr是一,iphone肆,iphone5那种高清屏是二,iphone陆s
plus那种高清屏是三,能够透过js的window.devicePixelRatio获取到当下设施的dpr,所以iphone6给的视觉稿大小是(*2)750×1334了。
3 得到了dpr之后,大家就足以在viewport
meta头里,撤消让浏览器自动缩放页面,而团结去设置viewport的content比如(那里之所以要安装viewport是因为大家要促成border一px的效应,参与我给border设置了1px,在scale的震慑下,高清屏中就会显得成0.5px的意义)

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

四 设置完之后合作rem,修改

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

双倍7五,那样就足以完全依照视觉稿上的尺码来了。不用在/二了,那样做的益处是:
1 化解了图片高清难题。
2 化解了border
1px标题(大家设置的壹px,在iphone上,由于viewport的scale是0.5,所以就自然缩放成0.伍px)
在iphone6下的事例:
我们选择动态设置viewport,在iphone陆下,scale会被设置成3/陆即0.五,别的手机是1/一即壹.

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

我们的css代码,注意那里安装了一px的边框

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

在iphone6下的显得:

亚洲必赢官网 22

在android下的显示:

亚洲必赢官网 23

rem举办荧屏适配总计
上边那几个网站是针对rem来写的一个简约的demo页面,大家能够在不一样的手机上看一下职能

亚洲必赢官网 24

不过rem也并不是全能的,下边也有1部分场合是不适应使用rem的
1
当用作图片或然部分不能够缩放的显示时,必须求利用一定的px值,因为缩放只怕会促成图片压缩变形等。
在罗列多少个利用rem的线上网址:
新浪资源音信:http://3g.163.com/touch/news/subchannel/all?version=v\_standard
聚划算:https://jhs.m.taobao.com/m/index.htm\#!all

参考资料:http://www.nihaoshijie.com.cn/index.php/archives/593

转载自AlloyTeam:http://www.alloyteam.com/2016/03/mobile-web-adaptation-tool-rem/

网站地图xml地图