一区二区三区日韩精品-日韩经典一区二区三区-五月激情综合丁香婷婷-欧美精品中文字幕专区

分享

關(guān)于CSS中的字體尺寸設(shè)置

 酒駕的酒瓶蓋 2019-10-12

寫(xiě)在前面

上一篇文章如何做好移動(dòng)端的響應(yīng)式設(shè)計(jì):Viewport控制討論到了CSS像素,于是我決定研究一下如何用不同的方式來(lái)在CSS中設(shè)定字體大小。

常用單位

在CSS中可以用很多不同的方式來(lái)設(shè)定字體的尺寸。一般來(lái)說(shuō),這些單位被分成兩大類(lèi):絕對(duì)單位(absolute)和相對(duì)單位(relative)。

  • 絕對(duì)單位在大多數(shù)情況下是相對(duì)于某些實(shí)際量度而言的固定值,即是說(shuō)它們一旦設(shè)定,就不會(huì)因?yàn)槠渌氐淖煮w尺寸變化而變化。

  • 相對(duì)單位沒(méi)有一個(gè)固定的度量值,而是由父元素尺寸來(lái)決定的相對(duì)值,它們的尺寸會(huì)根據(jù)與其相關(guān)的元素改變而改變。

下面是對(duì)這些單位的一個(gè)簡(jiǎn)單整理:

單位類(lèi)型描述
pxAbsolute1個(gè)Viewport像素
ptAbsolute1pt = 1/72英寸
pcAbsolute1pc = 12pt
%Relative相對(duì)于父元素的字體尺寸
emRelative相對(duì)于父元素的字體尺寸
remRelative(即root em) 相對(duì)于html標(biāo)簽的字體尺寸
keywordRelativexx-small, x-small, small, medium, large, x-large, xx-large
vwRelative相當(dāng)于Viewport寬度的1/100
vhRelative相當(dāng)于Viewport高度的1/100
vminRelative相當(dāng)于Viewport高寬中長(zhǎng)度相對(duì)較小的1/100
vmaxRelative相當(dāng)于Viewport高寬中長(zhǎng)度相對(duì)較大的1/100

這里主要關(guān)注這幾個(gè)單位:px、pt%、em、remvw。

它們之間有什么區(qū)別?

從概念上很難理解這些單位之間的差別,所以下面用一些實(shí)例來(lái)說(shuō)明。

例1. 默認(rèn)設(shè)定

當(dāng)你不設(shè)定字體尺寸時(shí),HTML會(huì)提供一個(gè)默認(rèn)的尺寸設(shè)定。大多數(shù)瀏覽器中<html><body>標(biāo)簽中的默認(rèn)字體尺寸是100%,沒(méi)有概念?看這個(gè)等式:

100% = 1em = 1rem = 16px = 12pt

還是不懂?那就換個(gè)說(shuō)法,比如說(shuō)你給一個(gè)<p>設(shè)置字體尺寸為100%,給另一個(gè)<p>設(shè)置為16px,在屏幕上看到的這兩個(gè)<p>中的字體大小是一樣的,下圖列出了用幾個(gè)不同單位設(shè)置的字體尺寸,可以看出是一樣大的:

例2. 絕對(duì)與相對(duì)

改變<html>的字體尺寸可以很明顯的看出絕對(duì)單位和相對(duì)單位的差別。如果把<html>設(shè)置為html { font-size: 200% },就會(huì)影響所有使用相對(duì)單位的<p>。效果如下圖:

這就是相對(duì)單位最主要的優(yōu)勢(shì)了,借助相對(duì)單位的這種特性就可以設(shè)計(jì)出真正的響應(yīng)式頁(yè)面,而所要做的只是修改<html>的字體尺寸

例3. remem(或者%)

em(或者%)需要通過(guò)父元素的字體尺寸來(lái)計(jì)算尺寸:

html { 
  font-size: 100% /* =16px */
}
body {
  font-size: 2em; /* =32px */
}
p {
  font-size: 1em; /* =32px */
  /* font-size: 0.5em; =16px */
}

因?yàn)?code><p>是<body>的子元素,而<body><html>的子元素,所以<p>中的em%將是之前的兩倍。

當(dāng)你為一個(gè)元素添加em單位時(shí),應(yīng)當(dāng)考慮到所有父元素的字體尺寸。如你所見(jiàn),這樣很容易使人混亂。
使用rem可以很好的解決這個(gè)問(wèn)題。rem只需要計(jì)算<html>的字體尺寸而不需要考慮父元素。如下代碼所示:

html { 
  font-size: 100% /* =16px */
}
body {
  font-size: 2rem; /* =32px */
}
p {
  font-size: 1rem; /* =16px */
}

