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 ?"
}

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;
    }
}

实际尺寸可根据您的情况而有所不同.

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

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");
    }
}

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