成人无码视频,亚洲精品久久久久av无码,午夜精品久久久久久毛片,亚洲 中文字幕 日韩 无码

資訊專欄INFORMATION COLUMN

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

mcterry / 2049人閱讀

摘要：常用單位在中可以用很多不同的方式來設(shè)定字體的尺寸。當(dāng)你為一個(gè)元素添加單位時(shí)，應(yīng)當(dāng)考慮到所有父元素的字體尺寸。例寬度是中新提出的一個(gè)單位，通過寬度來計(jì)算字體尺寸。

  
個(gè)人翻譯，轉(zhuǎn)載請(qǐng)注明出處

  英文原文：CSS Font Sizing
寫在前面

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

常用單位

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

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

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

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

單位 類型 描述
px Absolute 1個(gè)Viewport像素
pt Absolute 1pt = 1/72英寸
pc Absolute 1pc = 12pt
% Relative 相對(duì)于父元素的字體尺寸
em Relative 相對(duì)于父元素的字體尺寸
rem Relative (即root em) 相對(duì)于html標(biāo)簽的字體尺寸
keyword Relative xx-small, x-small, small, medium, large, x-large, xx-large
vw Relative 相當(dāng)于Viewport寬度的1/100
vh Relative 相當(dāng)于Viewport高度的1/100
vmin Relative 相當(dāng)于Viewport高寬中長(zhǎng)度相對(duì)較小的1/100
vmax Relative 相當(dāng)于Viewport高寬中長(zhǎng)度相對(duì)較大的1/100

這里主要關(guān)注這幾個(gè)單位：px、pt、%、em、rem和vw。

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

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

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

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

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

還是不懂？那就換個(gè)說法，比如說你給一個(gè)

設(shè)置字體尺寸為100%，給另一個(gè)

設(shè)置為16px，在屏幕上看到的這兩個(gè)

中的字體大小是一樣的，下圖列出了用幾個(gè)不同單位設(shè)置的字體尺寸，可以看出是一樣大的：

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

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

。效果如下圖：

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

例3. rem與em(或者%)

em(或者%)需要通過父元素的字體尺寸來計(jì)算尺寸：

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

因?yàn)?b>

是的子元素，而是的子元素，所以

中的em和%將是之前的兩倍。

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

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

我的方式

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

像下面這樣寫就可以允許我按比例來放大我的字體尺寸：

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

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

如果你在這個(gè)問題上有一些更好的點(diǎn)子，可以評(píng)論或私信給我。

文章版權(quán)歸作者所有，未經(jīng)允許請(qǐng)勿轉(zhuǎn)載,若此文章存在違規(guī)行為，您可以聯(lián)系管理員刪除。

轉(zhuǎn)載請(qǐng)注明本文地址：http://m.hztianpu.com/yun/111057.html

相關(guān)文章

  • CSS 單位

    摘要：概覽中的長(zhǎng)度單位有很多，覺得有必要整理備忘。單位大體分為兩大類絕對(duì)單位，不會(huì)因?yàn)槠渌氐某叽缱兓兓Ｈ绻胧褂蔑@示窗口的寬度或高度而不是父元素的寬度將會(huì)怎么樣這正是和單位所提供的。和現(xiàn)代瀏覽器都支持這兩個(gè)單位。 概覽 CSS中的長(zhǎng)度單位有很多，覺得有必要整理備忘。 網(wǎng)上介紹的也比較多和全，詳見參考資料。 單位大體分為兩大類： 絕對(duì)單位 ，不會(huì)因?yàn)槠渌氐某叽缱兓兓?相對(duì)...

    ARGUS 評(píng)論0 收藏0

  • px、em和rem實(shí)戰(zhàn)經(jīng)驗(yàn)

    摘要：前言在自適應(yīng)布局或者移動(dòng)端網(wǎng)頁開發(fā)時(shí)，我們經(jīng)常會(huì)用到和兩個(gè)長(zhǎng)度單位。，相對(duì)長(zhǎng)度單位。相對(duì)于當(dāng)前對(duì)象內(nèi)文本的字體尺寸。所有未經(jīng)調(diào)整的瀏覽器中都是。最大的優(yōu)點(diǎn)是提供一致尺寸，便于計(jì)算。為了還原設(shè)計(jì)稿和實(shí)現(xiàn)合理的布局所以需要根元素重寫。 前言 在自適應(yīng)布局或者移動(dòng)端網(wǎng)頁開發(fā)時(shí)，我們經(jīng)常會(huì)用到em和rem兩個(gè)長(zhǎng)度單位。接下來我們討論一下這兩個(gè)單位和px之間的區(qū)別，以及他們的使用場(chǎng)景等。 區(qū)別 ...

    xietao3 評(píng)論0 收藏0

  • 【基礎(chǔ)】EM 還是 REM？這是一個(gè)問題！

    摘要：但問題是究竟該用還是呢關(guān)于這個(gè)問題一直存在比較大的爭(zhēng)議。上述現(xiàn)象的出現(xiàn)，是因?yàn)槭窍鄬?duì)于當(dāng)前元素字體的大小。什么是表示，它是相對(duì)于根元素的長(zhǎng)度單位。還是在項(xiàng)目開發(fā)中究竟是選用還是一直以來爭(zhēng)議不斷。這就是前述規(guī)則中的第一條規(guī)則。 簡(jiǎn)言 應(yīng)用象EM 和 REM這種相對(duì)長(zhǎng)度單位進(jìn)行頁面排版是WEB開發(fā)中的最佳實(shí)踐。在頁面排版中較好應(yīng)用EM 和 REM，根據(jù)設(shè)備尺寸縮放顯示元素的大小。這就使得組...

    lk20150415 評(píng)論0 收藏0

  • CSS學(xué)習(xí)筆記(十六) CSS最佳實(shí)踐之可維護(hù)性篇

    摘要：國(guó)內(nèi)各大公司都已經(jīng)投入使用，在一些常見的網(wǎng)站，如淘寶騰訊小米等移動(dòng)站點(diǎn)，隨處可見其蹤影。變革之騰訊手機(jī)淘寶的設(shè)計(jì)與實(shí)現(xiàn)前端亂燉適配總結(jié)樣式重置上文已提及，這里推薦閱讀同學(xué)寫的專題文章。 前言 CSS代碼難維護(hù)眾所皆知。 為一個(gè)元素設(shè)置樣式的方式可以通過定義的class、定義的id、元素的標(biāo)簽名、元素的屬性等選擇器以及這些選擇器的組合來實(shí)現(xiàn)； 作用于某個(gè)元素上的樣式又可能來自單個(gè)樣式規(guī)...

    newtrek 評(píng)論0 收藏0

  • CSS學(xué)習(xí)筆記(十六) CSS最佳實(shí)踐之可維護(hù)性篇

    摘要：國(guó)內(nèi)各大公司都已經(jīng)投入使用，在一些常見的網(wǎng)站，如淘寶騰訊小米等移動(dòng)站點(diǎn)，隨處可見其蹤影。變革之騰訊手機(jī)淘寶的設(shè)計(jì)與實(shí)現(xiàn)前端亂燉適配總結(jié)樣式重置上文已提及，這里推薦閱讀同學(xué)寫的專題文章。 前言 CSS代碼難維護(hù)眾所皆知。 為一個(gè)元素設(shè)置樣式的方式可以通過定義的class、定義的id、元素的標(biāo)簽名、元素的屬性等選擇器以及這些選擇器的組合來實(shí)現(xiàn)； 作用于某個(gè)元素上的樣式又可能來自單個(gè)樣式規(guī)...

    keke 評(píng)論0 收藏0

發(fā)表評(píng)論

0條評(píng)論

閱讀需要支付1元查看
<