CSS网页宽度怎么定比较合适
设计网页的时候,确定宽度是一件很苦恼的事。以nowamagic.net为例,根据Google Analytics的统计,半年多以来,访问者的屏幕分辨率一共有81种。最小的分辨率是122x160,这应该是手机;最大的分辨率是3360x1050,天知道是什么设备。
一张网页要在大小如此悬殊的各种屏幕上,都呈现令人满意的效果,难度可想而知。举例来说,一张400px宽的图片,在800px的屏幕上会占据50%的宽度,而在1920px的屏幕上(Windows Vista的流行设置),只占据20%。
目前,常见的屏幕分辨率宽度大概有6种:800px,1024px,1280px,1440px,1680px和1920px。其中,1024px最常见,但是随着大屏幕显示器的流行,更高的分辨率正变得越来越多。
常见的解决方法有两种:
- 用javascript根据不同的客户端分辨率,选择css样式表文件。
- 采用弹性布局(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网页宽度怎么定比较合适的更多相关文章
- CSS网页布局错位:CSS宽度计算
为什么计算宽度计算网页像素宽度是为了CSS网页布局整齐与兼容.常见的我们布局左右结构网页或使用padding.margin布局的时候将计算整页宽度,如果不计算无论是宽度过大过小就会出现错位问题. 怎么 ...
- <转载>使用css让大图片不超过网页宽度
让大图片不超过网页宽度,让图片不撑破通过CSS样式设置的DIV宽度! 接下来,我们来介绍下网站在开发DIV+CSS的时候会遇到一个问题,在发布一个大图片的时候因为图片过宽会撑破自己设置的div宽度的问 ...
- CSS网页布局全精通
在本文中将使用四种常见的做法,结合CSS于结构化标记语法制作两栏布局.很快地就会发现,不用嵌套表格,间隔用的GIF也能做出分栏版面布局. 相关文章:CSS网页布局开发小技巧24则 稍后在"技 ...
- 深入理解CSS网页布局-理论篇
在CSS网页开发布局中,需要对浮动和定位有深刻的理解才能在开发中游刃有余. 基于此,在博客园中做了本篇总结,这些总结来自实践经验和阅读一些书籍后的理解总结,主要内容为浮动,清除浮动,定位. (可点击屏 ...
- 总结与学习DIV+CSS网页布局技巧
以前用表格布局时设置网页居中非常方便,把表格对齐方式设置为居中就行了,就这么简单,现在呢,用DIV+CSS样式表控制,好像不是那么容易了,其实也很简单,只不过方式不同而已. <style> ...
- css网页自适应-1
一."自适应网页设计"的概念 2010年,Ethan Marcotte提出了"自适应网页设计"(Responsive Web Design)这个名词,指可以自动 ...
- 简单实用的CSS网页布局中文排版技巧
由于汉字的特殊性,在css网页布局中,中文排版有别于英文排版.排版是一个麻烦的问题,小编认为,作为一个优秀的网页设计师和网页制作人员,掌握一些简单的中文排版技巧是不可或缺的,所以今天特意总结了几个简单 ...
- DIV+CSS网页设计规范
1.网页HTML代码最前面必须包括W3C声明,以便符合标准: 一般网页: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transition ...
- CSS网页布局中易犯的30个小错误
即使是CSS高手,也难免在书写CSS代码的时候出一些小错误,或者说,任何一种代码都是如此.小错误却往往造成大问题,浪费很多无辜的时间来调试和排错.查看下面这份CSS网页布局中易犯的10个小错误,努力的 ...
随机推荐
- Linux下编译出现undefined reference to ‘pthread_create’问题解决
1.代码 /* * File: HeartPackageSendAgent.cpp * Author: Pangxiaojian * * * 主要实现:向服务器发送心跳包,每5s向服务器发送一个心跳包 ...
- Hive初识(三)
根据用户的需求创建视图.可以将任何结果集数据保存为一个视图.视图在Hive的用法和SQL视图用法相同.它是一个标准的RDBMS概念.我们可以在视图上执行所有DML操作. 创建一个试图 可以创建一个试图 ...
- 最小生成树算法 1.Prim算法
最小生成树(MST):一个有N个点的图,边一定是大于等于N-1条边的.在这些边中选择N-1条出来,连接所有N个点.这N-1条边的边权之和是所有方案中最小的. Prim算法的时间复杂度时O(n^2)的, ...
- JDBC 的使用
使用 MariaDB,JDBC 所有操作全部使用预处理 SQL 的基本类型与 Java 类型的对应关系 CHAR(N) - String VARCHAR(N) - String BOOLEN - bo ...
- 图表制作工具之ECharts
简介 ECharts,缩写来自Enterprise Charts,商业级数据图表,一个纯Javascript的图表库,可以流畅的运行在PC和移动设备上,兼容当前绝大部分浏览器(IE6/7/8/9/10 ...
- C# static const和readonly区别
Const 定义的是静态常在对象初始化的时候赋值.以后不能改变它的值.属于编译时常量. Static 定义的是静态变量.可以再外部改变它的值.. Readonly 是只读变量.属于运行时变量.可以在类 ...
- django生产环境中部署
https://www.cnblogs.com/chenice/p/6921727.html 本节内容 uwsgi 介绍 uwsgi安装使用 nginx安装配置 django with nginx 如 ...
- 对mysqlbinlog日志进行操作的总结包括 启用,过期自动删除
操作命令: show binlog events in 'binlog.000016' limit 10; reset master 删除所有的二进制日志 flush logs 产生一个新的binl ...
- 『AngularJS』创建 Service
创建服务 Angular提供了几种有用的服务,对于所有的应用来说,你将会发现这些服务对于创建你自己的服务是有用处的.为了创建自己的服务,你应该从通过一个模块(module)注册一个服务工厂方法开始(可 ...
- python终极篇 --- django---班级管理系统
周末没事自己写了个班级管理系统,虽然简单,但也算个前期学习的总结吧 from django.db import models # Create your models here. class Banj ...