目前網(wǎng)絡(luò)上關(guān)于HTM5+CSS自適應(yīng)站越來越多，今天就來說下如何對廣告位進(jìn)行自適應(yīng)控制。這里我自己測試了三種方法，逐個說一下，大家比較一下。

方法一：

這個方法主要用來做網(wǎng)站自適應(yīng)的，同時可以實(shí)現(xiàn)撐起內(nèi)容高度，避免圖片加載后導(dǎo)致的頁面滾動。

我采取了比較簡單粗暴的方法，就是直接在img的父元素上加padding-bottom標(biāo)簽。

前端代碼：

<div class=“img-box”>

<img src=“ads.jpg”/>

</div>

CSS

.img-box{

padding-bottom:100%;

}

.img-box img{

position:absolute;

top:0;

bottom:0;

left:0;

right:0;

width:100%;

margin:auto;

}

方法二：

測試了第一種方法后，我嘗試了第二種方法，這個是在模板里進(jìn)行操作，主要是對CSS的修改，就是使用兩個廣告位，一個一個大屏幕的，一個小屏幕的。

1、PC端廣告位：大屏幕顯示，小屏幕隱藏

2、移動端廣告位：大屏幕隱藏，小屏顯示。

3、我們找到這個站點(diǎn)的主CSS，或者直接在模板或者頁面里添加以下CSS內(nèi)容

在需要顯示的地方添加下面前端代碼：

<div class=“pcd_ad”>電腦端廣告代碼</div>

<div class=“mbd_ad”>手機(jī)移動端廣告代碼</div>

CSS

.pcd_ad{display:block;}

.mbd_ad{ display:none}

@media(max-width:768px) {

.pcd_ad{display:none !important;}

.mbd_ad{display:block !important;}

}

上面CSS解釋：

display:block  顯示的意思

display:none 隱藏的意思

@media(max-width:768px)  判斷頁面寬度小于768PX的時候顯示后面{}的樣式。

方法三：

主要是通過css來實(shí)現(xiàn)圖片高度的自適應(yīng)問題，這種方法是可以在圖片上方垂直居中展示文字的

前端代碼：

<div class=“box”>

<span>行內(nèi)元素垂直居中</span>

<div class=“img-box”>

<img src=“ads.jpg”/>

</div>

</div>

CSS

.box{

width: 50%;

margin: 50px auto;

}

.img-box{

width: 100%;

position:relative;

z-index:1;

}

.img-box img{

position:absolute;

top:0;

bottom:0;

left:0;

right:0;

width:100%;

margin:auto;

z-index: -1;

*zoom:1;

}

.img-box:before {

content: “”;

display: inline-block;

padding-bottom: 100%;

width: 0.1px;/*必須要有數(shù)值，否則無法把高度撐起來*/

vertical-align: middle;

}

上面的三種方法我都實(shí)際運(yùn)用過，各有各的特點(diǎn)吧，主要看自己的實(shí)際需要吧。