使用rem可以讓你擁有和em/%同樣的縮放能力,但不必去考慮那些復(fù)雜的嵌套關(guān)系。

例4. Viewport寬度

vw是CSS3中新提出的一個(gè)單位,通過(guò)Viewport寬度來(lái)計(jì)算字體尺寸。這樣就可以設(shè)計(jì)出更加靈活的響應(yīng)式字體。
雖然這個(gè)單位看上去非常適合用于響應(yīng)式設(shè)計(jì),但就我個(gè)人而言不是很熱衷于它。在使用vw的過(guò)程中我并不能很好的控制字體的大小,不是太大就是太小。

我的方式

當(dāng)我在寫(xiě)這篇文章時(shí),我僅使用px來(lái)作為單位。因?yàn)楝F(xiàn)在大多數(shù)瀏覽器都允許用戶(hù)放大頁(yè)面,這樣做就不會(huì)有可訪(fǎng)問(wèn)性的問(wèn)題。
然而,我發(fā)現(xiàn)了這個(gè)具有一定限制力的方式。雖然我的字體尺寸在中小型屏幕上看起來(lái)還行,但在大屏幕上會(huì)被優(yōu)化的更好。盡管用戶(hù)可以自行設(shè)定放大的屬性,但是我們希望可以盡量減少用戶(hù)的工作。
我的解決方案是使用rem,并使用px作為備用單位。

html {
  font-size: 62.5%; /* sets the base font to 10px for easier math */
}

body {
  font-size: 16px;
  font-size: 1.6rem;  
  /* sets the default sizing to make sure nothing is actually 10px */
}

h1 {
  font-size: 32px;
  font-size: 3.2rem;
}

像下面這樣寫(xiě)就可以允許我按比例來(lái)放大我的字體尺寸:

@media screen and (min-width: 1280px) {
  html {
    font-size: 100%;
  }
}

這個(gè)方案之所以使用px作為備用單位,是因?yàn)?code>rem不支持IE8及其以下版本。這個(gè)方案有一個(gè)問(wèn)題,就是像上面這樣改變基礎(chǔ)字體尺寸時(shí),并不能對(duì)備用字體尺寸起到作用。不過(guò),我不覺(jué)得這個(gè)問(wèn)題多么大,因?yàn)檫@個(gè)匹配大型設(shè)備尺寸的能力只不過(guò)是為了錦上添花而已,并不是一個(gè)核心功能。

    本站是提供個(gè)人知識(shí)管理的網(wǎng)絡(luò)存儲(chǔ)空間,所有內(nèi)容均由用戶(hù)發(fā)布,不代表本站觀點(diǎn)。請(qǐng)注意甄別內(nèi)容中的聯(lián)系方式、誘導(dǎo)購(gòu)買(mǎi)等信息,謹(jǐn)防詐騙。如發(fā)現(xiàn)有害或侵權(quán)內(nèi)容,請(qǐng)點(diǎn)擊一鍵舉報(bào)。
    轉(zhuǎn)藏 分享 獻(xiàn)花(0

    0條評(píng)論

    發(fā)表

    請(qǐng)遵守用戶(hù) 評(píng)論公約

    類(lèi)似文章 更多

    亚洲国产成人爱av在线播放下载| 在线观看免费无遮挡大尺度视频 | 熟妇人妻av中文字幕老熟妇| 国产麻豆成人精品区在线观看| 亚洲熟妇熟女久久精品| 我的性感妹妹在线观看| 在线观看欧美视频一区| 日本加勒比在线播放一区| 日韩18一区二区三区| 亚洲一区二区三区av高清| 亚洲国产欧美精品久久| 丁香七月啪啪激情综合| 久久精品亚洲精品一区| 日本午夜免费福利视频| 婷婷激情五月天丁香社区| 99国产高清不卡视频| 中日韩免费一区二区三区| 亚洲精品高清国产一线久久| 久久精品偷拍视频观看| 国产一区二区三区口爆在线| 国产午夜福利片在线观看| 婷婷色网视频在线播放| 丰满人妻一二三区av| 欧美大黄片在线免费观看| 国产大屁股喷水在线观看视频| 不卡一区二区在线视频| 国产精品亚洲欧美一区麻豆| 日韩不卡一区二区三区色图| 欧美日韩有码一二三区| 中文字幕乱码亚洲三区| 日韩成人免费性生活视频| 超碰在线免费公开中国黄片| 视频一区二区 国产精品| 五月婷婷亚洲综合一区| 熟女少妇一区二区三区蜜桃| 国内自拍偷拍福利视频| 暴力三级a特黄在线观看| 国产一区二区熟女精品免费| 国产精品一区二区日韩新区| 熟女乱一区二区三区四区| 国产亚洲欧美一区二区|