最佳网页宽度及其实现

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 条评论
登录 后参与评论

相关文章

来自专栏贾鹏辉的技术专栏@CrazyCodeBoy

React Native 学习资源精选仓库

React Native Awesome汇集了各类react-native学习资料、工具、组件、开源App、资源下载、以及相关新闻等,只求精不求全。 如果你是...

4907
来自专栏你不就像风一样

Comfort - 一款MarkDown风格的博客园主题

目录和返回顶部一直位于右下角,鼠标移入显示,移出隐藏。注意,在手机端是不显示目录按钮和返回顶部按钮。

2833
来自专栏HTML5学堂

DIV+CSS布局和TABLE布局的优缺点

HTML5学堂:TABLE布局是早以前CSS不存在的时候兴起的,是对TABLE标签的不正规使用,Table标签就是表格,是用来显示数据的,而不是用来布局网页的,...

3429
来自专栏杨逸轩 ' sBlog

响应式Web设计技巧以及入门技巧

1318
来自专栏程序员宝库

神奇的选择器 :focus-within

有个错误有必要每次讲到伪类都提一下,有时你会发现伪类元素使用了两个冒号 (::) 而不是一个冒号 (:),这是 CSS3 规范中的一部分要求,目的是为了区分伪类...

1032
来自专栏前端知识分享

第132天:移动web端-rem布局(进阶)

      该方案使用相当简单,把下面这段已压缩过的 原生JS(仅1kb,源码已在文章底部更新,2017/5/3) 放到 HTML 的 head 标签中即可(注...

1523
来自专栏前端小作坊

CSS vs JS动画:谁更快?

Javascript 动画怎么可能总是和 CSS transition 一样快,甚至更快呢?到底是什么秘密呢?Adobe 和 Google 是怎么做到让他们的富...

2512
来自专栏Guangdong Qi

iOS 图标图像 (官方翻译版)

2124
来自专栏Android机动车

Android 8.0 之自适应图标

Android 8.0 (API 26)引入了自适应图标,可以在不同的设备上显示不同形状的图标。例如,一个app 如果采用了自适应图标,那么它就可以在一家的 O...

1774
来自专栏向治洪

react-native-android之初次相识

作为一名Android开发者,我的感觉就是,一步一卡,卡的潇洒。 但是我还是要学react-native,不要问我为什么,因为我相信一门解决了原生app,开...

1856

扫码关注云+社区