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

标签 html css resize

我有一个页面,其中包含几个任意大小的内容 block 。有什么办法可以吗:

  1. 随着窗口大小的变化,允许这些 block 调整大小以填充所有可用空间,
  2. 指定每个 block 的最小大小,
  3. 当该 block 无法以指定的最小尺寸容纳在页面上时,请完全隐藏该 block 。

我可以完全控制 HTML 和 CSS。我强烈希望有一个没有 JavaScript 的解决方案。

最佳答案

@黑暗;可能您想要一个流畅的网站。所以,

1) 为 div 提供以百分比表示的 width(而不是 px),以调整大小。 查看更多http://www.smashingmagazine.com/2009/06/09/smart-fixes-for-fluid-layouts/

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

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

.block{
 min-width:20%;
}

3) 要隐藏某个 block 或更改特定窗口大小的设计,您必须在媒体查询中定义最小宽度或最大宽度。 检查链接

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/

关于html - 调整大小时干净地隐藏页面元素,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/6047428/

相关文章:

javascript - Chrome 的窗口调整大小事件问题

python - 如何在 HTML 文件中包含 python 脚本?

java - 在网络应用程序中上传图像

html - 没有滚动条的 CSS/HTML 滚动文本

html - 高度 :100% does not work when using Semantic-UI

php - 使用 Lanczo 算法调整 Web 图像大小 - 我应该使用哪种语言?

css - 如何调整任何屏幕尺寸的 div 和内容?

javascript - 旋转木马的交叉淡入淡出效果无法正常工作

html - ASP.NET:GridView 在 HTML 表格中的背景也改变颜色(鼠标悬停)

javascript - 如何为选项标签添加闪烁效果?