Question

我正在尝试将我的网站索引页面转换为可调整。我希望页面的整个内容可以调整。可调节我的意思是，如果有人在新窗口中打开页面并尝试通过鼠标拖动来调整窗口大小，我的页面内容也会根据窗口的宽度和高度进行调整。

是否可以只使用CSS，或者我也必须使用一些javascript？

我需要的是[this] [1]

任何帮助或建议都会受到高度关注

谢谢

Answer 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

Answer 2

只需设置相对宽度，例如width: 75%;或width: 60%;，而不是width: 450px;或width: 650px;。如果您需要在页面调整大小时缩小/缩小元素，这将对您有用如果你想要进行主要的布局更改（比如你提供的演示，当窗口变小时顶部菜单栏变成侧边栏），你需要一些Javascript来根据窗口的宽度切换样式表。希望这会给你一些想法！

Answer 3

您所谈论的内容被称为＆＃34;响应式设计＆＃34;。响应式网站更多地使用百分比而不是像素以及称为“媒体查询”的内容。在css。

这里有一篇很棒的文章： http://www.alistapart.com/articles/responsive-web-design/

CSS3中的自适应布局

3 个答案: