Rules based on screen resolution

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

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>
UK Electronic Designer
USEFUL?
We benefit hugely from resources on the web so we decided we should try and give back some of our knowledge and resources to the community by opening up many of our company’s internal notes and libraries through mini sites like this. We hope you find the site helpful.
Please feel free to comment if you can add help to this page or point out issues and solutions you have found, but please note that we do not provide support on this site. If you need help with a problem please use one of the many online forums.

Comments

Your email address will not be published.