CSS 和 HTML 的解决问题

Question

我正在制作一个网站，其中包含 HTML 和 CSS 文件：

它在我的浏览器上完美呈现，在其他浏览器上也完美呈现，但在我的 PC 上。

我的分辨率是1920x1080，那里显示的是网站https://i.imgur.com/OOnhDSa.png

但是，当我的朋友尝试以 1680x1050 分辨率加载它时，网站看起来像这样 https://i.imgur.com/gmSgAPx.png

我该如何解决这个问题？我已经尝试过很多方法了。

首先，我用百分比设置了所有的宽度和高度。

然后，我用了normalized.css（没有效果，所以我去掉了）

因此，我尝试使用各种值（vw、vh、ch、em 等）设置字体大小，但没有成功。

最后，我尝试使用 @media 捕捉用户的分辨率并设置缩放值：它有效，但我不能对存在的每个分辨率都这样做。

哦，还有，我的朋友试图将他的分辨率设置为 1920x1080，但没有任何改变。

Answer 1

您应该将媒体查询用作：

相应地更改 *value*。

要为比您的屏幕小的屏幕配置 CSS：

@media only screen and (min-width: *value*) {
    .class_name{
        //new CSS property
    }
}

要为比您的屏幕更大的屏幕配置 CSS：

@media only screen and (max-width: *value*) {
    .class_name{
        //new CSS property
    }
}

之后，您可以使用 this 应用程序

检查网页在不同屏幕尺寸设备上的响应性和视图

Resolutions Issues with CSS and HTML