专栏首页阮一峰的网络日志最佳网页宽度及其实现

最佳网页宽度及其实现

1.

设计网页的时候,确定宽度是一件很苦恼的事。

minifun.cn为例,根据Google Analytics的统计,半年多以来,访问者的屏幕分辨率一共有81种。最小的分辨率是122x160,这应该是手机;最大的分辨率是3360x1050,天知道是什么设备。

一张网页要在大小如此悬殊的各种屏幕上,都呈现令人满意的效果,难度可想而知。举例来说,一张400px宽的图片,在800px的屏幕上会占据50%的宽度,而在1920px的屏幕上(Windows Vista的流行设置),只占据20%。

2.

目前,常见的屏幕分辨率宽度大概有6种:800px,1024px,1280px,1440px,1680px和1920px。其中,1024px最常见,但是随着大屏幕显示器的流行,更高的分辨率正变得越来越多。

常见的解决方法有两种:

第一种:用javascript根据不同的客户端分辨率,选择css样式表文件,具体的做法可以看这里。 第二种:采用弹性布局(Fluid Width Layout),实现网页宽度的自适应。

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

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

3.

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

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

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

4.

下面就是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的范围内会自动伸缩。

5.

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

(完)

本文参与腾讯云自媒体分享计划,欢迎正在阅读的你也加入,一起分享。

我来说两句

0 条评论
登录 后参与评论

相关文章

  • CSS3常用功能的写法

    但是,不同的浏览器有不同的CSS3实现,兼容性是一个大问题。上周的YDN介绍了CSS3 Please网站,该网站总结了一些常用功能的写法。

    ruanyf
  • CSS使用技巧

    在修改模板的过程中,需要重写CSS样式表。正好看到instantshift.com有一篇CSS常用技巧的总结文章,我就把它整理出来,供自己参考,也希望对大家有用...

    ruanyf
  • 如何制作DVDrip?

    我就研究了一下,如何制作DVDrip。下面是我的一点笔记。因为我对视频转换其实完全不懂,所以说得不对的地方,欢迎大家指正。如果你知道其他好的工具软件,也欢迎推荐...

    ruanyf
  • CSS3 box-shadow 属性

    关于css相关的属性,看似很简单,实际上却蕴含着巨大的潜力,细心组合,学好css之后,能够呈现出一些特别好看的界面哦,尤其像今天所说的CSS3 box-shad...

    祈澈菇凉
  • 案例改写vue

    小闫同学啊
  • 一个CSS画的灰太狼,IE下属于重口味,慎看!

    还有几个不错的,比如一个小日本制作的多啦A梦,一个Twitter的当机页面等等,大家可以搜下看看.不得不感叹做前端的哥们闲起来还真是可怕啊.Firefox是正常...

    练小习
  • 转一个css3绘制的iPhone6

    css3绘制的iPhone6 <!DOCTYPE html> <html> <head> <title></title> <style type...

    练小习
  • 为博客添加恋爱天数小工具

    AlexTao
  • IOS下box-shadow的诡异bug的修复

    先说环境,我测试了两台IOS手机,iphone 8 ios 11.4.1 和 iphone 6s plus ios 11.4.1,都存在这个诡异的bug。

    用户1515472
  • 伪类以及伪元素的一些使用小技巧

    在浏览器版本越来越高的情况下,很多以前顾及到兼容问题不敢使用的html以及css属性现在已经很普遍的在使用了。比如一些伪类和伪元素。这里稍微提一下在实际工作中用...

    练小习

扫码关注云+社区

领取腾讯云代金券