蜜桃视频一区,天堂网日韩性色一区,日本久久麻豆

rem布局

所謂rem布局就是指為文檔的根節(jié)點(diǎn)<html>元素設(shè)置一個(gè)基準(zhǔn)字體大小，然后所有的元素尺寸都以rem為單位來(lái)寫(xiě)。比如將<html>的字體設(shè)為100px，如果需要做一個(gè)100*200的元素，css如是寫(xiě)：

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

那么最終得到的元素寬高就是100*200px了。

為了能夠在不同尺寸的手機(jī)屏幕上自適應(yīng)，需要用js來(lái)判斷手機(jī)寬度，并動(dòng)態(tài)設(shè)置<html>的字體大小，這樣基準(zhǔn)字體變了，元素的尺寸自然相應(yīng)變化，達(dá)到了自適應(yīng)的效果。

此處只介紹基本概念，rem布局方案的其他細(xì)節(jié)不是本篇的范疇。最早提這個(gè)方案的應(yīng)該是winter寒老濕，有沒(méi)有人更早使用我就不好考證了。關(guān)于rem布局的內(nèi)容可以參考這篇文章：http://isux.tencent.com/web-app-rem.html

雙倍設(shè)計(jì)稿

為了能在視網(wǎng)膜屏下清晰顯示，現(xiàn)在的設(shè)計(jì)稿一般都是基于iPhone5的寬度(320)或者iphone6的寬度(375)，進(jìn)行雙倍。也就是說(shuō)，設(shè)計(jì)稿的寬度一般是640或者750.

這個(gè)尺寸也不是絕對(duì)的，因?yàn)閕Phone6 plus的dpr值為3，也有設(shè)計(jì)稿進(jìn)行三倍尺寸，這樣能在iPhone6 plus上完美顯示。當(dāng)然對(duì)于Android設(shè)備來(lái)說(shuō)情況就更復(fù)雜了，dpr值什么樣的都有，所以雙倍設(shè)計(jì)稿算是一個(gè)折中方案，大體上能保證所有設(shè)備清晰顯示圖片。

此時(shí)，我們?cè)陧?yè)面上還要做一件事情，那就是動(dòng)態(tài)設(shè)置<meta>中的viewport屬性，將scale改成0.5（dpr為2）或者其他值，這樣我們寫(xiě)css的時(shí)候，就可以按照原設(shè)計(jì)稿的尺寸來(lái)寫(xiě)了。

我們切出來(lái)的圖片是雙倍大小，但是頁(yè)面上的元素已經(jīng)被動(dòng)態(tài)縮小了，如果要做背景圖片的話(huà)，得想辦法讓圖片跟著縮小才行。

cover與contain

CSS3為background-size屬性增加了兩個(gè)值：cover與contain。這個(gè)兩個(gè)值允許我們指定背景圖片的自適應(yīng)方式。它倆有什么區(qū)別呢？

從語(yǔ)言上描述，cover是拉伸圖片使之充滿(mǎn)元素，元素肯定是被鋪滿(mǎn)的，但是圖片有可能顯示不全。contain則是拉伸圖片使圖片完全顯示在元素內(nèi)，圖片肯定能顯示全，但是元素可能不會(huì)被鋪滿(mǎn)。

上面說(shuō)的“可能”的情況，發(fā)生在元素尺寸和圖片尺寸寬高比例不一致的時(shí)候。

下面通過(guò)例子來(lái)演示一下這兩者的用法。比如我們以iPhone5為例，此時(shí)dpr為2，頁(yè)面scale為0.5，基準(zhǔn)字體大小為100px。設(shè)計(jì)稿上有一張90*200px的圖片。那么css應(yīng)該這么寫(xiě)：

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

效果如下：

當(dāng)元素與背景圖片的大小一樣，或者是寬高比例一致時(shí)，contain和cover的填充效果是一樣的，因?yàn)閮烧咴诶旌罂偰苁箞D片“恰好”完全充滿(mǎn)元素。

但是有時(shí)候元素的寬高比例是不確定的，比如有一張寬度為100%，高度為200px的圖片。此時(shí)contain和cover的區(qū)別就顯示出來(lái)了。如下圖：

可以看到contain的時(shí)候，元素右側(cè)有空白沒(méi)有填滿(mǎn)。而cover的時(shí)候，元素雖然填滿(mǎn)了，但是有一部分圖片已經(jīng)拉伸到元素外部看不到了。這就是兩者的區(qū)別，實(shí)際應(yīng)用的時(shí)候要根據(jù)具體情況來(lái)定。

background-size取具體值

大家知道background-size可以取具體的值以及百分比，那么我們直接把背景圖片大小設(shè)置為跟元素大小一樣不就完了嗎？還費(fèi)什么勁搞什么自適應(yīng)。

當(dāng)然是可以的。比如我們把上面的css改成這樣：

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

完全可以實(shí)現(xiàn)同樣的效果。

只是我本人在寫(xiě)css的時(shí)候很不喜歡寫(xiě)具體值，一般是能自適應(yīng)就自適應(yīng)。這樣如果后期要改動(dòng)元素的大小，只要改一處就行，所以我更喜歡用contain或cover。

sprite圖片的處理

為了合并圖片請(qǐng)求我們經(jīng)常會(huì)用到sprite技術(shù)。在rem布局方案下，使用contain或cover來(lái)縮放背景圖片就無(wú)法奏效了。因?yàn)樵氐谋尘捌鋵?shí)是sprite圖片的局部，contain和cover只能對(duì)整張圖片進(jìn)行縮放，沒(méi)辦法控制到局部的大小。

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