为不同的屏幕分辨率调整 html 网站的大小
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/8007443/
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
resize html website for different screen resolutions
提问by airnet
I had to redo a website from flash to html/jquery. Everything looked great. Until I tested the site on a netbook where the screen resolution is much smaller. All the elements were misaligned or didn't stretch as I wanted it to. Or there were scroll bars everywhere.
我不得不重做一个网站，从 Flash 到 html/jquery。一切看起来都很棒。直到我在屏幕分辨率小得多的上网本上测试了该网站。所有元素都没有对齐或没有像我想要的那样伸展。或者到处都是滚动条。
So, How would do I make it stretch or resize properly,
那么，我该如何让它正确拉伸或调整大小，
Is there a property which I can set somewhere that would resize everything proportionately?
是否有我可以在某处设置的属性可以按比例调整所有内容？
回答by Ariful Islam
You should use heigh / width in percentage(%) rather px / em. change the css file.
您应该使用百分比（％）而不是 px / em 的高度/宽度。更改css文件。
回答by scumah
Is there a property which I can set somewhere that would resize everything proportionately?
是否有我可以在某处设置的属性可以按比例调整所有内容？
No, I wish :P You'll need to redo the layout to make it liquidor use media queries to make it responsiveto different resolutions. I'm afraid both solutions could be pretty complex.
回答by Quentin
Is there a property which I can set somewhere that would resize everything proportionately?
是否有我可以在某处设置的属性可以按比例调整所有内容？
Everything? No. Font sizes won't adjust based on window size (at least not without JS).
一切？不。字体大小不会根据窗口大小进行调整（至少在没有 JS 的情况下不会）。
You can set the widths of most things using percentage units in your stylesheets, but even then there will be a point where things will break down.
您可以在样式表中使用百分比单位设置大多数事物的宽度，但即便如此，也会有一些事情会崩溃。
The current buzzword is responsive web design(I can't comment on the quality of the links from that page) in which media queriesare used to provide different designs for different sized browsers.
回答by sandeep
The property called Media Querywe mostly use this property with Responsible Web Design. In which we tell browsers change the specific cssproperty at that particular screen size.
这个属性叫做Media Query我们大多使用这个属性和 Responsible Web Design。在我们告诉浏览器更改的特定css属性，在那个特定的screen size。
Check this article for more http://css-tricks.com/6206-resolution-specific-stylesheets/
查看这篇文章了解更多http://css-tricks.com/6206-resolution-specific-stylesheets/
& for Responsible Web Designmostly use value in Percentageinstead of Pixels.
&Responsible Web Design主要使用 value inPercentage而不是Pixels.
Check THISwebsite for more reference.
查看此网站以获取更多参考。
回答by Gabriel
The question was to RESIZE not to REALIGN. Using percentiles will only change WHERE the HTML elements show up on the page. It will not change their SIZE.
问题是要调整大小而不是重新对齐。使用百分位数只会改变 HTML 元素出现在页面上的位置。它不会改变它们的 SIZE。
回答by Ihsan Khattak
you can use with and height in percentage to set your screen for all resoulation..Give the 100% width to the body and the div you want give 100% width.
你可以使用 with 和 height 百分比来设置你的屏幕的所有分辨率..给主体 100% 的宽度和你想要给 100% 宽度的 div。
回答by Alex
unfortunately there is no "magic" which scales things up/down. i can think of some guidelines:
不幸的是，没有“魔法”可以放大/缩小事物。我可以想到一些指导方针：
- Use relative widths for things (percentages) instead of absolute value
- no hardwired sizes, keep them in separate CSS documents
- work your way up: choose a minimum resolution, work upwards from it. it makes sizing things much easier.
- 使用事物的相对宽度（百分比）而不是绝对值
- 没有硬连线尺寸，将它们保存在单独的 CSS 文档中
- 向上工作：选择最小分辨率，然后向上工作。它使调整大小变得更加容易。
