菜单

REM实战

2018年11月20日 - CSS/CSS3

REM实战

2015/11/09 · CSS ·
rem

原稿出处: 百码山庄   

眼前片上发生只对象问于有关rem的一些问题,让自身出若干小心。因为随着CSS3的逐年成熟,在雅降级/渐进增强规则的保下,很多CSS新特性都不以是试用特性,而是以Web设计受到收获广大推行与用!而CSS3新加的单位rem也以其列,当恋人问于时,我才发觉及自己对是单位吗并无是异常了解,趁着周末稍闲暇时候,不妨让自己之大脑充充电。

一对尺寸单位
网页默认font-size为16px chrome默认最小字号也12px
px 像素 pt(没人用)
em相对长度单位充分写字母M ex(没人之所以)
rem相对于清目录的font-size的大小
vh视口高度 100vh = 视口高度
vw视口宽度 100vw =视口宽度

定义

Equal to the computed value of font-size on the root element.
(W3C)

直译是“与根元素的字体大小相等”,当然也有雷同种植更直接的知情 root em 。我们解当HTML中根元素其实也就是是 <html> 元素,所以rem单位实际是相对于 <html> 元素的字体大小而言之。

为此百分较做打适应 高度充分难同增幅配合

场景

以有利于说明rem单位之效力,我们事先来组织一个好常用之页面结构,然后分别下px和rem在比实现。通常咱们于制博文阅读页面的当儿都见面预先将博文的题(h2.article-title)显示,然后后面紧跟丰富的博文内容(div.article-body),最后可能还会见当博文的尾部(div.article-foot)显示作者或宣布时间等等。而以为文章的构造更清晰,我们一般会将稿子的标题放大突出展示,而最后可能吗会召开缩小弱化处理,大致结构如下:

<div class=”article”> <h2
class=”article-title”>这是文章的标题</h2> <div
class=”article-body”>
我日常将文章内容放置于此间。<br>这样看起比较舒适。 </div>
<div class=”article-foot”>
发布人:MrZheng 发布时间:2015/11/08 </div> </div>

1
2
3
4
5
6
7
8
9
<div class="article">
    <h2 class="article-title">这是文章的标题</h2>
    <div class="article-body">
        我通常把文章内容放置在这里。<br>这样看起来比较舒服。
    </div>
    <div class="article-foot">
        发布人:MrZheng&nbsp;发布时间:2015/11/08
    </div>
</div>

咱可能希望于页面上展示的功效是如此的:

图片 1

咱俩这边不失关注布局,只拘留字号:标题18px,内容14px,尾部12px。接下来我们来探哪分别下px和rem来促成预览样式。

运用js获取屏幕宽度然后形容副css

px VS rem

首先是使px实现:

CSS

.article-title {font-size: 18px;font-weight: normal;} .article-body
{font-size: 14px;margin: 10px 0;} .article-foot {font-size: 12px;}

1
2
3
.article-title {font-size: 18px;font-weight: normal;}
.article-body {font-size: 14px;margin: 10px 0;}
.article-foot {font-size: 12px;}

下一场,我们看rem版本:

CSS

html {font-size: 10px;} .article-title {font-size: 1.8rem;font-weight:
normal;} .article-body {font-size: 1.4rem;margin: 10px 0;} .article-foot
{font-size: 1.2rem;}

1
2
3
4
html {font-size: 10px;}
.article-title {font-size: 1.8rem;font-weight: normal;}
.article-body {font-size: 1.4rem;margin: 10px 0;}
.article-foot {font-size: 1.2rem;}

为了验证rem单位最终在浏览器上显得的字体大小确实是预设的18px,14px及12px,我动用Chrome调试工具在Elements面板的Computed面板查看了结果:

图片 2

吓了,说明rem最终实现的成效确实可以高达与直接利用px一样的结果。但是只是由者的代码来拘禁,我们发现采用rem其实正如采用px需要还多的代码,而且也并没有意识任何什么优势,那么CSS3为什么会大增是单位也?

<script>
 let pageWidth = window.innerWidth
 document.write(`<style>html{font-size:${pageWidth}px}</style>`)
</script>
<style>
body{font-size:16px;}
</style>

rem的优势

咱们由地方的代码中好发现,在使rem的时段,我们于标题、内容、尾部设置字体的时节利用的是一个小数,而最终我们当浏览器中见到底也是咱要之18px、14px及12px,结合定义有涉及的rem是对立于清(html)元素计算的,那么就算哼理解了,以标题为条例:
10px * 1.8 = 18px 
。所以,rem的优势就明白了,可以由此修改html元素的font-size直接控制总体网站的书体乃至其他尺寸属性的值的尺寸(诸如:margin,padding等)。

那么,有人也许会见问:我的网页放在那里显示得可以的,我有空改什么字体大小,调什么间距?即便久了本人眷恋换换风格,那呢说不定修改颜色,换换布局,跟这尺寸单位清没多酷关系吧?

事实上并无是这样的,我来被大家说少只情况。

第一,我们做网页,要考虑到走访我们网页的次第群体。要考虑视力好的,也要考虑视力差之;要考虑好看挺字多翻页的,也要是考虑看小字多显示内容的。所以当有平等天我们的网页需要加一个点击按钮切换很、正常、小还是还多字号的时节,你就是见面发觉及rem是多么的吃您感动了。还是以上面的场景为条例,我们如果通过当html标签及平添class来切换字体。

先看px的:

CSS

.article-title {font-size: 18px;font-weight: normal;} .article-body
{font-size: 14px;margin: 10px 0;} .article-foot {font-size: 12px;} /*
大字号 */ html.big .article-title {font-size: 27px;} html.big
.article-body {font-size: 21px;} html.big .article-foot {font-size:
18px;} /* 小字号 */ html.small .article-title {font-size: 14.4px;}
…此处省略几行

