DIV+CSS图片自动适应浏览器宽度

<style>

div{position:absolute;}

main{background-image:url("");top:0px;bottom:0px;left:0px;right:0px;}

</style>

<div id="idMain" class="main">

</div>

<script>

windowonload=function()

{

var id_main=documentgetElementById("idMain");

var w=Screenwidth;//

var h=Screenheight;//

var l;

var t;

w=(w<1600)-(1600-w):w-1600;

h=(h<)-(-h):-h;//

l=w/2;

t=h/2;

id_mainstylebackgroundPosition=l+"px "+t+"px";

}

</script>

楼主要的是不是这个效果，代码没测试过，楼主自测。

假设广告为<div id="ad"><img /></div>

CSS使用浮动定位position:fixed;

使广告浮在最上层z-index:12;

定位广告初始位置top:10px;left:20px;

JavaScript

var ad=documentgetElementById("ad");

//获取ad的宽度和高度

wad=adoffsetWidth;

had=adoffsetHeight;

//获取屏幕的宽度和高度

w=documentbodyclientWidth;

h=documentbodyclientHeight;

//假设横向速度为x，纵向速度为y

var x=10;

var y=15;

//函数

function move(){

adstyleleft+=x+"px";

adstyletop+=y+"px";

if(parseInt(adstyleleft)+wad>=w || parseInt(adstyleleft)<=0){

x=-x;

}

if(parseInt(adstyletop)+had>=h || parseInt(adstyletop)<=0){

y=-y;

}

//定时器

setTimeout("move()",1000);

}

//执行函数

move();

无论是电脑还是手机，要做到自适应屏幕，其实都是一样的。

首先，在网页代码的头部，加入一行viewport标签

<meta name="viewport" content="width=device-width, initial-scale=10, maximum-scale=10, minimum-scale=10, user-scalable=no" />

viewport是网页默认的宽度和高度，上面这行代码的意思是，网页宽度默认等于屏幕宽度（width=device-width），原始缩放比例（initial-scale=1）为10，即网页初始大小占屏幕面积的100%。即让viewport的宽度等于物理设备上的真实分辨率，不允许用户缩放。

其次：网页宽度css一定要使用百分比width: xx%;，不能用绝对像素。当然可以用width:auto;

第三，流动布局

left{

float: left;

width: %;

}

第四，选择加载css

这是自适应的关键部分

abc{ height:300px; border:1px solid #000; margin:0 auto} 

@media screen and (min-width: 1201px) { 

abc {width: 1200px}  

} 

/ 设置了浏览器宽度不小于1201px时 abc 显示1200px宽度 / 

@media screen and (max-width: 1200px) { 

abc {width: 900px}  

} 

/ 设置了浏览器宽度不大于1200px时 abc 显示900px宽度 / 

@media screen and (max-width: 901px) { 

abc {width: 200px;}  

} 

/ 设置了浏览器宽度不大于901px时 abc 显示200px宽度 / 

@media screen and (max-width: 500px) { 

abc {width: 100px;}  

} 

/ 设置了浏览器宽度不大于500px时 abc 显示100px宽度 / 

需要注意是CSS代码顺序，由大到小排版CSS（判断浏览器宽度越大越放前），这样是因为逻辑关系，@media 判断CSS排错将导致判断失效。

第四，自适应

img { max-width: 100%;}

老版本的IE不支持max-width，所以只好写成：img { width: 100%; }

筚五、采用相对字体大小

字体也不能使用绝对大小（px），而只能使用相对大小（em）。

这里最重要的，是第三条和第四条，也就是采用流动布局和css选择加载。祝你好运！

以上就是关于DIV+CSS图片自动适应浏览器宽度全部的内容，包括:DIV+CSS图片自动适应浏览器宽度、怎样使用HTML、CSS和JavaScript共同实现：、如何添加CSS让页面自适应手机屏幕等相关内容解答，如果想了解更多相关内容，可以关注我们，你们的支持是我们更新的动力！