這一期中我們主要來聊聊全屏的事情。對於全屏的佈局，大家可能首先想到的是

100%

（或

100vw

）來實現，但如果你要在一個限寬的容器中實現一個全屏效果呢？比如說，一個Banner區全屏顯示。類似這樣的效果在PC端是非常常見的一個效果。可能會有很多同學會說，這樣的效果有什麼好聊的，不是非常簡單的Layout嗎？其實還是有點事情可聊的。如果你感興趣，不仿繼續往下閱讀。

全屏寬度的事情

在Web佈局中，特別是在PC端中，常常可以看到這樣的設計風格：內容居中，然後Banner區全屏。這也就是標題所說的效果，限寬的容器中實現全屏效果。那麼問題來了，在實際中如何實現在限寬的容器中實現全屏效果。比如下面的設計風格：

看到上圖的效果，我們可能首先會想到從HTML結構上來做相應的處理：

對應的CSS樣式：

。banner 。container {

width： 100%

}

如果對於多個

區域全屏

和多個區域限寬居中呢？如果還是從結構上做處理的話，可能會：

CSS並不會太複雜：

。full-width {

width： 100%；

}

。wrap {

width： 80%；

max-width

： 24em；

margin： 0 auto；

}

這其實很簡單。如果我們換過一個環境或提高限制條件呢？假設你是在為一個CMS系統做開發（你並沒有自主修改HTML的許可權）。即你的結構有能都是這樣的一個模式：

在

。container

中設定一個限制寬度，比如：

。container {

width： 80%；

max-width： 80vw；

margin： 0 auto；

}

基於這樣的一個Layout結構，如果

header

、

。banner

和

footer

區域需要全屏顯示。在不修改HTML結構的情況之下，如何實現需要的效果。

負margin和正padding相互抵銷

大家是否還記得等高佈局，在等高佈局的實現方案中就有一個負

margin

和正

padding

相互抵銷的方案。那麼如果僅實現一個全屏的背景顏色也可以使用該方案：

header {

margin： 0 -9999rem；

padding： 1rem 9999rem；

}

負責margin和正border相互抵銷

和前面的一個方案類似，只不過把正

padding

換成了

border

：

。banner {

border-left

： 600rem solid maroon；

border-right： 600rem solid maroon；

margin： 0 -600rem；

}

vw和calc（）相結合

使用

vw

和

calc（）

兩者的結合可以讓事情變得更為簡單，比如：

。full-width {

width： 100vw；

position： relative；

left： 50%；

right： 50%；

margin-left： -50vw；

margin-right

： -50vw；

}

在CSS中，我們可以藉助

transform

中的

translate（）

來替代

left

和

right

，上面的示例程式碼可以變成：

。full-width {

width： 100vw；

transform： translateX（calc（（ 960px - 100vw ） / 2））； // 假設限寬的容器寬度為960px

}

上面的程式碼咱們繼續最佳化一下：

960px

相當於

100%

，這樣一來

960px / 2

也就相當於

50%

；對應的

100vw / 2

就變成了

50vw

。這樣上面的程式碼就變成了：

。full-width {

margin-left： calc（50% - 50vw）；

margin-right： calc（50% - 50vw）；

}

如果你使用Sass這樣的CSS處理器，你還可以將其封裝成一個

@mixin

：

@mixin full-width（$support-type： margin，$min-width：null）{

@if $support-type == ‘margin’ {

margin-left： calc（-50vw + 50%）；

margin-right： calc（-50vw + 50%）；

// margin-left： calc（-100vw / 2 + #{$min-width} / 2）；

// margin-right： calc（-100vw / 2 + #{$min-width} / 2）；

}

@if $support-type == ‘position’ {

width： 100vw；

position： relative；

left： 50%；

right： 50%；

margin-left： -50vw；

margin-right： -50vw；

}

@if $support-type == ‘translate’ {

width： 100vw；

transform： translateX（calc（（#{$min-width} - 100vw）/2））；

}

}

有了上述定義的混合宏，在實際使用的時候，只需要向下面這樣呼叫：

。full-width {

@include full-width（margin，960px）；

}

使用

vw

和

calc（）

函式來實現限寬容器中任何一個單一元素實現全屏佈局。另外，

vw

還可以配合偽元素、

padding

或者說百分比和

padding

也可以實現一些類似的佈局效果：

有關於這方面更詳細的介紹可以閱讀：

如何在限寬的容器中實現全屏效果

Full Browser Width Bars

The “Inside” Problem

關於display屬性的一二

在Web技巧第四期中末尾向大家介紹了CSS中重要的屬性之一

display

，在未來的

display

中可以使用兩個值。而@Rachel Andrew花了三篇文章的篇幅來介紹CSS的

display

屬性：

Digging Into The Display Property： The Two Values Of Display

Digging Into The Display Property： Box Generation

Digging Into The Display Property： Grids All The Way Down

如果想對

display

有一個深入的瞭解，那麼這幾篇文章對你是有較大的參考價值或者文章中相關的內容是非常值得我們去深挖。當然，想更深入的把

display

聊的清楚一些，那麼我們很有必要花更多的時間來梳理。如果你感興趣的話，歡迎關注後續相關的更新，我將會花一到兩篇的篇幅和大家重新來聊

display

。如果你不想等的太久，除了上面的文章之外，下面這幾篇文章也是有助於你更好的理解

display

：

CSS的display：contents

CSS的display：flow-root

More accessible markup with display： contents

Display： Contents Is Not a CSS Reset

字型圖示使用的相容性

在《Web中的圖示》一文中主要和大家一起聊了聊Web中的圖示（Icon圖示）如何應該，應該怎麼去選擇。雖然SVG的Icon在實際使用中已經非常的成熟了：

如何在Vue專案中使用SVG Icon

SVG Sprite

Inline SVG vs Icon Fonts

但還是有很多同學在使用字型圖示，而且有關於字型圖示相關的介紹也非常的多：

@font-face製作Web Icon

自定義Font Icon

如何把你的圖示轉換成Web字型

為什麼要用和如何使用字型圖示

如何製作自己的網頁字型圖示

但字型圖示的使用過程中會存在很多的問題。@zachleat在《The Scoville Scale of Web Font Loading Opinions》為Web字型載入做了一個主題的介紹，而且有關於這方面的優秀教程，在網際網路上大把：

Delivering Octicons with SVG

Seriously， Don’t Use Icon Fonts

Death to Icon Fonts

Making the Switch Away from Icon Fonts to SVG： Converting Font Icons to SVG

而字型圖示和字型載入存在一定的相容性問題。簡單地說，字型圖示似乎存在Web標準之外。換句話說就是

font-display

沒有與圖示字型相容的有效值。

載入字型圖示時，通常不希望有一個降級文字（回退文字）渲染。它不是典型的無樣式文字（FOUT）場景。如果字型圖示沒有回退文字渲染，誰都不知道字型載入未成功的時候會看到什麼。

你可有在訪問有字型圖示的Web頁面時，字型未載入或載入失敗時看不到圖示，而是一個帶顏色的方框

。

使用字型圖示都會藉助CSS的

@font-face

屬性，在

@font-face

指令中使用

font-display

來載入自定義字型。這個屬性可以新增以下的值：

auto

：預設值。典型的瀏覽器字型載入的行為會發生，也就是使用自定義字型的文字會先被隱藏，直到字型載入結束才會顯示

swap

：後備文字立即顯示直到自定義字型載入完成後再使用自定義字型渲染文字。在大多數情況下，這就是我們所追求的效果

fallback

：這個可以說是

auto

和

swap

的一種折中方式。需要使用自定義字型渲染的文字會在較短的時間不可見，如果自定義字型還沒有載入結束，那麼就先載入無樣式的文字。一旦自定義字型載入結束，那麼文字就會被正確賦予樣式

optional

：效果和

fallback

幾乎一樣，都是先在極短的時間內文字不可見，然後再載入無樣式的文字。不過

optional

選項可以讓瀏覽器自由決定是否使用自定義字型，而這個決定很大程度上取決於瀏覽器的連線速度。如果速度很慢，那你的自定義字型可能就不會被使用

block

