在不同分辨率的桌面上扩展网页

Question

我有一个固定布局的网页。 它使用标准尺寸1280x800构建。

由于它不需要移动兼容，也不需要公众访问，因此它是使用固定大小的元素构建的。

问题是，我需要根据浏览器大小自动缩放。

我设法使用viewport metatag，但这只适用于移动浏览器（我不需要...）

e.g。当在具有1024x768分辨率的桌面上的Chrome中打开页面时，如何正确显示页面，而无需在浏览器中手动缩小？

谢谢！

Answer 1

使用CSS媒体查询在不同的屏幕宽度上实现不同的样式（响应）。以下是一些不同媒体查询的示例。

/* Smaller than standard 960 (devices and browsers) */
@media only screen and (max-width: 959px) {
}

/* Tablet Portrait size to standard 960 (devices and browsers) */
@media only screen and (min-width: 768px) and (max-width: 959px) {
}

/* All Mobile Sizes (devices and browser) */
@media only screen and (max-width: 767px) {
}

/* Mobile Landscape Size to Tablet Portrait (devices and browsers) */
@media only screen and (min-width: 480px) and (max-width: 767px) {
}

/* Mobile Portrait Size to Mobile Landscape Size (devices and browsers) */
@media only screen and (max-width: 479px) {
}

Answer 2

根据宽度与尺寸之比1280x800，将每个px替换为vw。

因此，如果你有width: 1280px的div，则会将其替换为width: 100vw。

以这种方式在身体上设置font-size以使文字扩展，并使用em或rem来调整较大的文字大小。

如果您的字体大小为12（1280x800），那么您需要font-size: 1.25vw。