如何将网页宽度(以像素为单位)缩放到任何屏幕尺寸?

时间:2011-05-27 23:38:26

标签: html css size

我正在尝试创建具有固定宽度(970像素)的网站,并希望确保将其调整为任何潜在的用户屏幕大小,但除了我的整体屏幕宽度创建的边距外,浏览器还会继续显示它

4 个答案:

答案 0 :(得分:3)

如果您尝试使页面跨度达到宽度的100%,请查看以下文章: Liquid Layout

如果您尝试将固定宽度内容放在任何页面宽度上,只需使用:

margin: 0px auto;

答案 1 :(得分:2)

这不是你所追求的液体布局,而是一种“弹性”布局,附有“自动拉伸”脚本。

要实现这一目标,有几个步骤:

  • 使用ems为尺寸(而不是像素尺寸)创建布局。这样可以使布局“可扩展”,同时保持其比例正确。
  • 将缩放值作为百分比应用于<body>元素。此默认设置很有用,因为它在几乎所有浏览器中都将1em设置为10px:

    body {font-size:62.5%;}
    

    这意味着您的布局宽度为97em

  • 使用javascript检测用户页面的宽度,并调整正文上的缩放值以更改“缩放”以适合页面。您希望在加载页面时至少运行一次,也可能在浏览器调整大小时运行。

这是弹性布局的一个很好的起点:http://www.alistapart.com/articles/elastic

答案 2 :(得分:1)

您不应设置宽度。默认情况下,页面内容将展开以填满整个屏幕。

如果您需要找到元素的实际宽度,您总能找到它。如果你正在使用jQuery,那就是

var width = $("#my-element").width()

答案 3 :(得分:0)

如果了解您所了解的内容,则听起来您错误地设置了边距。 要使您的内容居中,您希望代码看起来像这样:http://jsbin.com/uyolo4/4/edit