Web技巧（10）

時間  2019-11-22
標籤 web 技巧 欄目 HTML 简体版
原文   原文鏈接

自從響應式設計的概念的提出至今也有近10年的時間了，雖然不乏看到響應式設計的身影，但仍是有不少同窗不太瞭解什麼是響應式設計或響應式設計中常會碰到的問題以及如何解決。特別是流式（自適應）排版和響應式設計難以分清楚，但這兩種排版都爲咱們提供了不少機會來更好的設計Web頁面，並且更能完善閱讀體驗，但與此同時，也帶來一些潛在的問題，好比字體大小沒法控制，圖片等比縮放難處理，甚至還有一些潛在的問題，好比可訪問性問題。在這一期中，咱們就來聊聊排版中的一些技巧，但願你們能喜歡。css

想一想排版會遇到的問題

先來想一想排版本會遇到哪些問題？無論是哪一種佈局，排版本都會有一些棘手的問題，只不過流式佈局和響應式佈局顯得多一些，據我我的經驗，在排版的時候常會碰到相似下面這樣的問題：html

  • 字號的使用
  • 圖片的縮放

有的時候還會碰到文字斷行，文本行間距等細節問題。vue

或許你們會說，像vw、vh這些視窗單位獲得支持以後，這些問題都將再也不是問題。事實上，自2013年以來，大多數瀏覽器徹底支持它們？那麼爲何還看不到流式排版呢？爲何這種Web排版功能尚未獲得更普遍的應用呢？我想涉及的問題並非單一的：html5

  • 好的響應式設計和開發仍然具備必定的困難，複雜程度較高
  • Web排版在許多設計師或開發人員中並無獲得較高的重視（認爲並不重要）
  • 可訪問性具備潛在的問題
  • 流式Web排版可能很是棘手

接下來，咱們仔細看看這些問題。ios

響應式設計和開發有困難，較複雜

對於響應式設計在社區中有一個較大的偏差，認爲能較好的適配容器就是響應式設計，其實這並非真正的響應式設計。能較好的適配容器（好比社區中常說的Flexible適配方案，vw適配方案）僅僅對Web中的各個元素作了一個等比縮放，只是縮放。事實上，響應式設計是能根據不一樣的容器空間提供最佳的佈局，讓用戶用在有限的空間閱讀到最多的內容，並且閱讀體驗也不會受限於容器空間。css3

簡單地說，在不一樣的終端上能看不到不同的設計風格。git

如此一來，要設計響應式Web和開發響應式Web，須要投入大量的精力和人力。雖然有一些優秀的工具能幫助咱們建立響應式網站，減小對響應式網站建設的成本，但仍然須要付出至關大的精力。在Web設計過程當中，挑選工具，測試它們，而後採用它們將花費大量時間。咱們尚未真正達到這樣的地步 —— 簡單地設計一個網站就能自動知足在大多數設備上能運行良好。github

無論是設計仍是開發，仍然使用數字設計工具來設計（繪製設計圖）咱們的網站，這與由代碼構成的最終Web仍是具備較大的差距。目前在市面上看到的這些工具幾乎不支持基本的吶應式Web設計，基於這樣的環境，咱們要是討論流式的排版就更難了。web

Web排版並不重要

在Web的設計和開發中，不少人都仍然侷限於給網站選好字體，設置好字號就能天然而然獲得較高質量的排版。事實上是否如此，我想你們都有體會！chrome

流式排版對可訪問性有潛在問題

在實際中，不少設計師和開發人員都不太會考慮可訪問性（特別是在咱們天朝這樣的環境之下），主要緣由仍是認識問題，以爲可訪問性不必，以爲可訪問性投入和收入不成正比。事實上，在國外的社區有不少人都一直在致力於可訪問性的建設，爲設計和開發Web頁面（或Web應用程序）提供不少提升可訪問性的建議與規則。而在流式的Web排版中有關於可訪問性的問題，並無人真正的談論過。

只是有人提到過，流式排版對可訪問性是否是存有必定的問題？

流式排版很是棘手

使用視窗單位設置font-size是件棘手的事情。雖然社區中有不少同窗在探討怎麼在font-size上運用視窗單位，但在實際生產中使用的仍是較少。對於流式排版而言，要的不是技巧，而更須要的是讓它變得容易實現和有更好的方法。在之前的博文中或多或少有提到過相似的討論：

