移動端rem佈局背景圖片使用以及sprite雪碧圖

時間 2019-11-12

標籤移動 rem 佈局背景圖片使用以及 sprite 雪碧欄目無線简体版

原文原文鏈接

如今移動端頁面用rem佈局已是一大流派了，成熟的框架如淘寶的flexiable.js，墨塵寫的更輕量級的hotcss。用rem做單位使得元素可以自適應後，還有一塊須要關注的，那就是背景圖片。javascript

rem佈局

所謂rem佈局就是指爲文檔的根節點<html>元素設置一個基準字體大小，而後全部的元素尺寸都以rem爲單位來寫。好比將<html>的字體設爲100px，若是須要作一個100*200的元素，css如是寫：css

div{
    width: 1rem;
    height: 2rem;
}

那麼最終獲得的元素寬高就是100*200px了。html

爲了可以在不一樣尺寸的手機屏幕上自適應，須要用js來判斷手機寬度，並動態設置<html>的字體大小，這樣基準字體變了，元素的尺寸天然相應變化，達到了自適應的效果。java

此處只介紹基本概念，rem佈局方案的其餘細節不是本篇的範疇。最先提這個方案的應該是winter寒老溼，有沒有人更早使用我就很差考證了。git

雙倍設計稿

爲了能在視網膜屏下清晰顯示，如今的設計稿通常都是基於iPhone5的寬度(320)或者iphone6的寬度(375)，進行雙倍。也就是說，設計稿的寬度通常是640或者750.github

這個尺寸也不是絕對的，由於iPhone6 plus的dpr值爲3，也有設計稿進行三倍尺寸，這樣能在iPhone6 plus上完美顯示。固然對於Android設備來講狀況就更復雜了，dpr值什麼樣的都有，因此雙倍設計稿算是一個折中方案，大致上能保證全部設備清晰顯示圖片。框架

此時，咱們在頁面上還要作一件事情，那就是動態設置<meta>中的viewport屬性，將scale改爲0.5（dpr爲2）或者其餘值，這樣咱們寫css的時候，就能夠按照原設計稿的尺寸來寫了。iphone

咱們切出來的圖片是雙倍大小，可是頁面上的元素已經被動態縮小了，若是要作背景圖片的話，得想辦法讓圖片跟着縮小才行。佈局

cover與contain

CSS3爲background-size屬性增長了兩個值：cover與contain。這個兩個值容許咱們指定背景圖片的自適應方式。它倆有什麼區別呢？字體

從語言上描述，cover是拉伸圖片使之充滿元素，元素確定是被鋪滿的，可是圖片有可能顯示不全。contain則是拉伸圖片使圖片徹底顯示在元素內，圖片確定能顯示全，可是元素可能不會被鋪滿。

上面說的「可能」的狀況，發生在元素尺寸和圖片尺寸寬高比例不一致的時候。

下面經過例子來演示一下這二者的用法。好比咱們以iPhone5爲例，此時dpr爲2，頁面scale爲0.5，基準字體大小爲100px。設計稿上有一張90*200px的圖片。那麼css應該這麼寫：

#mm{
    width: 0.9rem;
    height: 2rem;
    background-image: url(mm.jpg);
    background-size: contain;
    background-repeat: no-repeat;
}

效果以下：

當元素與背景圖片的大小同樣，或者是寬高比例一致時，contain和cover的填充效果是同樣的，由於二者在拉伸後總能使圖片「剛好」徹底充滿元素。

可是有時候元素的寬高比例是不肯定的，好比有一張寬度爲100%，高度爲200px的圖片。此時contain和cover的區別就顯示出來了。以下圖：

能夠看到contain的時候，元素右側有空白沒有填滿。而cover的時候，元素雖然填滿了，可是有一部分圖片已經拉伸到元素外部看不到了。這就是二者的區別，實際應用的時候要根據具體狀況來定。

background-size取具體值

你們知道background-size能夠取具體的值以及百分比，那麼咱們直接把背景圖片大小設置爲跟元素大小同樣不就完了嗎？還費什麼勁搞什麼自適應。

固然是能夠的。好比咱們把上面的css改爲這樣：

#mm{
    width: 0.9rem;
    height: 2rem;
    background-image: url(mm.jpg);
    background-size: 0.9rem 2rem;
    background-repeat: no-repeat;
}

徹底能夠實現一樣的效果。

只是我本人在寫css的時候很不喜歡寫具體值，通常是能自適應就自適應。這樣若是後期要改動元素的大小，只要改一處就行，因此我更喜歡用contain或cover。

sprite圖片的處理

爲了合併圖片請求咱們常常會用到sprite技術。在rem佈局方案下，使用contain或cover來縮放背景圖片就沒法奏效了。由於元素的背景實際上是sprite圖片的局部，contain和cover只能對整張圖片進行縮放，沒辦法控制到局部的大小。

好比有以下一張200*50的sprite圖。

在使用contain縮放後是這樣的

因此在處理sprite圖片時，咱們只能給background-size取具體值。那麼這個值取多少呢？其實只要寫咱們切出來的圖片的實際尺寸就行。

好比咱們的元素爲50*50px，sprite圖片爲200*50px，那css應該以下：

#cpt{
    width: 0.5rem;
    height: 0.5rem;
    background-image: url(cpt.png);
    background-size: 2rem 0.5rem;
}

而後修改background-position咱們就能夠取到sprite上的其餘圖片了。background-position也取具體值，也是按照切出來的圖的尺寸就行。

好比我這張圖片是一個幀動畫的4個幀，每一幀的背景圖片應該以下：

#cpt.status1{
    background-position: 0 0;
}
#cpt.status2{
    background-position: -0.5rem 0;
}
#cpt.status3{
    background-position: -1rem 0;
}
#cpt.status4{
    background-position: -1.5rem 0;
}

利用這個尺寸，咱們來作個小動畫試試。

原文：http://www.cnblogs.com/lvdabao/p/rem-background.html

相關標籤/搜索

每日一句

每一个你不满意的现在，都有一个你没有努力的曾经。