Question

如果我在两个不同分辨率的系统上检查 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

您可以在单个媒体查询中组合不同的属性。此示例将在宽度至少为500px且高度至少为400px的所有屏幕上应用这些样式：

@media all and (max-width: 500px) and (min-height: 400px) {
  body {
    background: #ccc;
  }
  .someclass {
    padding: 10px;
  }
}

Answer 3

不。他们并不是在暗示不同的课程。使用媒体查询，您可以在单个文件中根据屏幕（或媒体）分辨率（宽度，高度，宽高比......）设置不同的CSS规则，或者您可以根据查询包含不同的样式表。

我建议您按照教程开始使用媒体查询。

Answer 4

在您的示例中，您要设置最小宽度或高度，因此您可能只需要使用屏幕尺寸之外的值即可。在这种情况下，您可以使用单位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");
    }
}

这可以用来提供更高的分辨率图像，以逐步增强大屏幕或视网膜显示。

css用于不同的屏幕分辨率？

4 个答案: