1 .web響應(yīng)式的挑戰(zhàn)在于很容易加載很多不必要的內(nèi)容汛蝙，過(guò)大的圖片儡湾，沒(méi)必要的css和js.
2 .如何避免響應(yīng)式網(wǎng)站在不同的網(wǎng)站上所傳輸?shù)捻?yè)面大小幾乎是一樣的息楔。在設(shè)計(jì)響應(yīng)式網(wǎng)站的時(shí)候仔細(xì)斟酌網(wǎng)站時(shí)所需要的資源加載策略万矾，就能創(chuàng)造出在任何尺寸上的屏幕上都能表現(xiàn)極佳的用戶體驗(yàn)
3 .當(dāng)由桌面版設(shè)計(jì)改成小屏幕版的設(shè)計(jì)時(shí)更容易突出重绷，那些為桌面版呈現(xiàn)而優(yōu)化的資源會(huì)如何變化谤民，通常是一成不變堰酿，圖片還是原來(lái)的大小，只不過(guò)是通過(guò)css縮小了視覺(jué)尺寸张足，字體的傳輸?shù)膶?shí)現(xiàn)和桌面版也是一樣触创。
4 .從上面的例子也可以看出，為什么bootStrap的設(shè)計(jì)原則是“移動(dòng)優(yōu)先”
5 .圖片方面：使用媒體查詢來(lái)設(shè)置background-image为牍，display：none和或者把這個(gè)使用到background-image上面圖片都是會(huì)加載的哼绑。在現(xiàn)代瀏覽器中，最好的方法是使用HTML的提供的picture元素碉咆，新標(biāo)準(zhǔn)可以通過(guò)匹配媒體屬性告訴瀏覽器應(yīng)該加載的圖片資源抖韩。如果不支持這個(gè)屬性的話，也可以使用img的sizes屬性疫铜，來(lái)配合新標(biāo)準(zhǔn)實(shí)現(xiàn)優(yōu)化
字體
1 .只在大屏下加載自定義字體茂浮，讓移動(dòng)用戶盡量避免
性能預(yù)算示例
1 .頁(yè)面總加載時(shí)間：2s
2 .頁(yè)面總大小:300kb
3 .speed Index:1000mm
基于“移動(dòng)優(yōu)先設(shè)計(jì)”思考的好處
1 .預(yù)先凸顯關(guān)鍵問(wèn)題-這個(gè)頁(yè)面內(nèi)的核心內(nèi)容是什么？
2 .為用戶提供最重要的功能和內(nèi)容
3 .建立設(shè)計(jì)模式以及他們?cè)诓煌叽缟系钠聊簧先绾巫兓?br>
4 .從無(wú)障礙訪問(wèn)的角度考慮網(wǎng)站-即在低網(wǎng)速或者低端設(shè)備上的可訪問(wèn)性如何
5 .移動(dòng)網(wǎng)站并不是桌面的附庸壳咕，反之亦然席揽，內(nèi)容等同并不意味著每個(gè)平臺(tái)的體驗(yàn)是應(yīng)該一致，在設(shè)計(jì)開(kāi)發(fā)的時(shí)候應(yīng)該充分考慮用戶的需求
面對(duì)的問(wèn)題
1 .廠商機(jī)型豐富,開(kāi)發(fā)高級(jí)版和簡(jiǎn)易版
2 .多移動(dòng)平臺(tái)：廠商各自訂制的系統(tǒng)谓厘，ios的不同版本兼容
3 .網(wǎng)絡(luò)復(fù)雜幌羞，多變。2G-5G,三大運(yùn)營(yíng)商的不同讓步竟稳，應(yīng)用性能環(huán)境會(huì)隨著移動(dòng)信號(hào)的改變而變得更不穩(wěn)定属桦。
4 .
