html自动适应手机端代码,html和css结合实现手机端网页自适应的代码

无标题文档

/* banner 轮播切换 star */

body{margin:0 auto !important;max-width:640px;min-width:320px;background: #fff !important;overflow-x: hidden;}

#banner{position: relative;}

#banner .hd{position: absolute;width: 100%;text-align: center;bottom: 2%;left: 0;}

#banner .hd li{width: 0.2rem;height: 0.2rem;border:1px solid #fff;border-radius: 50%;display: inline-block;margin:0 4px;}

#banner .hd li.on{background: #9e5fd4;border-color:#9e5fd4; }

$(function(){

/*根据banner个数增加下方指示点*/

n=$(".ibanner .bd li").size();

for (m=0;m

$('.ibanner .hd').append('

');

}

/*banner切换*/

if($('.ibanner').length){

TouchSlide({slideCell: "#banner",mainCell: ".bd",autoPlay: true,effect: "leftLoop",interTime:5000});

}

});

• href="https://rgtk15.kuaishang.cn/bs/im.htm?cas=113477___235266&fi=115470">

  src="images/banner11.jpg">

• style="display: table-cell; vertical-align: top; width: 640px;">

  href="https://rgtk15.kuaishang.cn/bs/im.htm?cas=113477___235266&fi=115470">

  src="images/banner12.jpg">

• style="display: table-cell; vertical-align: top; width: 640px;">

  href="https://rgtk15.kuaishang.cn/bs/im.htm?cas=113477___235266&fi=115470">

  src="images/banner13.jpg">

• style="display: table-cell; vertical-align: top; width: 640px;">

  href="https://rgtk15.kuaishang.cn/bs/im.htm?cas=113477___235266&fi=115470">

  src="images/banner14.jpg">

• style="display: table-cell; vertical-align: top; width: 640px;">

  href="https://rgtk15.kuaishang.cn/bs/im.htm?cas=113477___235266&fi=115470">

  src="images/banner15.jpg">