固定宽度弹性布局(以适应各种各辨率)
最佳网页宽度及其实现——新手可了解一下
设计网页的时候,确定宽度是一件很苦恼的事。
以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.
最后,建议大家平时使用计算机的时候,不要盲目采用高分辨率,意义不大。
(完)
固定宽度弹性布局(以适应各种各辨率)相关推荐
- 网页设计布局选择:固定,流行和弹性布局 (2010-12-14 13:07:35)
有一个问题已经困扰网页设计师们很久了:该使用固定.流动.弹性,还是混合布局呢?它们各有优缺点.最终的决定取决于网站的可用性,单用某一种布局就想达到目的,可能没那么容易.那么,既然如此令人困惑,是否有做 ...
- 固定布局(fixed layout)、流体布局(fluid layout)、弹性布局(elastic layout)、响应布局(responsive layout)理解和技巧归纳
关于web页面布局,首先简单了解一下固定布局(fixed layout).流体布局(fluid layout).弹性布局(elastic layout).响应布局(responsive layout) ...
- CSS3多列布局 columns 弹性布局 flex
多列布局columns 多列布局可以控制页面内容的排版方式,可以将文本内容设计成像报纸一样的多列布局. 属性 示例 含义 column-count column-count: 3; 将元素内部分割成3 ...
- 打造无懈可击的Web设计——流动布局和弹性布局
防弹衣并不能100%保证不受伤害,但穿了总是比不穿好.这样的规则同样适用于Web设计.通过增加网页的灵活性,以及采用必要的步骤来保证它在尽可能多的场景中都具备可读性,我们就给自己的作品赋予了一些与众不 ...
- css弹性布局自动换行怎么实现,网页设计常用布局之CSS弹性布局
#网页设计#在网页设计中内容的排版和布局往往是整个设计工作的重点和难点,如果能熟练掌握CSS弹性布局的话,无论是页面的整体设计还是局部内容的布局,都能起到事半功倍的效果.尤其是对非专业的或刚开始从事前 ...
- 网页布局之---固定布局、流动布局、弹性布局
当设计的网站会面向众多用户时,设计师必须考虑访客之间的下列潜在差异: 屏幕分辨率 用的哪款浏览器 浏览窗口是否最大化 是否启用占位置的浏览器的额外组件(如历史.书签.Google工具栏等等) 乃至操作 ...
- 静态布局、流式布局、自适应布局、弹性布局、响应式布局
静态布局.流式布局.自适应布局.弹性布局.响应式布局 前端的布局主要有: 静态布局.流式布局.自适应布局.弹性布局.响应式布局等. 一.静态布局: 尺寸上一律使用px;同时限制外层容器的大小:中间的宽 ...
- html弹性重叠,关于html5弹性布局(2)
在前面的一篇文章中,我很简单介绍了弹性布局的概念,这里我将介绍弹性布局的实例化.理解弹性布局,并不是那么简单,因为弹性布局的基础和思想,和我们传统的盒装模式不同,所以必须要深入接受这种弹性布局的思路. ...
- 页面布局 - flex弹性布局
flex弹性布局 html: <!DOCTYPE html> <html><head><meta charset="utf-8" /> ...
最新文章
- 【正一专栏】轮回-从坚信去年骑士会逆转到今年坚定看好勇士横扫
- linux异地文件同步软件,rsync完成异地文件的同步
- 分布式计算第四章 RMI
- 《JavaScript设计模式与开发实践》原则篇(3)—— 开放-封闭原则
- kotlin 查找id_Kotlin程序查找Square区域
- springboot配置多项目下统一切换不同环境变量profile办法
- PHP抽象类与接口的区别
- java逗号的转义字符是,Java是否有'@'字符来转义字符串引号?
- 【医疗影像处理】antspy数据读取与保存
- pk8/pem秘钥转keystore格式
- 激光导航AGV的停车精度受环境变化的影响有多大?
- A/BTest设计方案
- 使用gdb调试出现 No debugging symbols found in a.out
- 数据库--流程控制语句的应用
- Android远程真机调试(电脑使用 Vysor 控制手机)
- C++中的var类型
- Python 第八篇:异常处理、Socket语法、SocketServer实现多并发、进程和线程、线程锁、GIL、Event、信号量、进程间通讯...
- 香港计算机翻译博士,香港城市大学博士offer一枚-指南者留学
- 写一个判素数的函数,在主函数输入一个整数,输出是否为素数的信息
- ‘Player‘ AnimationEvent ‘NewEvent‘ has no receiver! Are you missing a component?