Techie Weblog

Web Hosting & Network Security Guide

HostGator Web Hosting

How to Write Media Query

If you like the post, Please Share


How to Write Media Query

How to Write Media Query

What is Media Query.

How to Write Media Query

How to Write Media Query

Wikipedia says “Media Queries is a CSS3 module allowing content rendering to adapt to conditions such as screen resolution (e.g. smartphone screen vs. computer screen). It became a W3C recommended standard in June 2012, and is a cornerstone technology of Responsive web design.” So, media query consists of a media type and an expression to check for certain conditions of a particular media feature. The most commonly used media feature is width. By restricting CSS rules to a certain width of the device displaying a web page, one can tailor the page’s representation to devices (i.e. smartphones, tablets, netbooks, and desktops) with varying screen resolution. Media queries are supported in Internet Explorer (IE) 9+, Firefox 3.5+, Safari 3+, Opera 7+, as well as on most modern smartphones and other screen-based devices. Media queries allow you to style elements for specific devices (smartphones, tablets, desktop computers) by using attributes like width, height, resolution, aspect ratio, orientation or color. By using media queries, presentations can be tailored to a specific range of output devices without changing the content itself.

How to write media query

To add a media query to the media attribute, you set one or more conditions using the media features. You specify the value for a media feature after a colon in the same way as for a CSS property. Each condition is wrapped in parentheses and added to the media declaration using the keyword and . For example:


<link rel="stylesheet" media="screen and (min-width: 480px) and (max-width: 960px)" href="480-960.css" />
<!-- OR -->
@media screen and (min-width: 480px) and (max-width: 960px) {
    #header {
        display: none;

An @media rule specifies the target media types of a set of statements. In the example above, we are specifying the media type screen. The max-width and min-width features are telling the browser that at any screen size larger than 480px, but smaller than 960px, hide any elements with id=”header”.


***How to Write Media Query***

Updated: January 6, 2016 — 4:48 pm

The Author

Sukanta Dutta

The author is writing technical blog for last few years. He shares his knowledge on Computer Networks, Database Technologies, Security Aspects of Network and Database etc. He also likes to hear from the reader of this blog to learn more, so he welcomes guest writing for this blog.

Leave a Reply

Your email address will not be published. Required fields are marked *

Techie Weblog © 2015-2018