在實(shí)際的網(wǎng)站建設(shè)過程中，一張圖片經(jīng)常用作網(wǎng)站的背景，然后在這個背景上面再布局放置一些元素，同時要求這個背景能夠自適應(yīng)于電腦與手機(jī)端，換句話說，就是移動端寬度是100%形式，而PC端是用一張1920px寬度的圖片來實(shí)現(xiàn)兩端自適應(yīng)，下面就這種背景圖片該如何布局展開講解。
一個個的來，今天我們不講原理，首先制作好一張圖片，比如1920px與400px，圖片名稱為dd.jpg，電腦布局即放置在這個@media screen and (min-width:900px)里面的，直接上代碼：
@media screen and (min-width:900px)
{
.hui1{width:100%; height:400px; background: url(dd.jpg) no-repeat center;}
.myff{ font-size:40px; color:#FF0000;}
}
上面的是網(wǎng)站建設(shè)的css樣式，使用它布局如下：
<div class="hui1">
<div class="myff">
這是放在網(wǎng)站背景圖片上的內(nèi)容或是模塊或是div區(qū)域，這個hui1是針對整個背景圖片來的，而這個myff樣式是針對圖片上的布局來的。
</div>
</div>
下面繼續(xù)研究自適應(yīng)于手機(jī)即移動端的布局，先上代碼：
@media screen and (max-width:500px)
{
.hui1{width:100%;height: 200px;background: url(dd.jpg) no-repeat; background-size:100% 100%;}
.myff{ font-size:16px;}
}
手機(jī)布局的代碼當(dāng)然與上面的電腦是一樣的，否則就不能稱之為響應(yīng)式的了。
再說一下上面敘述的簡單原理吧：
首先電腦端的，既然是自適應(yīng)，自然寬度要設(shè)為100%，但此時一定要設(shè)置高度，這里要說一下，具體在網(wǎng)站制作中，不管在什么地方，也不管是什么形式的背景圖片，都必須要設(shè)定高度才行，至于后面的background: url(dd.jpg) no-repeat center則代表背景圖片不重復(fù)，并且居中，這個正常用在網(wǎng)站的內(nèi)頁banner圖片。
在這兒再教大家一個技巧，就是如何讓內(nèi)頁的banner產(chǎn)生鏈接，其實(shí)很簡單，假如banner布局是<div class="abc"></div>，要加鏈接直接這樣就行了：<a href=""><div class="abc"></div></a>，就這么簡單。
手機(jī)端的css實(shí)際上跟電腦有點(diǎn)差不多，只是多了個background-size:100% 100%，而且兼容IE7及以上的瀏覽器，當(dāng)然背景的高度也要設(shè)置一下。
