在html5中加入自适应,三种html5广告添加自适应大小的方法

目前网络上关于HTM5+CSS自适应站越来越多，今天就教下大家如何对广告位进行自适应控制。

方法一：

下面方法主要用来做网站自适应的，同时可以实现撑起内容高度，避免图片加载后导致的页面滚动。

最简单的方法就是直接在img的父元素上加padding-bottom即可

前端代码：

.img-box{

padding-bottom:100%;

}

.img-box img{

position:absolute;

top:0;

bottom:0;

left:0;

right:0;

width:100%;

margin:auto;

}

方法二：

在模板里进行操作，主要是对CSS的修改，就是使用两个广告位，一个一个大屏幕的，一个小屏幕的。

1、PC端广告位：大屏幕显示，小屏幕隐藏

2、移动端广告位：大屏幕隐藏，小屏显示。

3.我们找到这个站点的主CSS，或者直接在模板或者页面里添加以下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来实现图片高度的自适应问题，这种方法是可以在图片上方垂直居中展示文字的

前端代码：

行内元素垂直居中

.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;/*必须要有数值，否则无法把高度撑起来*/

vertical-align: middle;

}

支付宝扫一扫

微信扫一扫

企鹅扫一扫