[CSS]如何使用字体大小!使用PX,REM,%等。

“有多个单位的单位,我不知道你可以使用什么。”
“我不知道每个角色的特征。”

觉得这个角色规模单位这种印象的人可能不是刚开始学习HTML的人?事实上,当多个单位用于一个网站时,有很多人认为“为什么这个单位?”

事实上,有很少的人使用所有单位制作网站。但是,许多人根据情况使用特定单位,应该使用。这一次,我还在单位的背景上触摸了网站施工方法,并解释了哪种情况使用。角色尺寸问题是在未来无法避免的问题,因此它是宽容性的理解。请不要担心。经常使用的字体在一定程度上确定,如果掌握提示,可以立即使用。

本文是初学者,所以经验丰富的人根据需要跳过和阅读。

参考

如果您是单独学习,它将受到沮丧································································································································································································································································· ··············
【自由】3个编程学校,你想认真推荐[实际参加]

各种字体大小

如果你看谷歌的字体大小,那么有很多东西会有一个惊喜的人。我看到也应该有一个从未被使用的字体大小的单位。

报价来源

绝对值 相对价值
厘米 em.
毫米 前任
CH.
PX.
Pt. vw.
个人电脑 VH.
vmin.
vmax.
%
※“PX”可以理解为实际的绝对规范,但实际上是相对的。 PX是基于PT计算的。 “px:像素单元-1px等于0.75pt。(px:1 px对应0.75 pt。)” W3C长度

其中,在收听单位时,有很多人在思考“PX”。但是,如果您在全部指定“PX”,那么您肯定会出现问题。用户的环境发生了重要意义。不仅是PC,以及智能手机和平板电脑。目前,单独的“PX”规范不再通过,具体取决于您所看到的谁。事实上,指定的“PX”的比例是下降。

因此,我们将首先在上面的表格中首先拿起你想要的东西,所以你可以知道它更好。

绝对值和相对值

令人作呕的是字符的大小在任何设备中都不会改变。如果您尝试更改它,则必须将字符大小设置为每个设备,或者使用屏幕尺寸的波动自动更改字符尺寸,尤其是后者。因此,CSS3增加了可以使用的单位数。要了解这些,我们将理解它是一个大类,可以与绝对规范和相关规范分开。字符大小提供了不受屏幕尺寸波动影响的绝对值,以及更改字符大小以响应波动的相对值。

分类 单元 描述
绝对值 PX. “像素”(像素)缩写。严格来说,它不是绝对值,但它被理解为绝对值,因为无论屏幕尺寸的变化如何,字符大小都不会改变。拥有这种理解是可以的。
相对价值 根据父元素的大小变量 % 值根据父元素设置而更改。如果父元素设置为16 px和50%的子元素,则它与8px相同。
em. 发音为“m”。基本上,它与“%”基本相同,它根据父元素的值而波动。 1EM与父元素相同,并且意味着100%。换句话说,0.5EM为50%,1.2EM为120%。
可变根据路线的大小 “根据路由的波动”意味着它根据CSS文件的HTML {}设置的字符大小波动。特别地,在需要响应时,存在许多情况下,在字体大小中指定“REM”。 Bootstrap4采用“REM”。在实践中,媒体查询会更改每个屏幕大小的路由设置,并更改字符大小。
根据视口大小变量 vw. VW是“视口宽度”的缩写。您可以考虑用户使用的屏幕的宽度为100并指定它的字符大小。例如,如果它是10 VW,它将以1/10尺寸的屏幕尺寸显示。

这对于每个单位值都有用占用其他单位的任何数字。CSS单元使用NPM包进行转换
然后,我们将从现在检查每个人。

如何使用px

在这里,让我们解释PX指定的场景,Meritde和Merit。

优点

“px”是最古老的字符尺寸的单位。如果您不想从PC浏览器以外访问用户访问,则此规范毫无疑问。如果您不必在任何情况下更改字符大小,则它是“PX”规范。

贬低

如果PX指定字符大小,如果负责响应,则会有很高的能力在各个地方造成问题。例如,以下是320 px的字符大小40px和20px的视图。即使屏幕扩展,此幅度也不会改变。

<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来支持响应,则必须随时更改字符大小,具体取决于每个屏幕的大小,维护是维护的非常和精力。因此,它不是指向响应响应的单元。谷歌建议响应支持,因此“PX”的肩部将来会变得较窄。

如何使用%

%是一个相对值。随着标准的变化,相同的“1”改变其预期尺寸。谈论哪个值更改为“%”“父元素值”是。如果未在CSS文件中指定父元素,则一个字符大小为16px。因此,如果没有使用父元素和“%”,则百分比约为16px。

