[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)