1
2
3
4
5
6
7
8
9
10
.article-title {font-size: 18px;font-weight: normal;}
.article-body {font-size: 14px;margin: 10px 0;}
.article-foot {font-size: 12px;}
/* 大字号 */
html.big .article-title {font-size: 27px;}
html.big .article-body {font-size: 21px;}
html.big .article-foot {font-size: 18px;}
/* 小字号 */
html.small .article-title {font-size: 14.4px;}
…此处省略几行

再也看看用rem的:

CSS

html {font-size: 10px;} .article-title {font-size: 1.8rem;font-weight:
normal;} .article-body {font-size: 1.4rem;margin: 10px 0;} .article-foot
{font-size: 1.2rem;} /* 大字号 */ html.big {font-size: 15px;} /*
小字号 */ html.small {font-size: 8px;}

1
2
3
4
5
6
7
8
html {font-size: 10px;}
.article-title {font-size: 1.8rem;font-weight: normal;}
.article-body {font-size: 1.4rem;margin: 10px 0;}
.article-foot {font-size: 1.2rem;}
/* 大字号 */
html.big {font-size: 15px;}
/* 小字号 */
html.small {font-size: 8px;}

 

其优势,就甭我再次多说了咔嚓?

老二,在倒智能设备剧增,响应式网页设计这样火热之期,我们当设计网页的当儿,怎能不考虑移动设备,怎能无考虑移动装备大清屏?!通常活动设备的显示区域比由传统PC电脑都丢掉了重重丛,如何会于重有些之区域显示更多的情,一直是装备产商和开发者们鼎力的大方向。高清屏的起非常非常程度达化解了这问题,有矣高清屏就意味着当传统PC上的字号即便缩小一半,放到高清屏上仍会管清晰可识别,不影响看,也未会见招致信息丢失。所以,现在网页设计之早晚通常会考虑于PC和Mobile中运用不同的字号等体制,那么问题来了,还是如第一单问题同样,在传媒询问中一个一个字号去挂也?这明明是匪得法的做法,虽然会达我们纪念要的效果,但是资金是一定高之,而且费工不谄媚。还是以上面的场景吧例。

要么先看px的:

CSS

.article-title {font-size: 18px;font-weight: normal;} .article-body
{font-size: 14px;margin: 10px 0;} .article-foot {font-size: 12px;}
@media all and(max-width: 480px) { .article-title {font-size: 9px;}
.article-body {font-size: 7px;} .article-foot {font-size: 6px;} }

1
2
3
4
5
6
7
8
.article-title {font-size: 18px;font-weight: normal;}
.article-body {font-size: 14px;margin: 10px 0;}
.article-foot {font-size: 12px;}
@media all and(max-width: 480px) {
    .article-title {font-size: 9px;}
    .article-body {font-size: 7px;}
    .article-foot {font-size: 6px;}
}

再看rem版本的:

CSS

html {font-size: 10px;} .article-title {font-size: 1.8rem;font-weight:
normal;} .article-body {font-size: 1.4rem;margin: 10px 0;} .article-foot
{font-size: 1.2rem;} @media all and(max-width: 480px) { html {font-size:
5px} }

1
2
3
4
5
6
7
html {font-size: 10px;}
.article-title {font-size: 1.8rem;font-weight: normal;}
.article-body {font-size: 1.4rem;margin: 10px 0;}
.article-foot {font-size: 1.2rem;}
@media all and(max-width: 480px) {
    html {font-size: 5px}
}

 

哼了,不举其他的了,相信肯定还有复多的施用场景,但是及时片个要求就发出足够的理让咱们错过读书及尝试采用rem了。

哼东西吗出苦闷

由来,rem的优势并非再多说了,但是这么好之东西,我们以其实使用受到却不用一帆风顺:

图片 3

这是在caniuse齐段下来的rem的兼容性情况,看到左上角那片耀眼的红色了么?在境内IE覆盖还特别广阔的情状下,这块红色带被开发者的痛是痛彻心扉的,但是作为开发者,作为用户体验的服务方,我们多情况下没理去放弃他们,那么怎么解决rem的兼容性问题呢?

实则,也易!CSS中不可为识别的性质或值会被浏览器自动忽略,所以,当我们在用rem的时节,只要再搭一个px单位的尺码,那么就好缓解IE8及以下版本浏览器的兼容性问题:

CSS

html {font-size: 10px;} .article-title {font-size: 18px;font-size:
1.8rem;font-weight: normal;} .article-body {font-size: 14px;font-size:
1.4rem;margin: 10px 0;} .article-foot {font-size: 12px;font-size:
1.2rem;} @media all and(max-width: 480px) { html {font-size: 5px} }

1
2
3
4
5
6
7
html {font-size: 10px;}
.article-title {font-size: 18px;font-size: 1.8rem;font-weight: normal;}
.article-body {font-size: 14px;font-size: 1.4rem;margin: 10px 0;}
.article-foot {font-size: 12px;font-size: 1.2rem;}
@media all and(max-width: 480px) {
    html {font-size: 5px}
}

 

总结

rem是一个格外实用之单位,在网页设计中常常可以带来经济之效力,但是并无意味rem可以替代有的单位,有时候做使用,相互配合,反而会高达意想不到的效应。然而,新东西的出现则总能让人口耳目一新,但是可也时常会伴随在重重让丁苦恼的坑,还需要我们逐渐失去琢磨,慢慢夺完善。

1 赞 3 收藏
评论

图片 4

相关文章

标签:,

发表评论

电子邮件地址不会被公开。 必填项已用*标注

网站地图xml地图