`
Pweb
  • 浏览: 55264 次
  • 性别: Icon_minigender_1
  • 来自: 广州
社区版块
存档分类
最新评论

网页制作宽度根据浏览器宽度设定

    博客分类:
  • CSS
阅读更多
我的机器中只装了IE,FireFox,Opera,所以我只测试了这几个浏览器。因为IE处理滚动条的方式跟另外两个浏览器的处理方式不太一样,所以分开说。

1024分辨率下:

IE:

IE7:1003*590
IE6:1003*596
IE5.5:1003*607
Maxthon(正常模式):1003*544

浏览窗口的高度跟IE上边的工具栏有关系,以上的高度都是在IE的默认状态下的。Mathon有IE模式、正常模式、简单模式三个模式,我只测试了正常模式下的。

FireFox:

FireFox的浏览窗口的高度和宽度是这样计算的:当页面的高度和宽度没有超过浏览窗口的宽度和高度时,浏览窗口的宽度和高度是1024*575,当页面的高度超过575时,竖向滚动条出现,浏览窗口的宽度变成1007。

Opera:

Opera 的情况跟FireFox的情况一样,当页面的高度和宽度没有超过浏览窗口的宽度和高度时,浏览窗口的宽度和高度是1018*625。当出现竖向的滚动条时,页面的宽度变成1001。但是此时如果页面的宽度超过1001时,并不会出现横向的滚动条,只是超出1001范围的内容会被盖在竖向滚动条下面,页面宽度超过1018时浏览窗口才会出现横向滚动条。

800分辨率下:

IE:

IE7:779*422
IE6:779*428
IE5:779*439
Maxthon(正常模式):779*376

FireFox:

800*407(无滚动条状态)
783*408(有滚动条状态)

Opera:

794*457(无滚动条状态)
777*458(有滚动条状态)

结论:1024分辨率下,页面宽度应为1002,页面重要内容的位置不能低于570;800分辨率下,页面宽度应为778,页面中重要内容的位置不能低于400。
分享到:
评论

相关推荐

    固定宽度表格布局设定宽度问题

    但是,如果表格内容超过了这个宽度,浏览器会默认扩展表格以适应内容,这可能违背了我们设定固定宽度的初衷。为了解决这个问题,我们可以设定单元格(`<td>`和`<th>`)的宽度,并限制它们的溢出行为。 对于单元格的...

    通栏自适应浏览器宽度Banner幻灯片

    通栏自适应浏览器宽度的Banner幻灯片是网页设计中常用的一种元素,它能够根据用户浏览器窗口的大小自动调整自身的宽度,确保在不同设备和屏幕尺寸下都能展示良好的视觉效果。这种设计通常用于网站的首页或者重要页面...

    网页设计中对于尺寸的设定

    但宽度的设定更为关键,因为它直接影响网页内容的排列和阅读体验。在不同浏览器下,宽度计算方式略有不同: 1. IE6.0会将显示器分辨率减去21像素,例如1024的分辨率会变为1003像素。同时,无论网页内容多高,IE6.0...

    自适应浏览器宽度的带缩略图焦点图

    "自适应浏览器宽度的带缩略图焦点图"是一个专为现代网页设计打造的组件,它能够根据用户设备的浏览器宽度自动调整大小,提供优秀的用户体验,尤其是在移动设备上。这个组件的特点在于它不仅有全屏的显示效果,还包含...

    react-ReactResized根据浏览器宽度返回不同的值

    在React开发中,我们经常需要根据浏览器窗口的大小来调整组件的布局或行为,以实现响应式设计。`React Resized` 是一个这样的库,它允许我们监听元素或浏览器窗口的尺寸变化,并在尺寸发生变化时提供回调函数,返回...

    通栏自适应浏览器宽度的Banner幻灯片

    本文将深入探讨“通栏自适应浏览器宽度的Banner幻灯片”这一主题,结合描述和标签,我们将重点讲解如何创建一个能够根据屏幕宽度自动调整的Banner特效。 首先,"自适应"(Responsive)是现代网页设计的关键特性,它...

    div宽度自适应布局(左边自适应)

    宽度自适应是指网页元素的宽度会根据浏览器窗口的大小自动调整。这通常通过CSS的`width`属性配合百分比单位来实现。例如,设置`div`的宽度为`width: 100%;`,这样`div`就会占据其父元素的全部宽度,当窗口大小改变时...

    css+div自适应窗口宽度

    在另一个代码片段中,`.R`类的div元素宽度设定为100px,背景色为蓝色,且浮动到右边。这里展示了另一种自适应布局的方式,通过浮动元素和固定宽度来分配页面空间。 最后的代码示例中,`.wrap_l`, `.wrap_m`, 和 `....

    生成网页缩略图(输入网址,宽度,高度生成缩略图)

    截图后,原始图片可能是全尺寸的,需要根据用户设定的宽度和高度进行缩放。这通常使用图像处理库如ImageMagick、PIL(Pillow)或者OpenCV来完成。 4. **格式转换**: 提供的描述中提到生成的是BMP格式的缩略图,BMP...

    div宽度自适应布局(右边自适应)

    在网页设计中,"div宽度自适应布局(右边自适应)"是一种常见的网页布局技术,它主要涉及CSS(层叠样式表)的运用,使网页内容能够根据不同的屏幕尺寸和设备进行适配,尤其是针对响应式设计。在这个布局模式下,通常...

    jquery动态调整div大小使其宽度始终为浏览器宽度

    在网页设计中,有时我们需要创建一个div元素,其宽度能够根据浏览器窗口的大小实时变化,以确保内容始终占据整个浏览器宽度。jQuery 提供了一个简单易用的方法来实现这个功能,让我们详细了解一下如何通过jQuery动态...

    网站制作经验(浏览器兼容性)

    网站制作过程中,浏览器兼容性是开发者常常面临的一大挑战。不同浏览器对HTML、CSS和JavaScript的解析方式可能存在差异,导致在不同浏览器中展示效果不一致。以下是一些针对常见浏览器兼容性问题的解决策略: 1. **...

    网页制作入门教程PPT学习教案.pptx

    网页制作入门教程PPT学习教案是一个关于网页制作的基础知识教程,主要介绍了网页框架、框架页面的设定、框架边框的颜色、框架边框的宽度、框架页面之间的链接、框架的基本语法、框架的尺寸设置、 COLS & ROWS 的使用...

    javaweb表格宽度

    在HTML中,表格的宽度可以通过设置`width`属性来调整,但这种方法并不灵活,因为浏览器可能会忽略这些设定。在CSS中,我们可以使用更精细的方式来控制表格及其单元格的宽度。 1. **CSS样式控制** - `table-width`:...

    CSS3 @media 媒体查询 实例源代码,调整浏览器窗口大小。当宽度小于300时,背景色变成淡蓝,否则淡绿色.zip

    在网页设计领域,CSS3(层叠样式表第三版)引入了媒体查询(@media queries)这一强大特性,使得我们能够根据设备的特定条件,如视口宽度、屏幕分辨率等,来应用不同的样式规则。这极大地提升了网页的响应式设计能力...

    css控制div的宽度

    当设置width为auto时,浏览器会根据内容自动确定宽度。但要注意,如果其他样式如浮动(float)或绝对定位(position: absolute)被应用,auto可能不会按预期工作。 4. 最大和最小宽度: 可以使用max-width和min-...

    CSS 实现div宽度根据内容自适应

    3. **百分比宽度**:如果知道内容的最大宽度,可以设置一个最大宽度(如`max-width`),然后将宽度设为百分比,这样当内容超过最大宽度时,div会自适应内容宽度,但不超过设定的最大值。 总结来说,CSS实现div宽度...

    HTML_CSS_JavaScript网页制作(新).pdf

    - 背景图像和背景颜色是指CSS属性中的background-image和background-color,它们可以为网页元素设定背景图像或者颜色,使得网页的视觉效果更加丰富和吸引人。 - Email链接是一种特殊的超链接,它通过mailto协议指向...

    网页自适应不同浏览器和分辨

    网页自适应设计是一种重要的网页开发技术,它使得网站在各种不同的设备、屏幕尺寸和浏览器上都能呈现出良好的用户体验。随着移动设备的普及,用户可能通过桌面电脑、笔记本、平板电脑或智能手机访问网页,因此,网页...

Global site tag (gtag.js) - Google Analytics