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

时间:2016-02-01 21:46:29

标签: html css

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

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

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

我设法使用viewport metatag,但这只适用于移动浏览器(我不需要...)

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

谢谢!

2 个答案:

答案 0 :(得分: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) {
}

答案 1 :(得分:1)

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

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

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

如果您的字体大小为12(1280x800),那么您需要font-size: 1.25vw