调整大小时干净地隐藏页面元素

时间:2011-05-18 15:45:25

标签: html css resize

我有一个包含几个任意大小的内容块的页面。有没有办法可以:

  1. 当窗口大小发生变化时,允许这些块调整大小或更小以填充所有可用空间
  2. 为每个块指定最小大小,
  3. 当块无法以指定的最小尺寸放在页面上时完全隐藏。
  4. 我可以完全控制HTML和CSS。我非常希望没有Javascript的解决方案。

2 个答案:

答案 0 :(得分:2)

对于第1个,您可以使用%值设置widthheight。这将导致“块”在“窗口大小改变”时调整大小。对于第二个,您可以设置min-widthmin-height,这样无论窗口大小如何,块都不会缩小到小于指定值。至于第3个,你将不得不使用javascript。

答案 1 :(得分:2)

@dark;可能你想要一个流畅的网站。所以,

1)以百分比代替width而不是px给div更大的尺寸&小。 查看更多http://www.smashingmagazine.com/2009/06/09/smart-fixes-for-fluid-layouts/

http://www.alistapart.com/articles/fluidgrids/

2)是的,您可以为您的块定义min-width,如

.block{
 min-width:20%;
}

3)要隐藏块或更改具有特定窗口大小的设计,您必须在media query中定义最小宽度或最大宽度。 检查链接

http://www.smashingmagazine.com/2011/01/12/guidelines-for-responsive-web-design/

http://www.smashingmagazine.com/2010/07/19/how-to-use-css3-media-queries-to-create-a-mobile-version-of-your-website/

http://nathanstaines.com/demo/media-queries.html

http://css-tricks.com/css-media-queries/