HTML 5 和 CSS 样式随屏幕尺寸变化
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/5336677/
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
HTML 5 and CSS Style Change Upon Screen Size
提问by 1myb
Sorry if this post is too many of question, but because i weak in web design but i want to do these effect in my website, could you guy please let me know on how to do it ?
对不起，如果这篇文章的问题太多，但因为我在网页设计方面很弱，但我想在我的网站上做这些效果，你们能告诉我怎么做吗？
First...Please visit this site http://net.tutsplus.com/
首先...请访问本站 http://net.tutsplus.com/
Question 1 :May i know how could i do the effect of resizing in Asp MVC 3 ? when our site got a sidebar user screen size less than 1280x800, it will display single column of sidebar. When user screen size larger than 1280x800, it will display two column of sidebar.
问题 1：我可以知道如何在 Asp MVC 3 中调整大小的效果吗？当我们的站点的侧边栏用户屏幕尺寸小于 1280x800 时，它将显示单列侧边栏。当用户屏幕尺寸大于 1280x800 时，会显示两列侧边栏。
Question 2 :when the screen size is too small, left side of site will display only about 20px of margin. All the image and background will hidden. exact like when you re-size your browser when opening nettuts site.
问题2：当屏幕尺寸太小时，网站左侧只会显示大约20px的边距。所有图像和背景都将隐藏。就像打开 nettuts 站点时重新调整浏览器大小一样。
回答by RichardTape
The best way to adjust the layout of a page with respect to the size of the viewport that it is being displayed on is with CSS Media queries. Before you do anything, read this:
根据显示页面的视口大小调整页面布局的最佳方法是使用 CSS 媒体查询。在你做任何事情之前，请阅读以下内容：
http://www.alistapart.com/articles/responsive-web-design/
http://www.alistapart.com/articles/responsive-web-design/
It's practically the bible on the subject.
这实际上是关于这个主题的圣经。
After that, give the specs a read:
之后，阅读规格：
http://www.w3.org/TR/css3-mediaqueries/
http://www.w3.org/TR/css3-mediaqueries/
The less CSS framework comes with a set of useful media queries and is something I use as a very simple framework:
less CSS 框架带有一组有用的媒体查询，我将其用作一个非常简单的框架：
回答by deepcell
It depends of the positioning atribute: absolute, relative or fixed.. Try to use percentage rather than an absolute, relative or fixed value.
这取决于定位属性：绝对、相对或固定。尝试使用百分比而不是绝对、相对或固定值。
Otherwise try to control the left-margin, right-margin, top and bottom and test, test and more test until it get what you expect.
否则尝试控制左边距、右边距、顶部和底部并进行测试、测试和更多测试，直到达到您的预期。
I do this myself all the time, and always work.
我自己一直这样做，而且总是工作。
回答by Stephan Muller
Answer to Question 1This is not ASP but JavaScript. Basically you will need a script that is launched each time you resize the browser. It should then check the new viewport width and modify some of the CSS for the sidebar
问题 1 的答案这不是 ASP，而是 JavaScript。基本上，每次调整浏览器大小时，您都需要启动一个脚本。然后它应该检查新的视口宽度并修改侧边栏的一些 CSS
