前端讀書尋寶記之讀《包容性Web設計》有感
前端讀書尋寶記系列，會分享一些過去、現在、未來我親自閱讀過的書，選擇性的分享一些我個人認為還不錯的書籍，同時總結一下我個人認為此書的精華所在。推薦小夥伴們去看看，當然，如果沒有時間去閱讀，那可以關注我的分享，基本可以從我的分享中瞭解我分享出的書籍的精華。當然大家有什麼好書，也可以在評論區分享出來，一起進步哈~
Heydon Picering * 著—— 於坤 * 譯2017年7月第一版
噹噹圖書封面如下圖：
寫在最前
很快看完了這本書，這本書很薄，162頁，但是裡面的一些知識點還是非常的秀，就是很多人可能沒有注意到的細節，或者說根本想不到的細節，我把它們總結下來，寫篇心得吧。
先說能想到的知識點
這裡的tips
雖然很多大家都已知道，但是還是比較不錯並且值得總結出來的tips
。
1: 面對物件設計OOP
資料結構設計需要考慮面對物件，如何用物件思維進行抽象，從而使資料結構變得更加友好，這是一個很值得下功夫的過程，也是一個可以看得見能力成長的過程。
2: 文件型別Doctype
如果沒有宣告文件型別，那麼瀏覽器將會不知道怎麼解釋內容，可能會降級到不符合規範的相容模式，也就是通常所說的怪異模式。此時佈局和互動會變得不可預知，容易出錯。
3: 語言屬性lang
lang屬性對於SEO非常重要，必須設定。
4: 要允許雙指縮放
<meta name="viewport" content="width=device-width, initial-scale=1.0"> 複製程式碼
這個意見我也不知道對不對，書中建議不要在content
屬性裡面設定minimum-scale=1.0, maximum-scale=1.0, user-scalable=no
，也就是不要隨意禁止使用者縮放。因為有時使用者會想放大看清楚細節等。其實這個沒有對與錯，看產品經理怎麼定，有鍋產品背。。。
5：字型
字型大小要用rem
6: 關於absolute
和fixed
如果使用absolute
和fixed
定位，那麼當視口或內容調整大小時，定位元素不會與文件的其餘部分一起reflow
，導致佈局問題，一些元素可能會被擋住或者延伸到視口之外看不見，所以一般不要使用絕對定位。
這裡說一下專案中在使用定位時，各種定位方式的優先順序，通常情況下，我們應該優先使用flex
，當flex
無法解決一些場景的時候，正常情況下，我們肯定會優先考慮relative/absolute
。但是通過上面總結，我們發現絕對定位有時也會導致一些佈局問題，如果出現這種問題了，那我們就應該考慮一下float
了。其實我感覺對float理解的比較深刻的話，用起來也不是那麼坑爹吧。關於float
佈局，我寫了篇挺不錯的文章，可以看看可能是最全面最易懂的解析前端浮動的文章
。
充滿驚喜的細節
視口viewport
如果使用了vh
，vw
單位，則文字的大小會根據視口的寬高來自適應，也就是隱式的響應式文字，不再需要媒體查詢。但有一個問題，如果元素使用視口單位，則就無法隨著頁面縮放。為了解決這個問題，可以將視口單位的值加上em
單位的值恢復縮放功能，這樣就能確保頁面有最小字型尺寸。原理就是1em + (0 * 1vw)
仍然是1em
html { font-size: calc(1em + 1vw); }
複製程式碼
這樣文字內容就會隨著視口同比例縮放了。
備註：font-size: calc(1em + 1vw);
是漸進增強的，無法識別的時候，瀏覽器會回退到瀏覽器預設設定，也就是說，如果不相容，瀏覽器會使用原定的方式展示文字。
字型
Web
字型通常是大型的資源，應該被視為增強內容。FOIT
(Flash of Invisible， 不可見字型閃現)現象應該避免，如果字型檔案無限載入，瀏覽器就會卡在沒有文字的頁面，也要避免。
訣竅就是：載入頁面後再載入字型，使用onload
事件觸發，要實現這個效果，字型必須用base64編碼嵌入到樣式表中。同時為了解決FOIT，就必須接受FOUT
(Flash Of Unstyled Text，無樣式字型閃爍)。
行距(行高)
行高要設定成無單位的相對值，建議1.5倍間距
不要這樣寫
p{
font-size: 16px;
line-height: 24px;
}
複製程式碼
要這樣寫：
p{
font-size: 1rem;
line-height: 1.5;
}
複製程式碼
對比度
在任何情況下，都應該避免文字和背景顏色的低對比組合。比如在白色背景上使用淺灰色字型。
關於影象
點陣圖(bitmap
)，又稱柵格圖(raster graphics
)或點陣圖，是使用畫素陣列(Pixel-array/Dot-matrix
)來表示的影象。
關於curl
依賴js的靜態內容不符合Web設計基礎，也就是說不能用curl訪問，就不存在Web中。
PS：這個還是很酷的，科普一下，curl
是什麼呢，其實curl
是linux
系統中的一個命令，專門用來發送http
請求的命令，然後可以在命令列中打印出http
響應內容。比如下圖：
curl
訪問，就說明不存在Web
中。
防禦性程式設計
會經常在原始碼中留下許多不必要的內容
<p></p> <p></p> <p></p> 複製程式碼
這種就是不必要的內容，應當用防禦性程式設計從流中刪除空元素，可以使用display: none;
刪除元素的佈局，包括他們的margin
，這裡我們可以使用display: none;
配合empty
偽類來刪除所有空元素，程式碼如下：
main: empty {
display: none;
}
複製程式碼
使用flexbox實現網格，為書中程式碼片段
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
</head>
<style>
html {
font-size: 20px;
}
.flex1{
display: flex;
flex-direction: row;
/* 如果沒有足夠空間將它們放在一起的話，就自動換行顯示 */
flex-wrap: wrap;
/* 對稱分佈 */
justify-content: center;
}
.flex1 li {
/* 專案將擴充超過10em的寬度以填充可用空間 */
flex-grow: 1;
/* 確保專案可用收縮 */
flex-shrink: 1;
/* 列會隨著字型大小自動變化 */
flex-basis: 10em;
max-width: 20em;
background: skyblue;
}
</style>
<body>
<ul class="flex1">
<li>1</li>
<li>2</li>
<li>3</li>
<li>4</li>
<li>5</li>
<li>6</li>
<li>6</li>
<li>6</li>
</ul>
</body>
</html>
複製程式碼
點選觸發TP
[可自行進行修改來實時檢視佈局變化]：CodeOpen傳送門
flex-basis
可以在元素級別定義理想寬度，通過切換flex-grow
和flex-shrink
，網格元素可以圍繞這個理想寬度展開或者收縮，從而在無限範圍的視口中保持完整有序的網格。
關於flex-basis
flex-basis
可以在元素級別定義理想寬度，通過切換flex-grow
和flex-shrink
，網格元素可以圍繞這個理想寬度展開或者收縮，從而在無限範圍的視口中保持完整有序的網格。在flexbox
演算法中，flex-basis
的值是當前專案理想的寬度，如上面程式碼中，每個專案嘗試為10em
寬度，然後共享剩餘可用空間。
備註：我看網上一些前端推薦的書籍，其實感覺總缺點什麼，本人讀的書也不少了，就想分享一些讀書的心得體會吧，人菜勿噴。
文末可愛宣告：我沒有自己去擴充套件書中沒有的知識點，這樣才能更準確的把此書的真實情況表達出來，希望可以給大家一個參考。我一般寫的讀後感都是我感覺挺不錯的書籍。但也不限於前端，總之。