OVERIVEW OF MEDIA QUERIES

Overivew of Media Queries

Media Queries are web modern way method lets say logical expression in css by which responsive page which can be work on any device can be created. We can set different target points/ media expressions for document. When user changes the resolution or user opens up same page in different devices if it is satifying the expression defined or lets say if its matching the breakpoint defined in media queris. Web page will automaticaly excute and apply all css defined in that media queries.

There are different ways of doing it

//External: <link rel="stylesheet" type="text/css" href="style.css" media="only screen and (max-width: 340px)" /> //While Importing: @import "style.css" only screen and (max-width: 340px); //Within CSS: <style type="text/css"> @media only screen and (max-width: 340px){ } </style>
Here's a simple example of the media query for standard devices. How min and max width and other queries work
//max-width: If device width is less than or equal to 600px, then will execute @media only screen and (max-width: 600px) {...} //min-width: If device width is greater than or equal to 600px, then do execute @media only screen and (min-width: 600px) {...} // Combining: Executes for screens that are 600-400px wide @media only screen and (max-width: 600px) and (min-width: 400px) {...} // Orientation: This will target device lanscape orientation @media screen and (orientation: landscape) { ... } // Pixel-density: This will work in certain given pixel density. @media screen and (-webkit-min-device-pixel-ratio: 2) { ... } // Print: This will execute for print purpose @media print { ... }