Html 不同屏幕分辨率的css？
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/40526500/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
css for different screen resolutions?
提问by lesnar
If i check html on 2 different Systems with different resolutionsthen the view is distorted.
如果我在具有不同分辨率的 2 个不同系统上检查html，则视图会失真。
Is there any way of calculating the screen width and height at run time ?
有没有办法在运行时计算屏幕宽度和高度？
i lack experience with css but did some research and found about :
我缺乏使用 css 的经验，但做了一些研究并发现：
https://css-tricks.com/css-media-queries/
https://css-tricks.com/css-media-queries/
but there they are suggesting different classes .(if i am not wrong)
但他们建议不同的课程。（如果我没记错的话）
My question is it possible to get the height and width at run time and use only one css ?
我的问题是可以在运行时获取高度和宽度并且只使用一个 css 吗？
something like :
就像是 ：
.view {
min-width :"some how gets computed:which device we are using ?"
min-height :"some how gets computed:which device we are using ?"
}
回答by Kapil Soni
Media queries is a good choice for your problem.
媒体查询是解决您问题的不错选择。
You don't have to use different classes for these, just you have to define different behaviour based on resolution.
您不必为这些使用不同的类，只需根据分辨率定义不同的行为。
You can know the screen height and width by Javascript, but with CSS, I dont think that is possible. The best you can do with css is to define range of devices as in Mobiles, Tablets, Laptops, Really Large screen Devices and based on media queries you can define what a class do on certain type of device.
您可以通过 Javascript 知道屏幕的高度和宽度，但是使用 CSS，我认为这是不可能的。您可以使用 css 做的最好的事情是定义设备范围，如手机、平板电脑、笔记本电脑、真正的大屏幕设备，并且基于媒体查询，您可以定义一个类在某些类型的设备上做什么。
Have a look a below example:
看看下面的例子：
/* 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;
}
}
Actual dimensions can vary as per your case.
实际尺寸可能因您的情况而异。
This is the same method many framework uses to implement responsiveness.
这与许多框架用于实现响应性的方法相同。
回答by Māris Kise?ovs
You can combine different attributes in single media query. This example will apply these styles on all screens with width at least 500px and height at least 400px:
您可以在单个媒体查询中组合不同的属性。此示例将在宽度至少为 500 像素且高度至少为 400 像素的所有屏幕上应用这些样式：
@media all and (max-width: 500px) and (min-height: 400px) {
body {
background: #ccc;
}
.someclass {
padding: 10px;
}
}
回答by isacvale
In your example you want to set a min-width ou height, so you probably just need to use a value computed out of the screen size. If that's the case, you can use the units vw or vh, which mean 1% of screen width and 1% of screen height, respectively.
在您的示例中，您想要设置最小宽度或高度，因此您可能只需要使用从屏幕尺寸计算出来的值。如果是这种情况，您可以使用单位 vw 或 vh，分别表示屏幕宽度的 1% 和屏幕高度的 1%。
.view {
min-width: 42vw; /* Equals 42% of screen width */
min-height: 58vh; /* Equals 58% of screen width */
}
By using the calc() function you can get more sophisticated results. And to that end, you might also like to look into CSS variables. For example:
通过使用 calc() 函数，您可以获得更复杂的结果。为此，您可能还想查看 CSS 变量。例如：
.view {
min-width: calc( 42vw - 12px );
min-height: calc( 58vmin / var(--precalculated-scaled-value) );
}
But if you need multiple rules, like changing layout, colors, fonts etc, than you need media queries. In its most basic form you'd do something like:
但是如果你需要多个规则，比如改变布局、颜色、字体等，那么你就需要媒体查询。在最基本的形式中，您可以执行以下操作：
@media (min-width: 800px){
.class{
/* Your styling goes here */
}
}
In the example above, any styling inside the media query would kick in if the screen is at least 800px wide. (I wouldn't load different CSS files depending on the screen size, btw.)
在上面的示例中，如果屏幕宽度至少为 800 像素，则媒体查询中的任何样式都会生效。（顺便说一句，我不会根据屏幕大小加载不同的 CSS 文件。）
Finally, since you used the word "resolution", I feel I must add that you can set the media queries to match screen resolutions, too. This comes in handy when serving large images. For example:
最后，由于您使用了“分辨率”这个词，我觉得我必须补充一点，您也可以设置媒体查询以匹配屏幕分辨率。这在提供大图像时会派上用场。例如：
@media (min-width: 1200px),
(min-width: 600px) and (resolution: 200dpi) {
.my-image{
content: url("http://example.com/high-def-image");
}
}
That could be used to serve a higher res image as a progressive enhancement to larger screens or retina displays.
这可用于提供更高分辨率的图像，作为对更大屏幕或视网膜显示器的渐进增强。
回答by GiuServ
Nope. they are not suggesting different classes. With media queries you can set differents css rules based on screen (or media) resolution (width, height, aspect-ratio...) in a single file, or you can include different stylesheet based on the query.
不。他们并不是在建议不同的课程。使用媒体查询，您可以在单个文件中根据屏幕（或媒体）分辨率（宽度、高度、纵横比...）设置不同的 css 规则，或者您可以根据查询包含不同的样式表。
I suggest you to follow a tutorial to start using media queries.
我建议您按照教程开始使用媒体查询。
