Use of media query for making a website mobile responsive

Today, Responsive web design has exploded in popularity. To create sites that work across numerous devices is on demand. But, the responsive design comes with some problems of its own and one of them is slow-to-load sites. So, the designers are using some of the tricks to better load content and images on different devices, and one of these tricks is the use of media queries. So, what are media queries and how to use them? Let's find out all these questions answer in this article -

What is the media query?

A media query is a CSS technique introduced in CSS3. It uses the @media rule to include a block of CSS properties only if a certain condition is true. Media queries work to call styles to the user device based on its dimensions. Media queries are a simple and effective way to serve different content to a range of devices and the most commonly used queries are those that deal with the viewport height and width.

Here are some media queries uses -

1. Add breakpoint

Media queries can help with breakpoints. If you can add a breakpoint where certain parts of the design will behave differently on each side of the breakpoint then it will more effective. Use a media query to add a breakpoint at 768px. You can also add as many breakpoints as you like. You will insert a breakpoint between tablets and mobile phones. You do this by adding one more media query (at 600px), and a set of new classes for devices larger than 600px (but smaller than 768px). It might seem odd that you have two sets of identical classes, but it gives us the opportunity in HTML, to decide what will happen with the columns at each breakpoint.

2. Design for mobile first

Designing for mobile before designing for desktop or any other device is quite helpful than others. This will make the page display faster on smaller devices. This means that we must make some changes to our CSS. Instead of changing styles when the width gets smaller than 768px, we should change the design when the width gets larger than 768px. This will make our design Mobile First.

3. Orientation

Media queries can also be used to change the layout of a page depending on the orientation of the browser. You can have a set of CSS properties that will only apply when the browser window is wider than its height, a so-called "Landscape" orientation.

4. Use width property

If the width property is set to 100%, the image will be responsive and scale up and down. So, the image can be scaled up to be larger than its original size. A better solution, in many cases, will be to use the max-width property instead. The video player will also be responsive and scale up and down. The video player can be scaled up to be larger than its original.

5. Hide elements

Another common use of media queries is to hide elements on different screen sizes.

6. Change font size

You can also use media queries to change the font size of an element on different screen sizes.

7. Using The max-width Property

If the max-width property is set to 100%, the image will scale down if it has to, but never scale up to be larger than its original size.

8. Background Images set up

A large image can be perfect on a big computer screen, but useless on a small device. Why load a large image when you have to scale it down anyway? To reduce the load, or for any other reasons, you can use media queries to display different images on different devices. Background images can also respond to resizing and scaling. There are three different methods -

• If the background-size property is set to "contain", the background image will scale, and try to fit the content area. However, the image will keep its aspect ratio. The proportional relationship between the image's width and height.
• If the background-size property is set to "100% - 100%", the background image will stretch to cover the entire content area.
• If the background-size property is set to "cover", the background image will scale to cover the entire content area. The "cover" value keeps the aspect ratio, and some part of the background image may be clipped.

9. grid

the grid is used for checking if a device is a terminal-like device. This also includes older phones (that is, non-smartphones), accessible phones (for those with poor vision), and braille devices. It returns a boolean value if true.

10. scan

The scan CSS media feature can be used to test the scanning process (if any) utilized by the output device. The word scanning used in this context does not refer to an image scanner, such as the one used to digitize a photograph. Rather, it means the process by which an image is painted onto a television screen (or other devices).

11. Use link

You can also put your media queries in the <link> element itself so that an entire stylesheet is only applied when that particular set of conditions is met. This allows you to cleanly separate your code for different screen resolutions into different files.

12. Use min-device-width

You can use the media query min-device-width, instead of min-width, which checks the device width, instead of the browser width. Then the image will not change when you resize the browser window.

13. Share button setup

Social media sharing buttons slow sites down too, especially on mobile. Just three social buttons for Facebook, Twitter and G+ make up a total of 19 requests and take 246.7k in bandwidth. With this in mind, consider using web fonts on your front page for your social media URLs rather than images and limit the number of sharing buttons on your blog posts.

14. HTML5 <picture> Element

HTML5 introduced the <picture> element, which lets you define more than one image. It supports almost every browser such as Chrome, Mozilla Firefox, Microsoft Edge, Opera mini, etc.
 

It’s important when working with media queries to ensure that you understand performance and its impact on UX and conversions. A slow loading site will frustrate users and have them abandon their purchases. And that will end up costing the owner a lot of cash in lost revenue. When designing a responsive site, you should consider using conditional loading to reduce the amount of content that’s sent to a  target device. There are tons of online tutorials to help you with responsive web design and media queries. We hope we’ve given you a great starting point so you can get going with media queries. Thank you!