[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)
- 序
- 開發自己的博客
- 面試集合
- 基礎
- 1、JavaScript
- js技巧
- 2、CSS
- position之absolute
- em與rem
- inline-block
- background
- 圓角、透明度、漸變
- 關于css中的0和none
- css display:none小結
- z-index小結
- 理解滾動條
- 有關@font-face的問題
- 3、HTML
- URI中依賴協議的URL
- 4、MySQL
- limit使用
- 5、jQuery
- 6、移動Web開發
- 設計稿與分辨率
- 字體
- 圖片的自適應
- 7、前端布局bug問題(!<=IE8)
- SEO與頁面結構
- seo
- vsphere 虛擬服務器
- 代碼里的彩蛋(神注釋)
- 玩轉HTML5移動頁面
- 知識梳理
- JS 鍵盤碼
- 其他資源記錄
- temp
- TODO
- 簡單有趣的庫??
- xx