{"id":6504,"date":"2015-05-26T16:35:13","date_gmt":"2015-05-26T23:35:13","guid":{"rendered":"http:\/\/proxystudio.uxpin.com\/?p=6504"},"modified":"2023-08-28T06:33:49","modified_gmt":"2023-08-28T13:33:49","slug":"media-queries-responsive-web-design","status":"publish","type":"post","link":"https:\/\/www.uxpin.com\/studio\/blog\/media-queries-responsive-web-design\/","title":{"rendered":"How to Use Media Queries in Responsive Web Design"},"content":{"rendered":"

\"Device<\/a><\/p>\n

Photo credit: Jeremy Keith<\/a>, Creative Commons <\/a>\u00a0<\/strong><\/p>\n

Responsive web design<\/a> has exploded\u00a0in popularity \u2014 thanks to the need to create sites that work across numerous devices.<\/p>\n

However, responsive design comes with some problems of its own. The issue of slow-to-load sites<\/a> is now well documented. Let’s walk\u00a0through some of the tricks designers are using<\/a> to better load content and images on different devices.<\/p>\n

<\/p>\n

Media Queries to Call Styles<\/h2>\n

One of these tricks is the use of media queries, which work to call styles to the user device based on its dimensions. There has been some debate in the past on whether media queries are the best solution when it comes to mobile-first, and that debate still continues<\/a>. However, the Responsive Issues Community Group (RICG) and W3C have looked at ways to implement element queries, which some believe would be a better solution<\/a>. Why? Because they don\u2019t depend on the viewport, but on the container within it. 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\u2019s height and width.<\/p>\n

Call Using External Stylesheet or in a Stylesheet<\/b><\/strong><\/h2>\n

Like we described in the free e-book\u00a0Mobile UI Patterns<\/a>, media queries first check the media type against the user agent string before going on to check for the physical attributes of the viewport. They are a CSS declaration that can be called using an external stylesheet, or be written directly inside a stylesheet.<\/p>\n

For example, the external call would look like this:<\/p>\n

<link rel=\u201dstylesheet\u201d media=\u201dscreen and (min-width:320px) and (max-width:480px) \u201chref=\u201dcss\/yourstylesheet.css\u201d \/><\/strong><\/p>\n

And the CSS direct call would look like this:<\/p>\n

1 @media screen and (min-width:320px)<\/strong><\/p>\n

2 and (max-width:480px){<\/strong><\/p>\n

3\/*Insert your styles here<\/strong><\/p>\n

4 }<\/strong><\/p>\n

Here we can see that these CSS declarations are called only <\/i>for devices with those height and width properties. Media queries are not modular, so this can make them difficult to work with, as discussed by Ian Storm Taylor. However, others are pushing for the use of elemental queries, as pointed out by Richa Jain in her excellent article “Beyond Media Queries \u2014 It’s Time to Get Elemental.”<\/a> But it\u2019ll be some time before we see them implemented, if indeed they are at all, so for the moment we\u2019re stuck with media queries and the issues that surround their use.<\/p>\n

Element Queries Not Yet Supported<\/b><\/h2>\n

There have been some innovative developers out there who have come up with workarounds, such as Tyson Matanich, who has come up with \u00a0an element query \u2018polyfill\u2019<\/a>.<\/p>\n

Other workarounds include (found thanks to Richa Jain<\/a>):<\/p>\n