The following line of code is an HTML link element that contains a media query:
<link href=”stylesheet.css” rel=”stylesheet” media=”screen and (min-width:320px)”>
The part that says media=…. is the media query used in this link element. It’s used to define under which circumstances or conditions the browser should use this style sheet.
This media query tells the browser to use the style sheet when the media type is screen, i.e., the HTML code is being rendered on a screen like an LCD display and also if the “viewport” width is greater than or equal to 320px.
Media queries are very often used in responsive web design theses days. Responsive web design is another name for the sum of all the activities and technologies that web designers do or use so that their websites are displayed the way they wanted them to be displayed on all or most screen sizes or screen types, media queries being one of them. Devices range from smart phones like iPhone, Android, etc. going all the way to huge Internet-enabled TVs. So it’s pretty complicated.
Media queries work in all the modern browsers and in IE9+. IE8 doesn’t understand them and simply ignores them. So if you’re designing for IE8 as well, you need to have some strategy so that your content is accessible there too.
To know more about media queries, you can read Media Queries – W3C Recommendation.