Html 如何将网页宽度（以像素为单位）缩放到任何屏幕尺寸？
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/6158652/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
How can I scale a web page width (in pixels) to any screen size?
提问by Really Curious
I am attempting to create website with a fixed width (970 px) and would like to ensure that it is adjusted to any potential user screen size, but the browser continues to display it in addition to margins created by my overall screen width.
我正在尝试创建具有固定宽度 (970 px) 的网站，并希望确保将其调整为任何潜在的用户屏幕尺寸，但除了由我的整体屏幕宽度创建的边距外，浏览器还会继续显示它。
回答by BentOnCoding
If you are trying to make your page span 100% of the width then review this article: Liquid Layout
如果您试图让您的页面跨越 100% 的宽度，请查看这篇文章： Liquid Layout
If you are trying to center your fixed width content on any page width simply use:
如果您尝试将固定宽度的内容放在任何页面宽度上，只需使用：
margin: 0px auto;
回答by Ben Hull
It's not a liquid-layout that you're after, but an 'elastic' layout, with an 'auto-stretch' script attached.
它不是您所追求的液体布局，而是一种“弹性”布局，并附有“自动拉伸”脚本。
There are a few steps to getting this to work:
有几个步骤可以让这个工作：
- 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.
- 使用 em 尺寸（而不是像素尺寸）创建布局。这具有使布局“可扩展”的效果，同时保持其比例正确。
将缩放值以
<body>百分比形式应用于元素。这个默认设置很有用，因为它在几乎所有浏览器中都将 1em 设置为等于 10px：body {font-size:62.5%;}这意味着您的布局的宽度为
97em.- 使用javascript检测用户页面的宽度，并调整body上的缩放值来改变'zoom'以适应页面。您希望它至少运行一次，在页面加载时，也可能在浏览器调整大小时运行。
Here's a good starting point for elastic layouts: http://www.alistapart.com/articles/elastic
这是弹性布局的一个很好的起点：http: //www.alistapart.com/articles/elastic
回答by Sam Magura
You shouldn't set the width. The contents of the page will expand to fill the entire screen by default.
你不应该设置宽度。默认情况下，页面内容将扩展以填满整个屏幕。
If you need to find the actual width of an element, you can always find that out. If you're using jQuery, it's
如果你需要找到一个元素的实际宽度，你总是可以找到的。如果你使用 jQuery，它是
var width = $("#my-element").width()
回答by Jimmy
If understand what you're getting at, it sounds like you set up your margins incorrectly. to center your content, you'll want your code to look something like this: http://jsbin.com/uyolo4/4/edit
如果了解您的意思，听起来您的利润设置不正确。要将您的内容居中，您会希望您的代码看起来像这样：http: //jsbin.com/uyolo4/4/edit
