What is a Media Query?

When developing a web page in HTML language, you’ll eventually run into the issue of responsive design. Responsive design refers to a website’s ability to adapt to multiple devices. It allows your site to respond to environmental changes beyond the device’s operating system or browser, but also the dimensions of the device or screen. For example, with a responsive design, your web page will appear differently on smartphones than it would on a desktop. We achieve this by adding media queries. A media query is a CSS3 style rule used to customize your site’s appearance for multiple devices.

Why is Media Query Important?

By customizing your website’s design for different viewports (mobile, tablet, and desktop, etc.), you increase your site’s visual appeal and make your site easier to use. While a website developed for a single viewport can still be accessed on other devices, a web page meant for desktops may not translate well on a tablet. If you ever had to increase the size of a web page on a smartphone because it was made for desktops, you know how inconvenient it can be. Alternatively, a site meant for tablets and smartphones may appear jarring when viewed on a desktop; perhaps even wasting space. This makes responsive design via media queries crucial to modern web development.

Media query for Web page responsiveness

How Does It Work?

Media queries can be added to an HTML document through any CSS3 stylesheet. To begin, create the query by using the following code: @media only screen () {.

When you add a media query to your stylesheet, it will only be activated based on the criteria you set for it based on the dimensions of the browser screen, device screen, or device orientation. You’ll add this criterion between the parenthesis of the query statement. You can use the below attributes to define your query:
For browser size: “width”, “height”
For screen size: “device-width”, “device-height”
For screen orientation: “orientation” (followed by “landscape” or “portrait”)

Use the min and max attributes to define the point where the query begins, where it ends or both. The below example defines the query to begin only if the browser screen is 500px wide (about tablet length): @media only screen (min-width: 500px) {.

You may also want to specify a certain range at which the query is activated by adding “and” and setting a second specification like this: @media only screen (min-width: 500px) and (max-width: 600px) {.

At this point, you can begin adding attributes to the media query or class. Adding attributes to this new class is very similar to developing for a single viewport. If necessary, copy and paste the attributes of your previous class under your query statement to maintain your site’s basic framework. From there, just redefine your measurements to fit within the dimensions of your new viewport.

Make sure to test your media query by either running your site through a browser emulator (TestiPhone.com, Android Emulator, etc.) or inspecting your page (Ctrl+Shift+I). Your media query is now complete, and you’ve just given your site a new, responsive look!

Categories: