[TOC] # 第一部分：頁面展示圖片 ## 1、高清蘋果等Retina顯示屏圖片放大變得模糊 在高清蘋果等Retina顯示屏中的位圖被放大，圖片會變得模糊怎么辦？ 一般移動端的視覺稿通常會設計為傳統PC的2倍， 設計稿切出來的圖片長寬保證為偶數，并使用backgroud-size把圖片縮小為原來的1/2 //例如圖片寬高為：200px*200px，那么寫法如下 ```css .css{width:100px;height:100px;background-size:100px 100px;} ``` 其它元素的取值為原來的1/2，例如視覺稿40px的字體，使用樣式的寫法為20px ```css .css{font-size:20px} ``` ## 2、[WebP 探尋之路](http://isux.tencent.com/introduction-of-webp.html) # 第二部分：背景圖片 ## 1、background-size:20%; ## 2、 CSS怎樣才能使“響應式+固定寬高比例”？ ```css height: 0px; padding-bottom: 100%; background: url(http://img5.duitang.com/uploads/item/201408/22/20140822173420_wdmuR.jpeg) center no-repeat; ``` 完成背景圖自適應問題！而且也沒有高度自適應問題了！ # 參考 Zihua Li的:http://jsfiddle.net/luin/3g5AZ/ [純 css 實現高度與寬度成比例的效果](http://www.jianshu.com/p/56a3adebdb01)