例如,在创建响应时,为子元素指定“%”,为子元素指定“%”,并且字符的大小也将根据屏幕的缩放自动波动。

优点

字符尺寸的“%”规范的优点是在简单的结构中直观地易于理解。如果按下父元素的值,则子元素的大小将根据更改自动更改。

贬低

缺点是,如果当您在HTML嵌套结构复杂时指定多个字体,则%规格立即繁琐。例如,在DIV标签中,存在层的情况下也包括在div中。如果您为每个层次结构指定字体,它很烦人。父元素的更改会影响从属子元素,但是当它影响下面的字体大小时,%实际上很难掌握实际情况。

例如,让我们来看看以下CSS设置。 HTML的根包含“字体大小:62.5%;”和“字体大小:10px;”。这计算了“10px = 62.5%”,因为它是16px = 100%。 “20px = 200%”,将稍后描述,但如果是EM,它将是“2EM”。特别是在“EM”或“REM”的情况下,它变得容易理解。

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为13px,但如果size_2为90%,则等于11.7px。但是,如果您没有计算出来,很难了解它是一个集成或更多尺寸。我在两个层次结构中感到困扰。应当理解,如果层次结构增加,则会更难理解。当父元素的值更改时,在此下的子元素的更改是麻烦的。

如何使用它们

“EM”的基本思想与“%”不同。指定父元素字符大小的百分比为“%”。因此,如何使用不会改变。例如,如果父元素大小为16 px,则将其设置为1 em。因此,如果您想实现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

“REM”是从CSS3新引入的单元,也可以支持各自的响应。 (根EM)是一个缩写“REM”。虽然“%”和“EM”的标准是父元素,但“REM”的标准是路由,即HTML字体大小是参考。通过将Root 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;
}

优点

由于相同的相对指定的单元不依赖于HTML嵌套结构的问题,例如“%”或“EM”,因此在纠正该值时意外尺寸是意外的大小,并且没有烦恼需要时间。易于理解直观,这是“REM”的最大优势。如果您进行响应支持,可以通过更改每个断点的路由的字符大小来更改线条下的字符大小。

贬低

如果使用REM,则必须注意Google Chrome指定的最小字体大小。这是10px,这是不可能在REM中表达以下内容。换句话说,请避免以下符号。

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

如果您发现到目前为止发现解释,它不是一个翻译,即使屏幕减少,即使屏幕也会自动更改字符大小。 REM只是路线的价值只是看不见的。从这个意义上说,可以说它有一个接近绝对值的财产。

如何使用vw / vh

“VW”根据视口的宽度波动。对于类似的值,有“VH”,但这种波动根据视口的高度。因为视口宽度为“VW”,并且视口高度为“VH”。该单元表示当前视口的百分比。在这里,viewport指的是以下红色范围。用户看起来。

这对应于以下浏览器:报价来源

“VW”指定屏幕宽度百分比的字体大小。也就是说,“1 VW”的大小意味着它是屏幕尺寸的1/100。这对于“vh”表示高度的相同。

有“vmax”和“vmin”作为与此相关的单位。如果您使用的是智能手机,您会知道,但即使您进行垂直或侧向,屏幕也会自动更改为用户。这是一个方便的单位。 “vmax”计算具有较大视口的值的字符大小。相反,“vmin”计算字符大小,因为较小视口的值是100。

优点

它是它可以响应所有设备的宽度的最佳优势。事实上,在改变视口的过程中,字符大小也会自动更改。因此,在响应响应时,没有必要设置断点并调整字符大小的值。 “VW”可以指定由于视口波动而波动的值,而不会被拖动为“%”或“EM”。可以说是最适合响应支持的单位。

来自Gyazo的图像

贬低

它是非常低的可能性,但根据设备的大小设置的字符尺寸可能与宽度的宽度不匹配。例如,假设宽度被设置为具有最大值等的固定大小。然而,屏幕宽度波动。字符的大小由该屏幕宽度确定,因此它可以超过设定的最大宽度的宽度。

概括

作为潮流,对各种设备的需求不会在未来改变。如果是这样,毫无疑问地说,使用诸如“REM”和“VW”之类的新单位是必不可少的。当然,“PX”学习作为主要是进入的主要是好的,并且有很多使用使用,但在未来,继续学习支持各种设备的单位。

给这篇文章的人

田中 陽介

越南的企业家和人力资源相关咨询。七年已经过去了日本,但我享受了一个不能在日本完成的驼峰。最近我在铁路上用Ruby制作网络服务。