html - 试图调整整个页面的大小(IE 缩小一切)

标签 html css

我有一个我制作的网站(没有 Bootstrap 或任何其他东西,我在尝试为屏幕分辨率较小的人缩小所有内容时遇到问题。基本上我会希望它检测大小,并且如果在特定宽度下,将适当的 CSS 类应用于元素以缩小所有内容。现在我只是尝试构建 CSS 类,但我遇到了一些困难。我最接近的是使用以下方法缩小所有内容:

transform: scale(.75);

这对调整大小的实际内容非常有效,但我在内容周围留下了一个大的填充字段。有点难以解释,但我想要的是缩小内容,但 div 仍然是浏览器的 100%(所以如果有一个较小的浏览器,它很适合内容周围没有这个愚蠢的大填充区域)

这是它通常的样子: image!

这是添加了 CSS 转换后的样子:image2!

任何关于如何克服这个问题的想法将不胜感激,另请注意,我真的不关心我的解决方案在 IE9 或更低版本中不起作用!

我想要的基本输出相当于将浏览器缩放缩小到 75%(如果有帮助的话)..

最佳答案

根据您的 CSS 编写方式,像这样简单的事情可能会奏效:

@media only screen and (max-width: 600px) {
    body {font-size: 85%;}
}

如果你有 em 宽度的 div 会缩小它们的宽度,但你可以通过上面的媒体查询更改它,也许将它们的宽度设置为 100% 等。

关于html - 试图调整整个页面的大小(IE 缩小一切),我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/26131748/

相关文章:

php - 动态创建带有悬停文本的 "button"图像

html - 背景图像旋转 - 为什么?

javascript - 在 JavaScript 中添加和删除 body 中的 div

iphone - 为什么 CSS 不启动 max-device-width : 480px?

html - 抽屉导航打开时如何隐藏滚动条

html - 如何更改事件导航丸的颜色?

javascript - 如何转义 JavaScript 中的所有单引号和双引号

css - 按值属性定位列表项

javascript - CSS 透视图 : fit the trapezoid inside container bounds

html - 缩放 HTML 元素的最佳方法