不同屏幕分辨率的CSS？

Question

如果我 在 2 个具有不同分辨率的不同系统上检查 html， 则视图会失真。

有什么方法可以在运行时计算屏幕宽度和高度吗？

我缺乏使用 CSS 的经验，但做了一些研究并发现：

https://css-tricks.com/css-media-queries/

但他们建议不同的课程。（如果我没记错的话）

我的问题是可以在运行时获取高度和宽度并只使用一个 css 吗？

就像是 ：

 .view {
min-width :"some how gets computed:which device we are using ?"
min-height :"some how gets computed:which device we are using ?"
}

原文由 lesnar 发布，翻译遵循 CC BY-SA 4.0 许可协议

Answer 1

媒体查询是解决您的问题的不错选择。

您不必为这些使用不同的类，只需根据分辨率定义不同的行为即可。

你可以通过 Javascript 知道屏幕的高度和宽度，但是使用 CSS，我认为这是不可能的。你可以用 css 做的最好的事情是定义设备范围，如手机、平板电脑、笔记本电脑、真正的大屏幕设备，并且基于媒体查询，你可以定义一个类在特定类型的设备上做什么。

看看下面的例子：

 /* For Mobile */
@media screen and (max-width: 540px) {
    .view {
        width: 400px;
    }
}

/* For Tablets */
@media screen and (min-width: 540px) and (max-width: 780px) {
    .view {
        width: 600px;
    }
}

实际尺寸可能因您的情况而异。

这与许多框架用于实现响应性的方法相同。

原文由 Kapil Soni 发布，翻译遵循 CC BY-SA 3.0 许可协议

Answer 2

在您的示例中，您想要设置最小宽度或高度，因此您可能只需要使用根据屏幕尺寸计算出的值。如果是这种情况，您可以使用单位 vw 或 vh，分别表示屏幕宽度的 1% 和屏幕高度的 1%。

 .view {
    min-width: 42vw; /* Equals 42% of screen width */
    min-height: 58vh; /* Equals 58% of screen width */
}

通过使用 calc() 函数，您可以获得更复杂的结果。为此，您可能还想查看 CSS 变量。例如：

 .view {
    min-width: calc( 42vw - 12px );
    min-height: calc( 58vmin / var(--precalculated-scaled-value) );
}

但是如果你需要多个规则，比如改变布局、颜色、字体等，那么你就需要媒体查询。在最基本的形式中，你会做类似的事情：

 @media (min-width: 800px){
    .class{
        /* Your styling goes here */
    }
}

在上面的示例中，如果屏幕宽度至少为 800 像素，媒体查询中的任何样式都会起作用。 （顺便说一句，我不会根据屏幕尺寸加载不同的 CSS 文件。）

最后，由于您使用了“分辨率”一词，我觉得我必须补充一点，您也可以设置媒体查询以匹配屏幕分辨率。这在提供大图像时会派上用场。例如：

 @media (min-width: 1200px),
       (min-width: 600px) and (resolution: 200dpi) {
    .my-image{
        content: url("http://example.com/high-def-image");
    }
}

这可用于提供更高分辨率的图像，作为对更大屏幕或视网膜显示器的渐进增强。

原文由 isacvale 发布，翻译遵循 CC BY-SA 4.0 许可协议