使用视口缩放Web布局

Question

我知道的CSS 3个单位vw,vh和vm,这似乎是制造具有自己的箱尺寸和文字大小相对于浏览器的视口大小的元素是有用的.然而,遗憾的是,目前的主流浏览器并没有很好地支持这些功能.只有Internet Explorer 9+可以.

我还可以使用哪些其他方法来font-size处理与视口一起缩放的CSS 属性？如果可能的话,我想避免使用JavaScript和/或jQuery解决方案.

Answer 1

可以实现100%可扩展的网站.正如Rev所说,你可以通过使用百分比值来做到这一点,但这很棘手.

更好的选择是利用@media queries.这些允许您仅在特定条件下将CSS规则应用于页面.通过使用媒体查询来检测设备宽度和/或页面宽度,您可以对网站在不同视口大小下的外观进行微调控制.例如:

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

现在,上面的例子是相当微不足道的.为了更深入地了解您可以通过媒体查询完成的任务,我建议您查看W3C规范页面.一些最强大的是width,min-device-width,max-device-width,portrait|landscape,和print查询.

作为旁注,请确保在CSS的底部包含这些样式,以便它们不会被默认样式覆盖.