我正在尝试将我的网站索引页面转换为可调整的。我希望页面的整个内容都可以调整。可调整是指如果有人在新窗口中打开页面并尝试通过用鼠标拖动窗口来调整窗口大小，我的页面内容也会根据窗口的宽度和高度自行调整。
是否可以只使用 CSS 或者我也必须使用一些 javascript？
我需要的是类似 [this][1]
任何帮助或建议都将受到高度评价
谢谢
问问题
907 次
3 回答
1
你想做的是响应式设计
例如，您可以使您的 css 以特定设计为目标：
//General css
/*MEDIA BETWEEN 300 - 1000PX */
@media all and (min-width:300px) and (max-width:1000px)
{
}
/*MEDIA BETWEEN 621 - 800PX */
@media all and (min-width:621px) and (max-width:800px)
{
}
/*MEDIA BETWEEN 300 - 620PX */
@media all and (min-width:300px) and (max-width:620px)
{
}
一些可以提供帮助的页面是：
- http://googlewebmastercentral.blogspot.in/2012/04/responsive-design-harnessing-power-of.html
- http://www.onextrapixel.com/2012/04/23/responsive-web-design-layouts-and-media-queries/
注意：使用 em 和 % 代替 px 和 pt
于 2012-09-19T11:21:44.970 回答
0
只需在东西上设置相对宽度，例如width: 75%;orwidth: 60%;而不是width: 450px;or width: 650px;。如果您只需要在调整页面大小时使元素变窄/变宽，这对您有用。
如果您想要进行重大布局更改（例如在您提供的演示中，当窗口变小时，顶部菜单栏变成侧边栏），您将需要一些 Javascript 来根据窗口宽度切换样式表。希望这能给你一些想法！
于 2012-09-19T10:53:09.740 回答
0
您所说的称为“响应式设计”。响应式网站更多地使用百分比而不是像素以及 css 中称为“媒体查询”的东西。
这里有一篇很棒的文章： http ://www.alistapart.com/articles/responsive-web-design/
于 2012-09-19T10:55:19.000 回答