響應式Web設計:HTML5和CSS3實戰(zhàn)(第2版)
第十章 實現(xiàn)響應式Web設計
10.1 盡快讓設計在瀏覽器和真實設備上運行起來
讓設計決定斷點
總是從最小的屏幕尺寸開始設計，漸漸地使視口尺寸增大
這樣你就能知道在哪個地方加入斷點。
首先為最小的視口編寫CSS，然后在媒體查詢中修改其在較大視口下的表現(xiàn)。
.rule {
/* 小型視口樣式*/
}
@media(min - width: 40e m) {
.rule {
/* 中型視口樣式*/
}
}
@media(min - width: 70e m) {
.rule {
/* 大型視口樣式*/
}
}
10.2 在真實設備上觀察和使用設計
早測試，常測試！
使用像BrowserSync這樣的工具來同步你的工作 （ https://browsersync.io/ ）
配置完成后，當你保存你的工作時，諸如CSS等的變化就會被注入到瀏覽器上，而無需你不斷地刷新屏幕。
它還能通過WIFI將在不同設備上的瀏覽器刷新。
這節(jié)省了拿起每個測試設備點擊刷新的時間。
它甚至能同步滾動和點擊
10.3 擁抱漸進增強
應該編寫能夠精確描述你的內(nèi)容的HTML5標記
基于文本和內(nèi)容的網(wǎng)站
正確使用main、header、footer、article、section和aside等元素
構(gòu)建Web應用或者圖形化UI組件
需要思考一下如何提煉成有效的標記
在HTML上的優(yōu)化越多
你在CSS和JavaScript上為老式瀏覽器所做的優(yōu)化就越少
10.4 確定需要支持的瀏覽器
有的時候根據(jù)項目需要，你要從更為高級的瀏覽器開始編寫
10.4.1 等價的功能，而不是等價的外觀
網(wǎng)站在每個瀏覽器上的外觀和工作方式一樣是不現(xiàn)實也是不可取的
“支持老式瀏覽器”并不意味著“在老式瀏覽器上看起來一模一樣”。
10.4.2 選擇要支持的瀏覽器
如果這是個新項目，并且沒有統(tǒng)計數(shù)據(jù)
我通常會遵循“前兩個版本”策略
即是指當前的瀏覽器版本和之前的兩個瀏覽器版本。
如果IE12是目前的瀏覽器版本，那么你就要兼容IE10和IE11（前兩個版本）。
10.5 分層的用戶體驗
基本體驗是站點的最小可行版本
增強體驗則是包括所有功能并且最為美觀的版本
然后通過Modernizr，我們可以根據(jù)瀏覽器的兼容性優(yōu)化體驗。
實現(xiàn)體驗分層
Modernizr為基于瀏覽器兼容性的優(yōu)化提供了最為穩(wěn)健的方式
當編寫CSS的時候，“基礎”版本代碼由以下內(nèi)容組成
沒有被媒體查詢包裹的代碼
沒有被Modernizr添加選擇器的代碼
10.6將CSS斷點與JavaScript聯(lián)系起來
JavaScript總是返回寬度的像素值而不是REM值
@media(min-width: 20rem) {
body::after {
content: "Splus";
font-size: 0;
}
}
@media(min-width: 47.5rem) {
body::after {
content: "Mplus";
font-size: 0;
}
}
@media(min-width: 62.5rem) {
body::after {
content: "Lplus";
font-size: 0;
}
}
在每一個我們想和JavaScript溝通的斷點處，我們使用了after偽元素
你也可以使用before偽元素
將其內(nèi)容設置為斷點的名稱
在JavaScript中，我們可以閱讀這個值
var size = window.getComputedStyle(document.body,':after').
getPropertyValue('content');
下面是一個簡單的自我調(diào)用函數(shù)（自我調(diào)用意味著它在瀏覽器解析它的時候馬上被調(diào)用）
;(function alertSize() {
if (size.indexOf("Splus") != -1) {
alert('I will run functions for small screens');
}
if (size.indexOf("Mplus") != -1) {
alert('At medium sizes, a different function could run');
}
if (size.indexOf("Lplus") != -1) {
alert('Large screen here, different functions if needed');
}
})();
10.7 避免在生產(chǎn)中使用CSS框架
最為有名的兩個是Bootstrap（http://getbootstrap.com/ ）和Foundation（http://foundation.zurb.com/ ）
在快速制作原型方面有巨大的優(yōu)勢
在生產(chǎn)中應該避免使用它們
首先，從技術上看，添加一個框架會為你的項目帶來過多的冗余代碼。
其次，從美學的角度上看，因為這種框架十分普及，所以你的項目會和無數(shù)個其他項目看起來一模一樣。
最后，如果你只是在你的項目里復制粘貼代碼，然后調(diào)整至符合你的需求，那么你就不可能充分理解它們的原理。
10.8 盡可能使用最簡單的代碼
需要為列表中的第五個元素添加不同的樣式
并且你能操作標記，那就不要像下面這樣使用nth-child選擇器：
.list-item:nth-child(5) {
/* 樣式*/
}
<li class="list-item specific-class">Item</li>
然后使用類來添加樣式：
不僅更易懂，而且支持度也更高（舊版本的IE瀏覽器并不支持nth-child選擇器）
.specific-class {
/* 樣式*/
}
10.9 根據(jù)視口隱藏、展示和加載內(nèi)容
響應式Web設計中有一個常用的準則：
如果你在小屏幕上不加載某一部分，那么在大屏幕上也不應該加載。
意味著在每一個視口下用戶都應該能達到同樣的目的（購買產(chǎn)品、閱讀文章、完成交互）
隨著屏幕的尺寸越來越大，我們也沒有必要去增加額外的部分（窗口小部件、廣告、鏈接等）來填充空白。
將復雜的可視化工作交給CSS
JavaScript可以實現(xiàn)單獨使用CSS無法實現(xiàn)的交互效果
如果可能的話，在涉及視覺效果的時候，我們?nèi)匀粦搶⒐ぷ鹘唤oCSS來完成,這意味著:
不要單獨使用JavaScript實現(xiàn)菜單移入、移出、打開、關閉的動畫效果
相反，應該使用JavaScript在相關的部分上做簡單的類變換，然后讓類去觸發(fā)CSS展示相關的動畫效果。
10.10 驗證器和代碼檢測工具
10.11 性能
基礎條例：
(1) 減少你的資源數(shù)（例如，不要加載15個JavaScript文件，而應該將它們拼成一個）。
(2) 減小你的頁面大小（如果你能壓縮圖片，那么請壓縮）。
(3) 延遲加載非必需資源（如果你可以將CSS和JavaScript的加載延遲到頁面加載完成后，就可以大幅縮短初始化時間）。
(4) 保證頁面盡快可用（通常是上述所有步驟的副產(chǎn)物）。
有很多工具可以度量和優(yōu)化性能
最后編輯于 ：2017.12.11 10:24:37
?著作權歸作者所有,轉(zhuǎn)載或內(nèi)容合作請聯(lián)系作者