但相比於@Matej Latin在《THE STATE OF FLUID WEB TYPOGRAPHY》一文中的討論，仍是相差甚遠。@Matej Latin在這篇教程中提到了多種運用於流式排版的字號設置方案。

接下來，咱們來看看這些方案運用於流式排版中效果更好，以及哪一種方法可讓流式排版變得不那麼複雜，易於控制。當咱們這樣作的時候，讓咱們看看在使用這種方法時是否存在任何可訪問性問題。

流式排版字號設置的幾種方案

@Matej Latin在《THE STATE OF FLUID WEB TYPOGRAPHY》一文提出了四種給流式排版設置font-size的方案：

  • 響應式排版
  • 徹底流式排版
  • 不一樣的媒體查詢中提供不一樣的字號
  • 使用CSS鎖定流式排版

響應式排版

探索流式Web排版的起點其實是響應式Web排版。當今天最多見的Web設計方法（響應式Web設計），一般以移動端佈局（Mobile First）爲先，會設置一個基本的font-size，而且在該基礎上設置其餘元素的字號。常見的方式可能像下面這樣：

html {
    font-size: 100%; // 一般設置16px
}

h1 {
    font-size: 3rem; // 3 × 16px = 48px
}
複製代碼

上面代碼設置的font-size的基礎值是瀏覽器的默認字號（一般爲16px），這是建立可訪問性網站的一個重要步驟（後面咱們可能會聊到）。接下來咱們要考慮的是其餘設備下從新處理網站的排版（佈局），就須要相應的調整font-size。最簡單，最多見的方式可使用媒體查詢在不一樣的斷點下處理這些佈局和字號。

html {
    font-size: 100%;

    @media (min-width: 768px) {
        font-size: 112.5%;
    }
}

h1 {
    font-size: 3rem;

    @media (min-width: 768px) {
        font-size: 3.5rem;
    }
}
複製代碼

上面的代碼使用@media在平板電腦上從新設置了基礎字號。平板電腦相對於手機設備屏幕更大，可用空間更大，因此字號設置得更大。

在線Demo

你能夠在你的瀏覽器打開上面的示例，嘗試改變瀏覽器視窗大小，你能夠將看到下圖這樣的效果：

採用這種方案，重點仍是在於開發者更過於關注本身的觀點，並沒把重點放在用戶層面上。由於只有斷點變化時font-size纔會有相應的變化，但不少同窗忽略了用戶能夠經過修改設備的瀏覽器默認font-size。也就是說，若是用戶是PC端訪問該網站，18px這樣的字號並不會過大，用戶也能夠很容易地調整它的大小（若是開發者不使用非相對單位（好比px）來覆蓋默認字號來取消這個控制）。

這種方式的優勢是：

  • 用戶仍然控制字號大小，沒有可訪問性問題
  • 媒體查詢能夠覆蓋不一樣屏幕寬度

其缺點是：

  • 字號大小是靜態的，更改與預約義的斷點相關聯
  • 在大屏幕上會有不少空白

徹底流式排版

從上面的示例來看，響應式排版並非最理想的。相對而言有必定的效果，但咱們能作理更好點 —— 但願咱們的字號大小在每一個屏幕上都是理想的，而不只僅是在特定的移動端屏幕、平板電腦和PC端等。

首先可能會想到的是vw、vh這樣的視窗單位來定義CSS中任何東西的大小。包括font-size。在我看來，視窗單位的引入更可能是做爲一種擴展特定的、主要是固定寬度的Web佈局。正如@Sebastian Eberlein的文章中所描述的。

儘管如此，視窗單位長期以來一直被用做一種靈活縮放font-size的方法。@Chris Coyier早在2012年就寫過相關的教程，由於咱們知道每行中最理想寬寬大約是80個字符，並且「這些單位可讓你感受完美，而後體驗任何大小的屏幕」。

效果完美，但實踐並不簡單。假設咱們這樣作：

html {
    font-size: 1.3vw;
}

h1 {
    font-size: 3vw;
}
複製代碼

上面的示例中，基本字號的設置中使用了視窗單位vw。這意味着font-size將隨着瀏覽器屏幕的寬度的變化而調整，而不只僅是像響應式排版那樣預約義斷點。但因爲屏幕寬度的變化較大，因此font-size變化也較大。