：為字型提供一個短暫的阻塞週期和無限的交換週期，它將使用不可見的文字長達

3s

，並顯示回退文字，直到Web字型載入完成。這是最佳選項，但仍然不是很好

有關於

font-display

更詳細的介紹可以閱讀《

font-display的用法》一文。

要解決這些問題，可以使用CSS字型載入API強制不可見的文字，直到圖示字型成功載入。或者使用使用SVG圖示。

七個有用的JavaScript小技巧

@David Walsh整理了使用JavaScript的幾個小技巧。

獲取陣列的唯一值

透過

。。。new Set（）

得到一個唯一值的陣列：

var j = ［。。。new Set（［1， 2， 3， 3］）］

>> ［1， 2， 3］

陣列和

布林值

透過

map

和

filter

來過濾掉陣列中的布林值（比如

0

、

undefined

、

null

、

false

等）：

myArray。map（item => {

//。。。

}）。filter（Boolean）

比如：

［0， undefined， false， 1， 23］。map（item=>{ return item }）。filter（Boolean）

>> ［1， 23］

建立空物件

可以使用

{}

來建立一個

看起來像空的物件

，但該物件仍然有一個

__proto__

和

hasOwnProperty

和其他物件方法。然而，有一種方法可以建立一個純“

dictionary

”物件：

let dict = Object。create（null）

dict。__proto__ === “undefined”

>> false

合併物件

在JavaScript中合併多個物件的需求一直存在，特別是當我們開始建立類和帶有選項的元件時：

const person

= {

name： ‘David Walsh’，

gender： ‘Male’

}

const tools = {

computer： ‘Mac’，

editor： ‘Atom’

}

const attributes = {

handsomeness： ‘Extreme’，

hair： ‘Brown’，

eye： ‘Blue’

}

const summary = {。。。person， 。。。tools， 。。。attributes}

需要函式引數

能夠為函式引數設定預設值是JavaScript的一個很棒的功能，但看看這個技巧，它要求為給定的引數傳遞值：

const isRequired = （） => {

throw new Error（‘param is required’）

}

const hello = （name = isRequired（）） => {

console。log（`hello ${name}`）

}

解構的別名

解構是一個非常受歡迎的JavaScript，但有時我們更喜歡用其他的名稱引用這些屬性，所以我們可以利用別名：

const obj = { x： 1}

const { x } = obj

const {x： otherName} = obj

獲取查詢

字串

引數

多年來，我們編寫粗糙的正則表示式來獲取查詢字串值，但那些日子已經一去不復返了，輸入

URLSearchParams

API即可：

// Assuming “？post=1234&action=edit”

var urlParams = new URLSearchParams（window。location。search）；

console。log（urlParams。has（‘post’））； // true

console。log（urlParams。get（‘action’））； // “edit”

console。log（urlParams。getAll（‘action’））； // ［“edit”］

console。log（urlParams。toString（））； // “？post=1234&action=edit”

console。log（urlParams。append（‘active’， ‘1’））； // “？post=1234&action=edit&active=1”

有關於陣列和物件更多的介紹可以點選：

陣列相關的教程

物件相關的教程

總結

這一期中我們主要一起聊了聊如何在限寬的容器中讓某部分實現全屏顯示，除了在結構上實現所需的效果之外，還可以在單個元素上藉助一些CSS的特性來完成，比如負

margin

和正

padding

、或者負

margin

和

border

這樣的互負抵銷的方式；也可以使用

vw

和

calc（）

讓事情變得還更簡單。

display

是CSS的重要內容之一，@Rachel Andrew的三篇博文，讓我們對CSS的

display

有了一個更深層次的理解，在今年的佈局或者在使用

display

會變得更明瞭。另外圖示是Web中常用的一部分，這裡羅列了字型圖示使用的一些教程以及如何藉助

font-display

來讓字型載入讓使用者有一個更好的體驗。雖然

font-display

可以對字型載入做一些最佳化，但使用字型圖示依舊是有一些缺陷的，建議大家還是考慮使用SVG圖示。

最後，把@David Walsh整理的幾個JavaScript小技巧列入到這一期，希望這些小技巧能在實際開發中給大家帶來一些幫助。