[CSS]如何使用字体大小!说明如何使用px,rem,%等。

“有多个字符单元,我不知道该使用哪个单元。”
“我不太了解每个角色的特征。”

我认为有很多刚开始学习html的人都对字符大小的单位有这种印象。实际上,当在一个站点上使用多个单元时,许多人可能会问:“为什么要使用此单元?”

实际上,很少有人充分利用所有单位来创建站点。但是,有很多人根据情况正确使用特定的设备,应该这样做。这次,我将介绍在单元后面构建站点的方法,并说明在哪种情况下应使用哪个单元。字体大小问题是将来不可避免的问题,因此可以尽早理解。请不要担心。常用的字体单位在某种程度上是固定的,一旦掌握了它,就可以立即使用它。

本文适用于初学者,因此有经验的用户应在需要时略过它。

参考

如果您独自一人学习并且可能会感到沮丧... ...有太多您不了解的事情...我们建议为导师开设一门无限听的编程学校。
[免费]我真正想要推荐的3所编程学校[实际参加]

各种字体大小

如果您在Google上查找字体大小,可能会惊讶于其中的字体很多。应该有一些您从未见过或从未使用过的字体大小单位。

报价来源

绝对值 相对价值
厘米 EM
毫米
ch
像素 雷姆
pt 大众
个人电脑 h
vmin
最大值
%
*实际上,“ 像素”可以理解为绝对名称,但实际上是相对名称。 像素基于pt计算。 “ Px:像素单位-1px等于0.75pt。(Px:1px等于0.75pt。)”W3C长度

在此表中,许多人在听到“ unit”一词时会想到“ 像素”。但是,如果全部指定为“ 像素”,将不可避免地出现问题。用户环境已发生重大变化。不仅可以通过各种方式访问​​PC,而且可以访问智能手机和平板电脑。当前的情况是,仅“ 像素”规范不再有效,具体取决于谁看到它。实际上,“ 像素”标记的百分比正在下降。

因此,由于我们将在上表中频繁使用它,因此我们将整理并告诉您即使是初学者也应了解的知识。

绝对值和相对值

令人讨厌的是,字体大小在任何设备上都没有改变。如果要更改它,则必须重置每个设备的字符大小或根据屏幕大小的波动自动更改字符大小,而后者尤为现实。因此,从CSS3开始,可以使用的单位数正在增加。在学习这些内容时,作为主要的划分,除以绝对名称和相对名称将有助于理解。对于字符大小,有一些不受屏幕大小波动影响的绝对值,有一些相对值会根据波动而改变字符大小。

分类 单元 描述
绝对值 像素 像素(pixel)的缩写。严格来说,它不是绝对值,但是可以理解为绝对值,因为无论屏幕大小如何变化,字符大小都不会改变。一次了解就可以了。
相对价值 根据父元素的大小而变化 % 该值根据父元素的设置而变化。如果父元素的设置值为16px,并且为子元素指定了50%,则它将与8px相同。
EM 发音为“ M”。基本上,您可以将其视为“%”,并且根据父元素的值而有所不同。 1em与父元素相同,表示100%。换句话说,0.5em为50%,1.2em为120%。
根据路线的大小而变化 雷姆 “根据根而异”表示它根据css文件的html {}中设置的字符大小而波动。尤其是当需要响应式支持时,很可能您将字体大小指定为“ 雷姆”。在Bootstrap4中,采用“ 雷姆”。实际上,媒体查询会更改每个屏幕尺寸的根设置,以更改字体大小。
根据视口的大小而变化 大众 大众代表“查看端口宽度”。用户使用的屏幕的宽度可以视为100,并且可以指定该字符的大小。例如,如果它是10vw,它将以屏幕尺寸的1/10显示。

这对于查看每个单位中的值占其他单位的价值很有用。使用NPM包的CSS单位转换
现在,让我们检查一下如何使用它们。

如何使用px

在这里,让我们解释px规范的场景,优缺点。

值得

