我有一个网站，我需要缩放不同的屏幕分辨率。所以我决定使用媒体查询来更改缩放级别基于屏幕分辨率如下：
@media screen and (max-width: 1366px) {
html {
-moz-transform: scale(0.75, 0.75);
zoom: 0.75;
zoom: 75%;
}
}
@media screen and (max-width: 1024px) {
html {
-moz-transform: scale(0.75, 0.75);
zoom: 0.75;
zoom: 75%;
}
}字符串
结果如下：
1. 10920x1080分辨率（无缩放，这是我需要复制其他屏幕尺寸的预期比例）
2. 1366x768分辨率（无媒体查询和缩放）
3. 1366x768分辨率（支持媒体查询和75%缩放css）
我通过媒体查询和缩放组合实现了所需的缩放，但这里的问题是视口没有相应地缩放，并保持在原始水平。（参见图3。注意底部的笨拙的白色空间，* 在视口的外部 *）。如果我使用Ctrl +更改窗口缩放，视口会相应地调整。
我该如何解决此问题？
1条答案
按热度按时间icomxhvb1#
如果你只是想让屏幕根据设备宽度缩放，然后缩小到75%，你应该使用viewport Meta标签：
第一个月
媒体查询是针对不同视口宽度的单独缩放内容，而不是针对自适应屏幕宽度的统一缩放内容。在您的案例中，
@media screen and (max-width: 1366px)已经覆盖了@media screen and (max-width: 1024px)。但是由于您有
@media screen and (max-width: 1024px)的第二个声明，因此宽度低于1024px的屏幕将使用该声明而不是@media screen and (max-width: 1366px)。在你的例子中，两者都有相同的声明，使它们成为多余的。