Rules based on screen resolution

2 possibilities:

@media only screen and (min-width: 801px) {
  /* When width is greater than or equal to 801px */
	.my_class {
		height: 360px;
	}
}

@media only screen and (max-width: 800px) {
  /* When width is less than or equal to 800px */
	.my_class {
		height: 240px;
	}
}

3 or more possibilities:

@media only screen and (min-width: 1101px) {
	.my_class {
		column-count: 3;
	}
}

@media only screen and (min-width: 801px) and (max-width: 1100px) {
	.my_class {
		column-count: 2;
	}
}

@media only screen and (max-width: 800px) {
	.my_class {
		column-count: 1;
	}
}

Max-Width vs Max-Device-Width

max-width

The width of the target display area, e.g. the browser.

When you change the size of the browser on your desktop, the CSS will change,

max-device-width

The width of the device’s entire rendering area, i.e. the actual device screen.

when you change the size of the browser window on your desktop, the CSS won’t change.

Which one to use

Using max-device-width rather than max-width is useful when you need to keep something consistent even when browser window has been re-sized. For example, UI controls that you don’t want to switch to different sized images when re-sizing the screen

Detecting different screen types

<style type="text/css">
    /* default styles here for older browsers. 
       You can go for a 600px - 960px width max but using percentages
    */
    @media only screen and (min-width:960px){
        /*Styles for browsers larger than 960px;*/
    }
    @media only screen and (min-width:1440px){
        /*Styles for browsers larger than 1440px;*/
    }
    @media only screen and (min-width:2000px){
        /*For sumo sized screens*/
    }
    @media only screen and (max-device-width:480px){
       /*Styles for mobile browsers smaller than 480px; (iPhone)*/
    }
    @media only screen and (device-width:768px){
       /*Default iPad screens*/
    }
    /* different techniques for iPad screening */
    @media only screen and (min-device-width: 481px) and (max-device-width: 1024px) and (orientation:portrait) {
      /*For portrait layouts only*/
    }

    @media only screen and (min-device-width: 481px) and (max-device-width: 1024px) and (orientation:landscape) {
      /*For landscape layouts only*/
    }
</style>