《
屏幕分辨率和网页布局简述》文章地址：http://www.tfxk.com/wangyesheji/jianzhanjingyan/03023414R013.htm
--> [
网站建设之]屏幕分辨率和网页布局简述
1. 屏幕分辨率跟网页布局的定义
1）分辨率
分辨率（Resolution） - 影象清楚度或浓度的度量标准。举例来说，分辨率代表垂直及水平显示的每英寸点（dpi）的数目。BitWare 可以用一般或标准（100 乘 200 dpi）及精细分辨率（200 乘 200 dpi）发送及接受传真文档。分辨率是一个表示平面图像精致水平的概念，通常它是以横向和纵向点的数量来权衡的，表示成程度点数×垂直点数的情势。在一个固定的平面内，分辨率越高，意 味着可使用的点数越多，图像越过细。分辨率有多种，在显示器上有表现显示精度的显示分辨率，在打印机上有表示打印精度的打印分辨率，在扫描仪上有表示扫描 精度的扫描分辨率。
这里大家更多的讨论的是我们日常的一些视觉感知，对CRT和LCD显示器有过多的讨论。
讨论到这里大家探讨到一个要害点，就是显示器都有本人的最佳分辨率，人们都爱好大尺寸、高分辨率，但不是显示分辨率越高越好。我们还要斟酌一个因素，就是人眼是否识别。例如，在14英寸最高辨别率为1024×768的显示器上800×600是人眼能辨认的最高分辩率(咱们临时称为最佳分辨率)，在1024×768这个分辨率下显示器固然能够准确的显示图像，但人眼已不能正确的识别屏幕信息了。在雷同大小的屏幕上，分辨率越高，显示就越小。这就给我们在产品设计上须要更多的考虑到这个因素，例如整站的字号是否应当大点等等。
2）布局
网页中的布局严厉意思上来说并不一个同一的定义。
网页布局大抵可分为“国”字型、拐角型、题目注释型、左右框架型、高低框架型、综合框架型、封面型、Flash型、变更型。
对于第一屏
所谓第一屏，是指我们达到一个网站在不拖动转动条时可能看到的部门。那么第一屏有多“大”呢？实在这是未知的。正常来讲，例如在1024*768的屏 幕显示模式(这也是最常用的)下，在IE装置后默认的状况(即工具栏地址栏等没有转变)下，IE窗口内能看到的部分为1002px*645px。普通来讲， 我们以这个大小为尺度就行了。究竟,
尼尔森的F型网页浏览模式，在无奈适合所有人的情况下，我们只能为大多数考虑了。
2. 现行主流应用的屏幕分辨率和布局与用户休会的关联
因为现在使用的显示器的尺寸越来越大，台式PC越来越多的使用19?到22?的显示器。我们自己使用的笔记本虽然尺寸在10?到14.1?居多，但分辨率根本都是在1280X800.主流的发展趋势是宽屏+高分辨率。可以说，电脑显示器发展到30寸可以算是最终尺寸了，再大就不合适当显示器用了。
宽屏液晶显示器的字体到底有多小？像素点和字体的大小是对应的，像素点小了，文字就会变小。宽屏面板的分辨率个别比同尺码的普屏面板高得多，所以宽屏的字体小得多，对视力也不好。
宽屏的字体到底有多小呢（以笔记本为例）？
像素高度(与字体大小成正比)：
15′普屏 0.298mm
15.4′（宽） 0.259mm
14.1&prime,
少写一个`var`是如何毁掉我们网站的;普屏 0.280mm
14.1′（宽） 0,
小规模低性能低流量网站设计原则.237mm
13′（宽） 0.219mm
12′普屏 0.238mm
12′（宽）就不说了，那个字体小到不畸形……
现在流行的网页布局（以门户为例），网页布局大多是采用“国”字型,
小网站做新闻资讯 细节不能忽视应注意五点，宽960（也有采取950的）的固定版式。现在网页的布局设计变得越来越主要，拜访者不乐意再看到只重视内容的站点。虽然内容很重要，但只有当网页布局和网页内容胜利接合时，这种网页带给用户的体验才是最好的，为大家所喜欢。
网易的一位同学说到了网页布局中使用黄金分割率的原理。黄金分割率的概念大家都晓得。下面我援用一段十分专业的说明：“黄金分割最早见于古希腊和古埃及。黄金分割又 称黄金率、中外比，即把一根线段分为是非不等的a、b两段，使其中长线段的比(即a+b)即是短线段b对长线段a的比，列式即为a:(a+b)=b:a， 其比值为0.6180339……这种比例在造型上比较悦目，因而，0,
将CSS按照层叠式结构化重新组织与构建.618又被称为黄金宰割率。”大家也看清晰了什么叫黄金分割。
我们中国也有一种相似于这样的概念叫九宫格。这个兴许就有一些友人不明白了，这是一种用以临写碑帖的一种界格纸。基础形是一个长方形等分九格。在这个九宫格中旁边局部就发生了四个穿插点，这四个交叉点就是视觉核心点。
PConline的同窗特殊提到了最近比拟风行的网页栅格系统设计，其中所提到的实践大家可以看下蓝色幻想这里先容的网页栅格体系设计，同时有兴致的话可以去买这本书来看看《栅格系统与版式设计》。
3. 屏幕分辨率和布局与阅读器、显示终真个关系
屏幕分辨率和布局在不同的浏览器和显示终端下的表示是不同的，千鸟写的《网页页面适应不同客户端浏览器和分辨率》大家可以看看，特别提到我们在实际设计操作中通常有三种情形：版面自适应、视觉自适应、内容自适应。所有的这所有都是为了适应当初显示器宽屏高分辨率的成果。
特别近多少年电子数码产品的软硬件装备飞速发展，PC、手持设备、电视等等显示终端都成为了我们浏览网页的目的终端。不同的终端对
网页设计布局都有不同的请求。讨论到这里，3G.cn的同学特别提到了他们在手机上设计产品的一些看法。因为到这里的时候我开小差去了，没当真听，无法回想记载下来，愿望3G.cn的同学能写出来。我们的菜心同学供给了一些国外关于手机屏幕的材料：Mobile screen size trends 和 More on mobile screen size trends ，大家可以看看。
4. 屏幕分辨率和布局对前端开发，产品设计的影响
在我们充足的意识到屏幕分辨率和布局的矛与盾当前，就为我们以后的工作有了更多的领导意义。产品设计上需要从不同的角度去考虑适应不同屏幕分辨率下的网页浮现，同时对前端开发也是挑衅，前端开发需要做大批的工作，从框架的计划到详细的页面实现都要考虑到这些。
5.总结
这次的ucd书友会虽然在下雨中进行，影响了讨论的后果，但来介入的同学们都很自发的参加其中，很是快慰。一位出差广州的PConline的同学对广州这边ucd书友会气氛的确定，多少是对我们的组织工作的认可，他之前也在上海加入过ucd书友会。盼望更多的交换和分享为大家的日常工作和学习带来方便。 Tag：分辨率 分辨率
(责任编辑：网站建设)
屏幕分辨率和网页布局简述相关文章