CSS for different screen resolutions? - html

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.

Answer 2

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.
.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:
.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.)
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.

Answer 3

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:
#media all and (max-width: 500px) and (min-height: 400px) {
body {
background: #ccc;
}
.someclass {
padding: 10px;
}
}

Answer 4

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.
I suggest you to follow a tutorial to start using media queries.