“ Px”是最早使用的字体大小单位。如果您不希望通过PC浏览器以外的用户进行访问,则可以指定px而不会有任何问题。如果在任何情况下都不需要更改字体大小,请指定“ 像素”。

缺点

如果以px为单位指定字体大小,并且该字体大小敏感,则很有可能在各个地方出现问题。例如,以下是字符大小40px和20px在320px时的外观。即使放大屏幕,此尺寸也不会改变。

<div class="main">
  <div class="size_1">
   <p>これはsize_1です。</p>
   <div class="size_2">
      <p>これはsize_2です。</p>
   </div>
  </div>
</div>
.main{
	text-align: center;
}

.size_1{
	font-size: 40px;
}

.size_2{
	font-size: 20px;
}

换句话说,如果将px用于响应式支持,则必须根据每个屏幕的大小来更改字体大小,这需要大量的时间和精力进行维护。因此,它不是适用于响应屏幕的单元。由于Google建议您提供响应式支持,因此“ 像素”的肩膀将来会越来越窄。

如何使用%

%是相对值。如果标准更改,则相同的“ 1”的预期大小将更改。当您指定“%”时,该值将更改为哪个值“父元素的值”是。如果未在CSS文件中指定父元素,则一个字符的大小为16px。因此,如果没有父元素并且使用了“%”,则该“ 16px”的百分比将是多少。

例如,在创建响应站点时,如果您为父元素指定“ 雷姆”,为子元素指定“%”,则字符大小将随着屏幕扩展或收缩而自动更改。

值得

为字体大小指定“%”具有以下优点:在简单结构的情况下,直观上易于理解。只要按住父元素的值,子元素的大小就会根据更改自动更改。

缺点

缺点是,当html的嵌套结构变得复杂时,如果指定了多种字体,则%指定一次就会变得麻烦。例如,在某些情况下,div包含在div标签内的多个图层中。如果为每个图层都指定了字体,那将很烦人。更改父元素会影响其下的子元素,但是当它还影响下面的字体大小时,将很难掌握该百分比的实际大小。

例如,查看下面的CSS设置。 “字体大小:62.5%;”和“字体大小:10px;”放置在名为html的根目录中。这是16px = 100%,因此计算出“ 10px = 62.5%”。我将在后面解释,“ 20px = 200%”,如果是em,则为“ 2em”。特别是在“ EM”和“ 雷姆”的情况下,它变得易于理解。

html{
   font-size: 62.5%;
   font-size: 10px;
}
.container{
    width: 80%;
    margin: 0 auto;
}

.main{
	text-align: center;
}

.size_1{
	font-size: 130%;
}

.size_2{
	font-size: 90%;
}

顺便说一句,按上述设置时,size_1为130%,因此为13px,但在size_2的情况下,为90%,因此等于11.7px。但是,如果您不花时间计算它,就很难直观地了解它的大小。即使在第二级,我也很烦。您可以看到,层越多,就越难理解。当父元素的值更改时,立即更改其下的子元素变得很麻烦。

如何使用em

“ EM”的基本思想与“%”相同。以与“%”相同的方式指定父元素与字符大小的比率。因此,用法不会改变。例如,如果父元素的大小为16px,则将其设置为100%和1em。因此,如果要达到8px(50%),它将是0.5em。

您还可以按照与指定%相同的方式编写如下内容。优缺点与%相同。由于将父元素视为字符大小的标准,因此如果html结构简单,则很好,但是当它变得复杂时,它就很烦人。

html{
   font-size: 62.5%;
   font-size: 10px;
}
.container{
    width: 80%;
    margin: 0 auto;
}

.main{
	text-align: center;
}

.size_1{
	font-size: 1em;
}

.size_2{
	font-size: 0.9em;
}

如何使用雷姆

“ Rem”是CSS3新引入的单元,也可以用于响应式屏幕。它代表(root EM),是“ 雷姆”。 “%”和“ EM”的标准是父元素,而“ 雷姆”的标准则基于根,即html的字体大小。通过如下所示设置名为html的根的CSS,将基于此html的字符大小显示其他字符大小设置。例如,html设置为10px,因此1rem为10px,1.5rem为15px,依此类推。

