web前端基礎篇⑨

標籤：

1.web端、app端 目前實現響應式布局，主要用以下兩種方式。
CSS原生代碼響應式布局 @media screen。
bootstrap行動裝置優先、內建架構。

相容性 用原生代碼的話 根據不同的螢幕尺寸，用@media screen引入不同的值
用bootstrap，js檔案自適應，優點是不用分螢幕尺寸，只用改一些小的資料。
web和app圖不能相同，為了瀏覽速度最好使用雪碧圖。

APP端。
CSS原生代碼寫 需要注意：①寬高，使用百分比的方式。
②寬的話，使用rem，不能在一套css裡面使用兩個單位，使用rem，最好用百分比。
③@media screen格式
④margin padding建議也用百分比
⑤meta viewport一定要加。允許（不允許）使用者縮放
優雅降級：一開始就構建完整的功能，然後再針對低版本瀏覽器進行相容
漸進增強：針對低版本瀏覽器進行構建頁面，保證最基本的功能，然後再針對進階瀏覽器進行效果、互動等改進和追加功能達到更好的使用者體驗。

優雅降級是從複雜的現狀開始，並試圖減少使用者體驗的供給，而漸進增強則是從一個非常基礎的，能夠起作用的版本開始，並不斷擴充，以適應未來環境的需要。降級（功能衰減）意味著往回看；而漸進增強則意味著朝前看，同時保證其根基處於安全地帶。

web前端基礎篇⑨