设计网页的时候,确定宽度是一件很苦恼的事。以nowamagic.net为例,根据Google Analytics的统计,半年多以来,访问者的屏幕分辨率一共有81种。最小的分辨率是122x160,这应该是手机;最大的分辨率是3360x1050,天知道是什么设备。

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

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

常见的解决方法有两种:

  1. 用javascript根据不同的客户端分辨率,选择css样式表文件。
  2. 采用弹性布局(Fluid Width Layout),实现网页宽度的自适应。

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

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

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

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

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

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

1 margin: 10px auto;

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

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

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

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

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

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

1 #div-left{
2 width:50%;
3 }
4 #div-right{
5 width:50%;
6 }

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

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

CSS网页宽度怎么定比较合适的更多相关文章

  1. CSS网页布局错位:CSS宽度计算

    为什么计算宽度计算网页像素宽度是为了CSS网页布局整齐与兼容.常见的我们布局左右结构网页或使用padding.margin布局的时候将计算整页宽度,如果不计算无论是宽度过大过小就会出现错位问题. 怎么 ...

  2. <转载>使用css让大图片不超过网页宽度

    让大图片不超过网页宽度,让图片不撑破通过CSS样式设置的DIV宽度! 接下来,我们来介绍下网站在开发DIV+CSS的时候会遇到一个问题,在发布一个大图片的时候因为图片过宽会撑破自己设置的div宽度的问 ...

  3. CSS网页布局全精通

    在本文中将使用四种常见的做法,结合CSS于结构化标记语法制作两栏布局.很快地就会发现,不用嵌套表格,间隔用的GIF也能做出分栏版面布局. 相关文章:CSS网页布局开发小技巧24则 稍后在"技 ...

  4. 深入理解CSS网页布局-理论篇

    在CSS网页开发布局中,需要对浮动和定位有深刻的理解才能在开发中游刃有余. 基于此,在博客园中做了本篇总结,这些总结来自实践经验和阅读一些书籍后的理解总结,主要内容为浮动,清除浮动,定位. (可点击屏 ...

  5. 总结与学习DIV+CSS网页布局技巧

    以前用表格布局时设置网页居中非常方便,把表格对齐方式设置为居中就行了,就这么简单,现在呢,用DIV+CSS样式表控制,好像不是那么容易了,其实也很简单,只不过方式不同而已. <style> ...

  6. css网页自适应-1

    一."自适应网页设计"的概念 2010年,Ethan Marcotte提出了"自适应网页设计"(Responsive Web Design)这个名词,指可以自动 ...

  7. 简单实用的CSS网页布局中文排版技巧

    由于汉字的特殊性,在css网页布局中,中文排版有别于英文排版.排版是一个麻烦的问题,小编认为,作为一个优秀的网页设计师和网页制作人员,掌握一些简单的中文排版技巧是不可或缺的,所以今天特意总结了几个简单 ...

  8. DIV+CSS网页设计规范

    1.网页HTML代码最前面必须包括W3C声明,以便符合标准: 一般网页: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transition ...

  9. CSS网页布局中易犯的30个小错误

    即使是CSS高手,也难免在书写CSS代码的时候出一些小错误,或者说,任何一种代码都是如此.小错误却往往造成大问题,浪费很多无辜的时间来调试和排错.查看下面这份CSS网页布局中易犯的10个小错误,努力的 ...

随机推荐

  1. Linux下编译出现undefined reference to ‘pthread_create’问题解决

    1.代码 /* * File: HeartPackageSendAgent.cpp * Author: Pangxiaojian * * * 主要实现:向服务器发送心跳包,每5s向服务器发送一个心跳包 ...

  2. Hive初识(三)

    根据用户的需求创建视图.可以将任何结果集数据保存为一个视图.视图在Hive的用法和SQL视图用法相同.它是一个标准的RDBMS概念.我们可以在视图上执行所有DML操作. 创建一个试图 可以创建一个试图 ...

  3. 最小生成树算法 1.Prim算法

    最小生成树(MST):一个有N个点的图,边一定是大于等于N-1条边的.在这些边中选择N-1条出来,连接所有N个点.这N-1条边的边权之和是所有方案中最小的. Prim算法的时间复杂度时O(n^2)的, ...

  4. JDBC 的使用

    使用 MariaDB,JDBC 所有操作全部使用预处理 SQL 的基本类型与 Java 类型的对应关系 CHAR(N) - String VARCHAR(N) - String BOOLEN - bo ...

  5. 图表制作工具之ECharts

    简介 ECharts,缩写来自Enterprise Charts,商业级数据图表,一个纯Javascript的图表库,可以流畅的运行在PC和移动设备上,兼容当前绝大部分浏览器(IE6/7/8/9/10 ...

  6. C# static const和readonly区别

    Const 定义的是静态常在对象初始化的时候赋值.以后不能改变它的值.属于编译时常量. Static 定义的是静态变量.可以再外部改变它的值.. Readonly 是只读变量.属于运行时变量.可以在类 ...

  7. django生产环境中部署

    https://www.cnblogs.com/chenice/p/6921727.html 本节内容 uwsgi 介绍 uwsgi安装使用 nginx安装配置 django with nginx 如 ...

  8. 对mysqlbinlog日志进行操作的总结包括 启用,过期自动删除

    操作命令: show binlog events in 'binlog.000016' limit 10; reset master 删除所有的二进制日志 flush logs  产生一个新的binl ...

  9. 『AngularJS』创建 Service

    创建服务 Angular提供了几种有用的服务,对于所有的应用来说,你将会发现这些服务对于创建你自己的服务是有用处的.为了创建自己的服务,你应该从通过一个模块(module)注册一个服务工厂方法开始(可 ...

  10. python终极篇 --- django---班级管理系统

    周末没事自己写了个班级管理系统,虽然简单,但也算个前期学习的总结吧 from django.db import models # Create your models here. class Banj ...