`
shirlly
  • 浏览: 1652285 次
  • 性别: Icon_minigender_2
  • 来自: 福州
社区版块
存档分类
最新评论

网页设计标准页面大小,分析不同分辨率下的网页大小

阅读更多
网站设计时,有一个最常用的指导性原则:页面长度原则上不超过3屏,宽度不超过1屏。这个原则明显是从用户的体验出发,特别是宽度不超过一屏,其最基本的表现是浏览器不出现横向滚动条,这几乎是目前的设计准则。那么这里的一屏到底是多大呢?
普通用户通常浏览网页时,其浏览网页的有效面积会受到下面几个方面的影响:

1、显示器的分辨率

这个由科技发展和用户购买力及喜好决定,其数据取决于统计。

2、操作系统

毫无疑问目前是Windows的天下,其中WindowsXP占绝大多数。

3、网页浏览器

IE依旧份额最高,但是Firefox、Opera和Safari等也有一定市场。

4、个人定制

主要是用户定制操作系统的样式、操作系统任务栏是否隐藏和浏览器的样式,但是总体上这部分应该属于高级用户,绝大部分用户依旧会使用操作系统和浏览器的默认样式。


由关于浏览器和屏幕分辨率的统计数据可以得出:

1、基本上用户分辨率都在800×600以上,绝大部分都在1024×768以上,从全球情况来看,800×600的分辨率会越来越少。

2、国内浏览器依旧是IE6的天下,这将会持续较长的时间。从全球市场来看,国内的Firefox2.0和IE7会逐步增长,特别当IE7的中文版推出和Windows自动更新的推广开始以及随Vista上市,IE7增长会更快。

所以计算一屏大小应基于以下原则:

1、一屏指绝大部分用户的浏览器显示网页的有效可视区域。

2、一屏的计算环境是Windows XP和浏览器均处于默认样式。

3、由于IE无论是否超过一屏都存在纵向滚动条的位置,Firefox和Opera是在页面超过一屏的时候出现纵向滚动条,且浏览绝大部分网页都有纵向滚动条的存在,所以一屏大小的计算都基于浏览器有纵向滚动条的状态下。

4、由于Firefox2.0在只浏览一个网页时不出现多窗口的控制栏,而其它的多窗口浏览器都出现多窗口控制栏且使用时都会同时浏览多个网页,所以一屏大小在Firefox中指多窗口的控制栏存在时。

由常用浏览器和分辨率下的数据和一些其他事实:

1、在800×600分辨率和Windows XP下定制Windows的经典样式IE6的有效可视区域是780×445,Windows98、Windows 2000和Windows2003均采用经典样式切IE5.0、IE5.5、IE6.0的布局上相似,所以相同分辨率下应该比Windows XP默认的样式要大。

2、知道浏览器型号和屏幕的分辨率能够很容易的推算出可视区域面积,比如1024×768下IE7.0的可视面积是(1024-21)×(1024-148)

综合上面所有的数据,结论如下:

1、最保守而最有兼容性的一屏大小是:779×432

2、最广泛的一屏大小是:1003×600

3、适合目前国内的情况,一屏大小是779×600


转载出处:http://hi.baidu.com/redtramp/blog/item/5ba9302d13ea6d30359bf7d1.html
分享到:
评论

相关推荐

    屏幕分辨率与网页设计尺寸

    1. 屏幕分辨率:不同的屏幕分辨率对应不同的网页设计尺寸。常见的屏幕分辨率有 800*600、1024*768、1280*1024 等。 2. 网页宽度:网页宽度是指网页的水平方向的尺寸大小。在设计网页时,需要考虑到不同的屏幕分辨率...

    网页在不同分辨率下保持同一显示效果的方法

    网页在不同分辨率下保持同一显示效果是网页设计中的一项关键技能,尤其是在当今各种屏幕尺寸和设备类型共存的时代。为了确保网页在不同分辨率下能够保持一致的视觉效果和用户体验,设计师们采用了多种策略和技术。...

    让网页自动适应显示器不同的“分辨率”

    解决思路:在不同分辨率下看到的网页版面格式有很大差别,甚至有可能错位。导致这种差别的原因,主要是因为网页中用了绝对定位的层,并且页面内容设置为居中,这样在分辨率改变时就会导致错位。因此我们可以通过判断...

    解决__让网页适应不同的浏览器和分辨率

    描述中提到的“做两个适合不同分辨率的页面”是一种过时的做法,现代网页设计倾向于使用单一但可适应的布局,即通过CSS媒体查询(Media Queries)来根据设备的视口大小调整页面样式。这种方法称为响应式Web设计...

    网页在不同分辨率下保持同一显示效果做法种种

    在网页设计中,确保网页能在各种不同的屏幕分辨率下保持一致的显示效果是非常重要的。本文主要介绍三种常见的实现方法:使用固定宽度并居中的表格、使用`<frameset>`标记以及使用`<iframe>`标记。 #### 方法一:...

    js判断页面的不同分辨率调用不同的css

    在网页设计中,为了确保网站在各种屏幕尺寸和设备上都能提供良好的用户体验,开发者常常需要根据用户设备的分辨率来调整页面样式。JavaScript 提供了一种动态的方法,可以在运行时检测浏览器窗口的分辨率,并据此...

    网页设计标准尺寸详细参数

    网页设计标准尺寸是确保网页在各种屏幕分辨率下良好呈现的关键因素。不同的屏幕尺寸会影响用户的浏览体验,因此设计师需要根据常见的显示器设置来优化网页布局。以下是关于网页设计标准尺寸的详细说明: 1. **基础...

    rem布局实现不同分辨率移动终端的自适应、整体缩放

    REM布局是一种在Web开发中广泛使用的响应式设计技术,它能够帮助开发者实现页面在不同分辨率的移动设备上自适应显示,确保用户界面在各种屏幕尺寸下都能保持良好的可读性和视觉一致性。REM(Root Em)是以根元素...

    页面分辨率问题

    页面分辨率问题通常涉及到网页设计、前端开发、以及用户界面体验。在这个主题下,我们主要讨论如何处理和优化页面在不同分辨率设备上的表现。 首先,我们要理解什么是页面分辨率。页面分辨率是指网页在屏幕上显示的...

    轻松设定Form页面分辨率

    "轻松设定Form页面分辨率"涉及了几个关键点,包括设计标准、页面布局以及控件大小和位置的动态调整。 首先,页面设计通常建议以1024*768作为基准分辨率,这是一个广泛接受的标准,确保大多数用户能够清晰地看到页面...

    网页设计标准尺寸.pdf

    1. 分辨率尺寸:文件开头提及的1800*600、1024*768等,属于显示器分辨率的标准之一,说明网页设计时需要考虑到不同分辨率下页面的适应性。在早期,1024*768像素是网页设计中常用的尺寸,随着显示器技术的发展,更大...

    网页设计像素的大小.doc

    网页设计中的像素大小是至关重要的,因为它直接影响到用户在不同分辨率屏幕下的浏览体验。网页设计的标准尺寸需要根据最常见的显示器分辨率来设定,以确保内容能在大多数设备上适当地显示,而不会产生滚动条,从而...

    制作自适应屏幕大小尺寸的网页,改变分辨率后需F5刷新.zip

    标题“制作自适应屏幕大小尺寸的网页,改变分辨率后需F5刷新.zip”暗示了这个压缩包可能包含了一些关于实现自适应网页设计的方法和技巧。 描述中提到的“改变分辨率后需F5刷新”,这通常是因为网页在设计时可能使用...

    C# Winform的自适应分辨率的类

    在Winform应用程序中,界面的显示大小和位置是固定的,这会导致在不同的屏幕分辨率下出现显示不正确的问题。例如,在高分辨率的屏幕下,界面可能会变得非常小,而在低分辨率的屏幕下,界面可能会变得非常大。为了...

    网页设计的尺寸大小如何设置.pdf

    文档标题“网页设计的尺寸大小如何设置”表明,本文档将详细讲解如何针对各种主流浏览器和不同的显示分辨率设定合适的尺寸。文档中使用了各种数字和英文字母组合(如“px”,“K”,“banner”,“LOGO”,“BUTTON...

    多分辨率网页效果预览

    这样就可以看到该分辨率下最大化的页面效果。 是Web开发人员的好助手。 另附SaveAs实用工具, 可以对网上的任何已知url提供目标另存为功能。 很容易用,自己随便试验一下便会用。 我常用它来下载flash文件。

    js效果展示(网页设计主页面)

    通过监听窗口大小的变化事件,设计师可以确保网页元素在不同分辨率的设备上都能正确显示,无论是手机、平板电脑还是桌面显示器。这样的自适应设计,使得网站能够覆盖更广泛的用户群体,提升了网站的可访问性和可用性...

    网页设计(尺寸大全)

    网页设计的标准尺寸随着分辨率的变化而调整。在800*600分辨率下,建议网页宽度不超过778像素,以确保无水平滚动条;在1024*768分辨率下,宽度保持在1002像素内,高度通常在612-615像素之间。在Photoshop中,全屏显示...

    网页设计布局基础教程(献给初学者).pdf

    页面尺寸受到显示器大小和分辨率的限制,通常在800x600的分辨率下,页面的显示尺寸为780x428个象素。 2. 整体造型:整体造型是指网页的整体形象,包括矩形、圆形、三角形、菱形等不同的形状。不同的形状代表着不同...

Global site tag (gtag.js) - Google Analytics