html中有没有办法选择最佳分辨率的页面？

Question

我创建了一个 html 网站，在计算机上看起来不错，但在手机上看起来很糟糕。然后我创建了一个单独的页面，该页面在手机上看起来不错，但在计算机上看起来很糟糕。 有没有一种方法可以使用 html、css 或 javascript 让网站在两个 html 代码之间切换以最好地匹配用户设备的分辨率？

Answer 1

CSS 已准备好媒体查询供您使用。它们简单高效，因此不需要 JavaScript。媒体查询将检查浏览器窗口的分辨率并将正确的样式应用于元素。

一切都在这里详细解释：

W3Schools 媒体查询简介。

要在您的网站中使用媒体查询，请将 HTML 链接到 CSS 代码，除了默认代码之外，还定义什么分辨率宽度将触发样式切换以及将发生什么变化，然后瞧。

以下是在分辨率低于 600 像素宽的屏幕上更改段落字体大小的示例：

/* This is the default code. */
p {
    font-size: 10px;
}

/* And this is the code that will trigger at 600px or less. */
@media only screen and (max-width: 600px) {
    p {
        font-size: 6px;
    }
}