在線Demo

一樣的，打開上面的示例，調整瀏覽器寬度，你將看到的效果會以下：

該方法的優勢：

  • 在實踐中，若是不將這種方法與響應式排版相結合，該方法並無任何的好處。從上面示例中你也能夠看到，當屏幕足夠小的時候，font-size就會過於過小

其缺點是：

  • 使用視窗單位來定義font-size在某些瀏覽器中是沒法訪問（在某些瀏覽器中，用戶沒法控制font-size）
  • 使用視窗單位來定義font-size將會覆蓋用戶設置的默認字號，這將會直接影響可訪問性
  • 另外一個沒法控制的是，font-size會迅速從一個極端到另外一個極端

視窗單位和媒體查詢的結合

從前面兩個方案來看，徹底流式的Web排版方法顯然是行不通的。具備諷刺意味的是，讓它工做的惟一方法是經過媒體查詢來控制font-size的變化，但又和前面所說的響應式Web排版方法不一樣，這裏須要大量的媒體查詢條件和視窗單位相結合，從而達到限制font-size的大小。好比：

$breakpoint-1: 25em;
$breakpoint-2: 35em;
...

html {
    font-size: 1.3vw;
}

h1 {
    font-size: 3vw;
}

@media (min-width: $breakpoint-1) {
    html {
        font-size: 2vw;
    }
    
    h1 {
        font-size: 6vw;
    }
}

@media (min-width: $breakpoint-2) {
    ...
}
複製代碼

在線Demo

這個示例是將流式排版和響應式排版結合在一塊兒。若是你在瀏覽器中打開上面的示例，並嘗試調整瀏覽器視窗的大小。你將看到它比上面徹底流式的方法更好（在這個示例中使用了七個斷點）：

該方案的font-size比響應式Web排版具備更好的伸縮性，但它也帶來了其餘問題。包括可訪問性問題，若是對訪問性要求高的話，這能夠是一個禁忌呀。

該方法的優勢：

  • font-size能夠很好的縮放，並適應每一個屏幕的寬度

其缺點是：

  • 使用視窗單位定義的font-size在某些瀏覽器中對可訪問性不太友好
  • 由於使用了媒體查詢來控制font-size的縮放，因此在調整瀏覽器視窗大小時仍然會出現閃跳的現象
  • 使用視窗單位的font-size還會覆蓋用戶的默認字體大小

使用CSS鎖定流式排版

可能有人已經注意到，在流式的Web排版方法中最難控制的是font-size。咱們也知道經過添加大量的媒體查詢來控制其大小並不可取也不是最理想的。因此咱們須要找一個更佳的替代方案。@Mike Riethmuller、@Tim Brown和@Geoff Graham都在致力於這方面的研究，並且找到了最終的解決方案，即 使用CSS鎖（CSS Locks）定流式排版多是最佳的方案：

這是一個有趣的技術。它設置了最小的font-size和應該使用的屏幕寬度(Minimum Viewport)，最大的font-size和應該使用的屏幕（Maximum Viewport），以及二者之間的全部可變font-size。它優雅地解決了font-size在不一樣屏幕寬度下縮放過快的問題。下面這圖能夠很好的描述這種技術方案：

font-size的大小不會在左右區域發生變化，它們只會在中間區域縮放。下柵極（Lower Gate）是最小的屏幕大小，咱們對它應用固定的font-size，一樣的，上柵極（Upper Gate）是最大的屏幕寬度，對應也採用固定的font-size。

另外該技術方案比如在運河和河流航行中，船閘是一種在不一樣水位的水域之間升降船隻的裝置。

該方式設置font-size能夠經過一個計算公式來完成，在CSS中藉助calc()函數來實現，將會給這個函數傳四個變量：最小字號、最大字號、最小視窗寬度和最大視窗寬度：

在線Demo

調整瀏覽器視窗大小看到的效果以下：

這個效果很是好。若是屏幕寬度介於最小值和最大值之間，font-size能夠很好的縮放。若是屏幕小於最小值或大小最大值，則切換到固定的font-size。從理論上講，這很是有效。但當我嘗試着在Chrome上更改瀏覽器的默認font-size時，它對上面示例的代碼沒有任何影響。這是一個問題，由於這意味着這種方法仍然忽略用戶設置的默認font-size，所以會致使可訪問性問題。

