CSS for different screen resolutions?

Question

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

Answer 1

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.