div css布局网页如何实现网页自动适应屏幕高度和宽度

html-css08

div css布局网页如何实现网页自动适应屏幕高度和宽度,第1张

网页里面的宽度是可以用百分比决定的，可以设置这个容器的宽度占屏幕宽度的百分之多少，但是因为百分比的宽度是要有参考对象的，所以在设置百分比的宽度时，要先设置body的宽度为100%。

照你的要求：一屏分为两栏显示，那么用两个DIV来做，一个DIV的宽度就是50%，两个在一起就正好100%了，如果你想这两个DIV之间有间距，那么就设置宽度为48%就行，具体自己把握，然后设置左边的DIV左浮动，右边的DIV右浮动即可。

高度是可以设置固定像素的，比如一个div的宽度为48%，高度为50px都行的，可以混用，只要记住使用百分比定义宽高长度就要设置对应的body的宽高为100%就行了

第一步：你的这个banner，要设计成左右两端可以与页面背景相融合的那种形式。比如左右两端都用了渐变透明，看上去与整个网页的背景融合在了一起。

第二步：这个1000px的banner，在屏幕上居中显示。然后不管你的显示器分辨率多宽，它都会居中。

通过这种方式。这个1000px的banner，让人看上去不分显示器分辨率多大，都是通屏显示了。。。

没有其他的办法。除非你不在意图片变形，在网页中用一段js来取当前浏览器的实际宽度，然后用js来改变这个banner的width值。但这样图片会变形的(即便你用等比例缩放，但是放大后图片失真了)

以下几种方式：

1、css把宽度设置成百分比，width:100%左右布局按一定比例设置好 ，需要多次调试，保证不同分辨率下的美观性。

2、根据不同分辨率或者不同屏幕大小定义相应的CSS文件。一般多采用这种方式。比如：

<link rel="stylesheet" type="text/css" id="links" href="../css/m_wuqinglan.css"/>

        <script type="text/javascript">

            window.onload=function(){ 

                var sc=document.getElementById("links") 

                    if(window.screen.width>1024) //获取屏幕的的宽度 

                    { 

                        sc.setAttribute("href","../css/css1.css") //1024屏幕

                    } 

                    else{ 

                        sc.setAttribute("href","../css/css2.css") //其他

                    } 

            }

        </script>