Usage of media queries

@media all and (min-width:840px)//  screen application Rule @media (min-width:800px)//shorthand for all minimum horizontal screen widths of 800 pixels              , ibid. @media ( min-width:800px) and (max-width:1200px)    //all screens between 800px and 1200px apply Rule @media (min-width:800px) or (orentation: Portrait)         //width is at least 800px or the direction is longitudinal, the rule will be applied @media (not min-width:800px)        ///When the minimum width is not 800px, this rule @media (width : 800px) and (height:400px)         //When the screen is exactly 800px wide, 400px High applies rule @media (min-width:700px), handheld and (orentation: Landscape)    //minimum width of 700px or horizontal screen handheld device, while applying the style

There are two ways to apply media queries:

1. CSS Media query in LINK element

<rel= "stylesheet"  media= "(max-width:800px)"  href = "Eg.css" />

2. CSS media query in style sheet

@media (max-width:600px) {  . div1{         display:none;    }   }

Best Practices for media queries:

Small screen (flat, greater than or equal to 768px)

@media (min-width:768px) {......}

Medium screen (desktop monitor, greater than or equal to 992px)

@media (min-width:992px) {......}

Large screen (large desktop display, greater than or equal to 1200px)

@media (min-width:1200px) {......}

Usage of media queries