html{
   font-size: 62.5%;
   font-size: 10px;
}

.size_1{
	font-size: 1.5rem;
}

.size_2{
	font-size: 1.4em;
}

值得

即使使用相同的相对规格单位,也不像“%”和“ EM”一样,它不受html嵌套结构问题的影响,因此,即使更正值,它也会变成意外的大小并被更正消除了花费时间的麻烦。直观上易于理解,这是“ 雷姆”的最大优点。对于响应式支持,您可以通过更改每个断点的根的字体大小来一次更改下属的字体大小。

缺点

使用rem时,必须注意Google Chrome所指定的最小字体大小。据说这是10px,用rem不能表达少于10px。换句话说,请避免使用以下符号。

html{
   font-size: 5px;
}

.size_1{
	font-size: 4rem;
}

.size_2{
	font-size: 3em;
}

另外,rem是一个相对较新的部门,因此对浏览器的支持有所不同。请注意,它不支持IE8和更早版本。为避免此问题,请敢于使用px表示法,如下所示,这样,如果不读取px,它将被读取。这将增加CSS表示法,并且为每种字体规格进行其他设置很麻烦。毫无疑问,rem非常方便,但是仅当您认为不需要支持IE8或更早版本的浏览器时才使用它。但是,由于日本对IE8的官方支持已于2016年1月13日结束,因此将来对IE8及更早版本的支持需求将减少。您不必将其视为一个大问题。

报价来源

html{
   font-size: 5px;
}

.size_1{
       font-size: 4rem;
       font-size: 20px;
}

.size_2{
       font-size: 3em;
       font-size: 20px;
}

到目前为止,您可能已经在其中的一些说明中注意到了,即使缩小了屏幕,字体大小也不会自动更改。 雷姆只是根值的解释。从这个意义上讲,可以说它具有接近绝对值的特性。

如何使用大众/大众

“ Vw”将根据视口的宽度而变化。类似的值是“ h”,但这将根据视口的高度而变化。因为它是视口宽度,所以它是“ 大众”,因为它是视口高度,所以它是“ h”。该单位代表与当前视口的比率。在此,视口是指以下红色范围。这是用户可以看到的范围。

以下浏览器支持此功能。报价来源

“ Vw”将与屏幕宽度成比例的字体大小指定为100。换句话说,“ 1vw”的大小表示屏幕大小的1/100。这与“ h”相同,表示高度。

伴随的单位是“ 最大值”和“ vmin”。就像使用智能手机的任何人都知道的那样,即使垂直或水平放置屏幕,屏幕也会自动更改为用户的视角。在这种情况下,它是一个方便的单元。 “ Vmax”以较大的视口值为100计算字体大小。相反,“ vmin”以较小的视口值为100来计算字体大小。

值得

最大的优点是它可以支持所有设备的宽度。实际上,随着视口的更改,字体大小也会自动更改。因此,在响应时不必设置断点并调整字体大小值。对于“ 大众”,您可以指定一个视口的波动而波动的值,而不会被诸如“%”和“ EM”之类的父元素拖动。可以说,它是响应式支持的最合适单位。

图片来自Gyazo

缺点

虽然不太可能,但根据设备大小设置的字体大小可能与宽度规格不匹配。例如,假设将宽度设置为某个大小,例如max-with。但是,屏幕宽度会波动。由于字体大小是由此屏幕宽度决定的,因此它可能会超过设置的最大宽度。

概要

作为趋势,将来处理各种设备的需求不会改变。如果是这样,那么毫不夸张地说必须使用新的单位,例如“ 雷姆”和“ 大众”。当然,初学者作为基础学习的“ 像素”是一个很好的入口,它实际上经常使用,但是在将来,请继续获取与各种设备相对应的学分。

撰写本文的人

田中 陽介

我在越南开展业务,并且从事与人事相关的咨询业务。我离开日本已经八年了,我享受着日本不可能发生的事情。最近,我正在使用Ruby on Rails进行Web服务。