CSS不同的屏幕分辨率？ [英] css for different screen resolutions?

问题描述

如果我在不同分辨率的系统上检查 html ，那么视图会失真。

有没有任何计算屏幕的方法宽度和高度在运行时间？

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

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

但他们提示不同的类别（如果我没有错的话）

我的问题是可以在运行时获取高度和宽度，并只使用一个css？

类似于：

  .view {
 min-width：一些如何得到计算：我们正在使用哪个设备？ 
 min-height：一些如何计算：我们正在使用哪种设备？ 
 
  

解决方案

媒体查询是一个不错的选择为你的问题。

您不必为这些类使用不同的类，只需根据分辨率定义不同的行为即可。

你可以通过Javascript知道屏幕高度和宽度，但用CSS，我不认为这是可能的。使用css可以做的最好的事情就是定义移动设备，平板电脑，笔记本电脑，真正大屏幕设备中的设备范围，并基于媒体查询，您可以定义某个类在特定类型的设备上所做的工作。

看看下面的例子：

  / *对于手机* / 
 @媒体屏幕和（最大宽度：540px）{
 .view {
 width：400px; 
 
 
 $ b $ *对于平板电脑* / 
 @media屏幕和（最小宽度：540px）和（最大宽度：780px）{
 .view {
 width：600px; 
 
 
  

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

这是许多框架用于实现响应的相同方法。

If i check html on 2 different Systems with different resolutions then the view is distorted.

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 :

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 ?

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

解决方案

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.

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.

这篇关于CSS不同的屏幕分辨率？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！