logo标签列表

如何将网页宽度（以像素为单位）适配任何屏幕尺寸？

htmlcsssize
4
我正在尝试创建一个固定宽度的网站（970像素），并希望确保它适应任何潜在的用户屏幕大小，但浏览器仍然显示它，除了我整个屏幕宽度所创建的边距。
5
不太清楚你在这里提出的问题。我不理解你所说的“固定宽度”和“适应任何屏幕尺寸”的意思…… 你是想让970像素宽的布局自动缩放以填充整个屏幕吗？还是想让布局保持970像素宽，无论屏幕大小如何？ - Ben Hull
是的，我希望宽度填满屏幕，无论其大小。 - Really Curious
你的意思是想设计你的网站宽度为970px，但你希望浏览器以某种方式“缩放”，使所有内容都按比例缩放以适应浏览器宽度吗？ - thirtydot
4个回答
3
如果您想让页面宽度占满100％，请查看此文章：流式布局 如果您想将固定宽度的内容居中显示在任何页面宽度上，请使用以下方法：
margin: 0px auto;
2

您需要的不是流式布局，而是弹性布局，并附带一个“自动拉伸”脚本。

以下是实现此功能的几个步骤：

  • Create your layout using ems for dimensions (instead of pixel dimensions). This has the effect of making the layout 'scalable' while keeping its proportions correct.

  • Apply a scaling value to your <body> element as a percentage. This default setting is useful, because it sets 1em equal to 10px in nearly all browsers:

    body {font-size:62.5%;}

    This would mean your layout would have a width of 97em.

  • Use javascript to detect the width of the user's page, and adjust the scaling value on the body to change the 'zoom' to fit the page. You would want this to run at least once, when the page is loaded, and possibly whenever the browser is resized, also.

这里有一个关于弹性布局的很好的起点：http://www.alistapart.com/articles/elastic

1

不应该设置宽度。页面内容默认会扩展以填满整个屏幕。

如果您需要找到元素的实际宽度，您总是可以找到它。如果您正在使用jQuery，则为：

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

如果我理解正确的话，似乎您设置了错误的边距。为了使内容居中，您需要让代码看起来像这样：http://jsbin.com/uyolo4/4/edit

网页内容由stack overflow 提供, 点击上面的
可以查看英文原文，
原文链接