html - 不同屏幕分辨率的CSS？

Question

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

有没有办法在运行时计算屏幕的宽度和高度？

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

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

但他们建议使用不同的类(class)。(如果我没记错的话)

我的问题是可以在运行时获取高度和宽度并只使用一个 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;
    }
}

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

这与许多框架用来实现响应能力的方法相同。