首页案例网站建设手机H5电商设计关于易点联系我们
QQ联系
微信联系
手机联系
QQ联系
微信联系
手机联系

网页制作页面宽度自适应的方法

发布时间:2018-08-22
发布者:eidea
浏览次数:206
常见的解决方法有两种:


第一种:用javascript根据不同的客户端分辨率,选择css样式表文件,具体的做法可以看这里。


第二种:采用弹性布局(Fluid Width Layout),实现网页宽度的自适应。


第一种方法的优点是,可以根据不同屏幕分辨率,采用完全不同的布局,缺点是要设计和维护多张样式表,比较麻烦。第二种方法只采用一张样式表,比较省事。 


下文就根据css-tricks上的解决方案,讨论如何实现第二种方法,实际上是很简单的。 


首先,网页的缺省宽度,确定为满足1024px宽度的显示器。这不仅因为1024x768是现在最常见的分辨率,还因为这个宽度对网页最合适:1)它放得下足够的内容,足够三栏的布局;2)单行文字不宜太长,1024px已是极限,否则容易产生阅读疲劳;3)在当前的互联网带宽条件下,网页难以采用大分辨率所要求的大尺寸图片



其次,网页宽度会在780px-1260px的范围内,自动变化,即最小不小于780px,最大不超过1280px。


最后,对于更大的分辨率,网页内容会自动居中


下面就是CSS文件的写法,只要4行。需要注意的是,这几行的语句都针对整个页面,即body标签或者最外层的那个div区域。


margin: 10px auto;


这一行保证了网页在任何分辨率下,都会居中。


min-width: 780px; max-width: 1260px;


这二行规定了网页的最小和最大宽度。注意,IE6不支持这二行,即它们在IE6中是无效的。


width:expression(document.body.clientWidth < 782? "780px" : document.body.clientWidth > 1262? "1260px" : "auto");


这一行是针对IE6的解决方法。它采用了CSS表达式,也可以通过javascript实现。



另外,如果想让内层的各个区块也自动伸缩,它们的宽度可以采用百分比的形式,比如:


#div-left{width:50%;}#div-right{width:50%;}


最后通过变动浏览器窗口的大小,可以发现网页在780px-1260px的范围内会自动伸缩。


最后,建议大家平时使用计算机的时候,不要盲目采用高分辨率,意义不大。