不同屏幕分辨率的css？

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

在您的示例中，您希望设置最小宽度ou高度，因此您可能只需要使用屏幕大小计算出来的值。如果是这样的话，你可以使用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 at宽，那么媒体查询中的任何样式都会启动。(我不会根据屏幕大小加载不同的CSS文件。)

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

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

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

Answer 3

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

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