css for different screen resolutions?

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;
  }
}

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.

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.

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.