我有一个我制作的网站(没有 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/