CSS3中的自适应布局 [英] Adaptive Layouts in CSS3

问题描述

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

可能只使用CSS还是我也必须使用一些javascript？

我需要的是像[this] 1]

任何帮助或建议都会高度评价。

感谢

<

您想要做的是： 可以使你的css目标特定设计为：

  //一般css 
 
 
 / * MEDIA BETWEEN 300  -  1000PX * / 
 @media all和（min-width：300px）和（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）
 {
 
} 
  

可以帮助的一些页面是：

1. http://googlewebmastercentral.blogspot.in/2012/04/responsive-design-harnessing-power-of.html


2. http://www.onextrapixel.com/2012/04 / 23 / responsive-web-design-layouts-and-media-queries /

em和％而不是px和pt

I am trying to convert my website index page to be adjustable. I want the whole conent of the page to be adjustable. By adjustable I mean if some one opens the page in a new window and try to resize the window by dragging it with mouse, the content of my page also adjust itself according to the width and height of the window.

Is it possible using only CSS or I have to use some javascript as well?

What I need is something like [this][1]

Any help or advice will be highly appriciated

Thanks

解决方案

What you want to do is to Responsive Design

For example you can make your css target a particular devise as:

//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)
{

}

Some of the pages that can help are:

1. http://googlewebmastercentral.blogspot.in/2012/04/responsive-design-harnessing-power-of.html
2. http://www.onextrapixel.com/2012/04/23/responsive-web-design-layouts-and-media-queries/

NOTE: use em and % instead of px and pt

这篇关于CSS3中的自适应布局的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！