該方法優勢是：

  • 在調整瀏覽器視窗的大小時，font-size不會有跳躍的現象
  • font-size大小不能在最小或最大屏幕寬度上進行縮放

缺點是：

  • 使用視窗單位設置font-size會覆蓋用戶默認設置的font-size，對可訪問性有必定的影響

無論採用上面哪一種方案，流式排版（或者響應排版）都和font-size有極大的關係，在CSS中設置font-size大小主要是由CSS的單位來控制，因此說，瞭解CSS中單位相關的知識有助於咱們更好的理解這方面的知識。我的建議您花點時間閱讀下面幾篇文章：

咱們看到的大部分是基於font-size的變化，特別是最後一節，使用CSS Locks技巧。即 使用CSS的calc()、vw、vh和font-size來鎖定font-size的變化。

該技術還有另外一個專業術語：線性插件。 線性插件可能在JavaScript能常聽到。

其實這樣的原理也能夠運用於別的地方。好比@David Bachmann 提到的將該原理運用於其餘的CSS屬性中。

@function between($from, $to, $fromWidth, $toWidth) {
    $slope: ($to - $from) / ($toWidth - $fromWidth);
    $base: $from - $slope * $fromWidth;

    @return calc(#{$base} + #{100vw * $slope});
}

$small: 400px; 
$large: 1000px;

.Container {
    padding: 20px;
    
    @media (min-width: $small) {
        padding: between(20px, 100px, $small, $large);
    }

    
    @media (min-width: $large) {
        padding: 100px;
    }
}
複製代碼

上面的代碼演示瞭如何在容器的padding之間進行切換。從移動端的20px切換到PC端的100px。在這二者之間的任何大小都將獲得計算出的padding，即範圍在20px ~ 100px之間。爲了防止padding超出最大值，咱們能夠藉助媒體查詢來將其覆蓋。

你可使用了vw的適配方案，發如今PC端會形成padding、margin運用了vw的視窗單位元素太大了。那麼你就能夠考慮這樣的線性插值的技術方案來處理。

@Carly Sylvester 使用該技術寫了一個線框圖的案例，感興趣的能夠查看一下相關源：

Rhythm給排版中的運用

上面咱們的重點是圍繞着font-size的設置，特別是流式排版中怎樣設置font-size是最佳的。正如上面所闡述的，實現方案有多種，但不一樣的方案都有其利弊。在實際使用的時候，應該根據本身的業務場景來決定。

但Web的排版涉及到的知識點以及細節是很是的多。好比在垂直方向，不少時候要處理元素之間的間距，好比padding、margin和line-height等。在排版中有一個專業的術語，即Rhythm。Rhythm是一個較爲複雜的課題，這裏不會作較詳細的闡述，若是您感興趣的話，能夠本身去深刻了解這方面的知識。接下來咱們只會簡單的瞭解一下該方面的知識。

在排版中，無論是水平方向仍是垂直方向都有Rhythm的身影：

在水平方向能夠藉助CSS的letter-spacing、font-kerning、text-align、text-indent、hanging-punctuation、list-style-position和 font-varialbe等屬性來控制。

對於垂直方向的Rhythm相比於水平方向的要更復雜的多，也正由於其複雜，不少開發同窗難於掌握該方面的技巧，甚至選擇性的忽略。和水平方向有點相似，控制垂直方向的Rhythm涉及到的CSS屬性主要會有font-size、line-height、margin-top/bottom、padding-top/bottom、border-top/bottom以及字體和字體方面的baseline。

CSS中的baseline、font-size和line-height是CSS中（也能夠說是Web排版中的重中之重）較難的部分，建議你們花點時間閱讀《深刻了解CSS字體度量，行高和vertical-align》一文。

若是您對Rhythm方面的知識感興趣的話，能夠閱讀下面這些參考資料：

若是你是位拿來主義，那能夠考慮線上的Gridlover工具直接幫你計算出來：

這些都有必定的排版批例，好比說下面幾篇就是關於黃金比例排版的計算：

愈來愈以爲，任何一個細節或方案都有深層的理論在支持。

順便插一句，你們在完成視覺還原時，有文本元素的垂直間距老是難於控制。

有關於這方面的問題，@Ethan Wang提出了 4px基線網格 相關的理論，能夠較好的幫助你們解決這個問題：

文本的斷行

在Web排版中不免離不開長文本的運行，那麼在排版的時候就會碰到長文本撐破容器，從而影響用戶閱讀的體驗。好比下面這種現象：

咱們能夠像下面這樣來解決：

.hyphenate {
    overflow-wrap: break-word;
    word-wrap: break-word;
    hyphens: auto;
}
複製代碼

而CSS中處理斷行或處理文本的CSS屬性還有word-break、overflow-wrap、hyphens、link-break和text-wrap。這些屬性不一樣的運用會獲得不一樣的效果：

在線Demo

有關於這方面更多的介紹，能夠閱讀：

其實早在第3期的時候，也提到了斷行排版：連字符hyphens的相關知識。

圖片縱寬比

Web中圖片的運用是常見的場景之一，在固定佈局下，圖片的使用難度不會太麻煩。但在響應式佈局或者說流式佈局當中，圖片的使用難度相對而言就要更難一些。好比說響應式Web到今天已有近十年了，對於圖片的處理一直都沒有找到較好的方案。

在Web技巧的第一期，咱們就是圍繞着響應式圖片展開的。在該文中咱們提到過圖片寬高比的一些處理方案：

事實上平時使用圖片時，爲了作適配，更多采用的方案是使用background-size和object-fit來處理。事實上這樣的處理並非最佳的方案，他們都有一樣的一個現象，採用一張圖片硬性的將圖片填充整個容器。在流式的排版中，咱們的容器可能會隨時跟着視窗的大小進行變化，那麼咱們就須要像上面所說的採用寬高比來作相關的處理。

雖然上面文章提到的技術均可以模擬出寬高比的效果，但能夠說是一種hack手段。值得慶幸的是，咱們能夠直接使用一些原生的技術來實現。

首先，img標籤會提供一個intrinsicsize：

<img intrinsicsize="400x300" style="width: 100%" />
複製代碼

intrinsicsize屬性會告訴瀏覽器用intrinsicsize屬性中指定的width/height覆蓋img的實際大小。具體的說，這些尺寸和圖像上的naturalWidth/naturalHeight的圖像柵格將返回此屬性中指定的值。

對於video也將以這個大小光柵化，而視頻上的videoWidth/videoHeight將返回intrinsicsize屬性的值。

全部其餘圖像大小操做的行爲都是相同的。好比：

  • 若是沒有設置width/height，則圖像尺寸由intrinsicsize指定
  • 若是在圖像上設置了width，那麼intrinsicsize將設置高度讓圖片保持正確的長寬比
  • 若是在圖像上同時設置了width和height，那麼intrinsicsize屬性的值只會影響naturalWidth/naturalHeight的值，而不影響圖片的渲染大小

intrinsicsize是img的屬性，屬於HTML屬性的範疇，除此以外，CSS中還提供了一個原生的屬性aspect-ratio能夠直接用來設置圖片的長寬比：

img {
    aspect-ration: 3 / 2
}
複製代碼

另外還能夠藉助CSS的attr()函數配合元素的width和height來處理長寬比：

<img src="image.jpg" width="800" height="600" />

img, video {
    aspect-ratio: attr(width) / attr(height);
}
複製代碼

有關於這方面更多的介紹能夠閱讀下面相關的文章：

小結

在這一期中，主要圍繞着流式排版展開的。主要介紹瞭如何調整font-size，讓流式排版的在閱讀上有一個較好的用戶體驗。固然，無論是哪一種排版還有不少細節是值得你們去思考的，好比說文字的相關屬性，圖片、視頻等相關屬性的設置，另外就是間距等使用。

上面的內容雖然涉及到了一些排版相關的知識，但不必定徹底全面，若是你有這方面的經驗，歡迎在下面的評論中與咱們一塊兒分享。

相關文章
相關標籤/搜索
每日一句
    每一个你不满意的现在，都有一个你没有努力的曾经。
本站公眾號
   歡迎關注本站公眾號,獲取更多信息
聯繫我們 最近搜索 最新文章 沪ICP备13005482号-10 MyBatis教程 SQL 教程 MySQL教程 Java 教程 Thymeleaf 教程 Hibernate教程 Spring教程 Redis教程