在我們做項目過程中，可能會遇到一個問題，就是給個背景圖的尺寸大小是一樣的，可是屏幕大小卻有很多種。
比如app前面的幾個引導頁，你收到的是固定大小尺寸的照片，怎么讓這個屏幕可以跟背景圖片相適應呢？
有一些解決方案是，根據不同的屏幕大小做不同的照片尺寸，可是這樣添加了設計師的工作量，又要加載很多圖片，性能變差了不說，還加多了工作量。
有人說那把圖片壓縮啊，或者用css sprite 拼合成一張圖片然后根據background-position設置背景的位置。
可是這些對我來說：“hao gui ma fan”哦
這時我就想到之前用過css3的一個新屬性，就是可以使圖片布滿整個屏幕，就是“background-size”:"cover";
然后我就用了，可是我的圖片，在不同屏幕顯示不同的尺寸，我要顯示的內容跑到屏幕外了，之后我就查了background-size的具體用法
在google的時候,看到了一篇background-size說的挺好的一篇文章，http://www.w3cplus.com/content/css3-background-size
background-size: auto || <length> || <percentage> || cover || contain
然后出現了下面的取值說明：
1、auto:此值為默認值，保持背景圖片的原始高度和寬度；
2、<length>此值設置具體的值，可以改變背景圖片的大小；
3、<percentage>此值為百分值，可以是0％〜100％之間任何值，但此值只能應用在塊元素上，所設置百分值將使用背景圖片大小根據所在元素的寬度的百分比來計算。
4、cover：此值是將圖片放大，以適合鋪滿整個容器，這個主要運用在，當圖片小於容器時，又無法使用background-repeat來實現時，我們就可以采用cover;將背景圖片放大到適合容器的大小，但這種方法會使用背景圖片失真；
5、contain:此值剛好與cover相反，其主要是將背景圖片縮小，以適合鋪滿整個容器，這個主要運用在，當背景圖片大於元素容器時，而又需要將背景圖片全部顯示出來，此時我們就可以使用contain將圖片縮小到適合容器大小為止，這種方法同樣會使用圖片失真。
當background-size取值為<length>和<percentage>時可以設置兩個值，也可以設置一個值，當只取一個值時，第二個值相當於auto，但這里的auto並不會使背景圖片的高度保持自己原始高度，而會與第一個值相同。
看完之后，我就把每個值都試了一遍，可是不對哦，每個屬性都不是我要的。
后來認真解析一遍，發現其實每個屬性都有自己的結果，具體解釋看上面。這時不如直接獲取屏幕的寬度和高度，（因為我寫的頁面是用js寫的）
這時果斷用了var wid_height=$(window).height();來獲取屏幕的高，
然后呢，在傳入頁面時，在寫app頁面時，就已經將width設置為“：@app width 1”,就是屏幕的寬度，至於為什么這么寫，這是框架封裝出來的， 就不要想那么多了。
然后在設置的時候就以“background-size”:"100%"+win_height;來傳入。（這里用的方法就是“background-size”:"<percentage> <percentage>"）
測試一下，大功告成。很開心，用最簡單的方法將問題解決了，界面又好看。
總結一下，首先就是有一點基礎，所以知道用什么，之后呢，google是一個好幫手，但是google來的東西畢竟是其他人的，你要善於理解其本質並加以運用，最后還要結合你當前所處的環境，才能最終解決你所遇到的問題。
好了，不啰嗦那么多，旁邊的程序猿又說我在裝逼了，其實我只是想把自己用最好的、簡單的方法將復雜的問題解決，這個思想傳遞下去。