Css 使用视口缩放web布局

我知道CSS 3个单元

vw

、

vh

和

vm

，它们似乎对制作框大小和文本大小相对于浏览器视口大小的元素很有用。然而，可悲的是，目前的主流浏览器并没有很好地支持这些功能；只有Internet Explorer 9+可以

---

我还可以使用哪些其他方法来执行CSS

font size

属性等随视口缩放的操作？如果可能的话，我希望避免使用JavaScript和/或jQuery解决方案。

制作一个100%可伸缩的网站是可能的。正如Rev所说，您可以通过使用百分比值来实现这一点，但这很棘手

更好的选择是利用

@媒体查询

。这些允许您仅在特定条件下将CSS规则应用于页面。通过使用媒体查询来检测设备宽度和/或页面宽度，您可以对站点在不同视口大小下的外观进行微调控制。例如：

@media screen and (max-device-width: 960px) {
    font-size:14px;
}
@media screen and (max-device-width: 480px) {
    font-size:13px;
}

现在，上面的例子是相当琐碎和做作的。为了更深入地了解通过媒体查询可以实现的功能，我建议您查看。一些功能最强大的查询包括

宽度

，

最小设备宽度

，

最大设备宽度

，

纵向|横向

，以及

打印

查询

---

作为补充说明，请确保在CSS的底部包含这些样式，这样它们就不会被默认样式覆盖。

这是个好主意。是否也可以有一个完全可缩放的布局，而不是只有两个“间隔”？另外，

max device width

和

max width

之间有什么区别？@Delan我不担心完全缩放网站，因为用户可以轻松地将文本“压缩缩放”到舒适的水平。所有你应该关注的是设置一个初始的文本大小，这对他们来说是舒适的。（顺便说一句，你可以使用任何像素值作为宽度，而且你不限于两个。阅读这些样式，你就会看到你有多大的控制权。你可以做很多不同的尺寸，但诚实地说，只有2-3个可能是最好的。在设计网站时，最好在计算机之间尽可能保持一致，所以几个不同的@media比完全缩放要好。但是，如果你想绝对缩放，你可以按百分比做任何事情，但这有点棘手。最后！！厌倦了在IE帖子中看到不起作用的东西：）