O'Reilly logo

Mobile Web Performance Optimization by S. Niranga

Stay ahead with the world's most comprehensive technology and business learning platform.

With Safari, you learn the way you learn best. Get unlimited access to videos, live online training, learning paths, books, tutorials, and more.

Start Free Trial

No credit card required

How to use media queries

CSS media queries are an excellent way to deliver different content to different devices and screen sizes, giving the best user experience for each type of user. Media queries use media attributes to apply a CSS style to your website based on a device's properties, such as screen width, orientation, resolution, and more. So, when it comes to performance optimization, using media queries properly is essential.

A simple media query will look like the following:

<link href="css/mobile.css" rel="stylesheet" type="text/css" media="only screen and (max-width: 768px)" >

<link href="css/tab.css" rel="stylesheet" type="text/css" media="only screen and (min-width: 769px) and (max-width: 1024px) " >

As mentioned in the example, we are ...

With Safari, you learn the way you learn best. Get unlimited access to videos, live online training, learning paths, books, interactive tutorials, and more.

Start Free Trial

No credit card required