How to create Responsive Website with Media Query?

Blog No Comments

The screen resolutions of the web users vary from a range of 320px to 2560px (even more). These are not the times when a user only browses from the desktop. Multiple devices are in trend (obviously). Smartphones, IPads, iPhones have a deep penetration of the user base. This increases the demand for responsive web design and in order to make the website device friendly, Media Query Codes are crucial.

In this article, I will be telling you all about media queries (Limited to its usage for responsive web design). Let’s get started,

 

What are Media Queries?

Media Queries were first introduced in the CSS3 specification. Media Queries basically allow a web designer to create stylesheets based on browser’s dimensions (aka height and length). In the starting, it can only create stylesheets on these specifications, but now it has moved a step ahead to modify orientation and color as well.

Allow me to show you a utility list of the media queries used commonly nowadays,

Media QueryUse
min-width: … pxUsed when the viewport’s width is bigger or equal to width
max-width: … pxUsed when the viewport’s width is smaller or equal to width
min-device-width: … pxUsed when the device’s width is bigger or equal to width
max-device-width: … pxUsed when the device’s width is smaller or equal to width
orientation: portrait // orientation: landscapeTarget orientation
-Webkit-min-device-pixel-ratio: 1.5Used to target high-density device on android and ios

 

As in for print style sheets, media queries are being used as internal and external style sheets. It is a common belief that an external style sheet is easier to maintain and organize. It is also not downloaded by the browsers which do not support them. However, there is a con associated with the external style sheet i.e., it requires an extra HTTP request.

On the other hand, the internal sheet doesn’t require an extra HTTP request. But there are other problems associated with it like the browser requires to download the entire stylesheet which is very hard to organize and manage.

Both style sheets have their own cause to be good or bad for you. So, it is up to you how you select any.

Let me give you two simple syntax for both internal and external style sheet.

 

Internal Syntax

body {

background: gray;

}

 

@media all and (max-width:500px) {

body {

background: blue;

}

}

 

External Syntax

<link rel=”stylesheet” type=”text/CSS” media=”screen and (max-device-width: 480px) ” href=”mobile.CSS” />

Before jumping into “TRICKS” about Media Queries, let’s see what is the role of Media Query in creating a responsive web design.

 

How to use media queries to call styles?

As mentioned above, the first basic trick for media queries is used to call styles to the user’s device based on its dimensions. However, there is an ongoing debate which is considered to be best for mobile devices, which still continues as there is no plausible points for either set of arguments. But, discussions and conflicts are part of development.

So, with considering these factors deeply (Obviously avoiding any complication!) my observation is that mobile experiences are enhanced due to the usage of media query code. Why? Because first, it does not require a dependency on the viewport, and second, they are simple and very effective in delivering the content which is compatible with every device. In addition to this, the most common queries that are used in practice today are those which are used for the viewport’s width and height.

 

Call in a style sheet or using an External style sheet.

The media queries first check the type of the media type in exchange for the user agent string before checking for the physical attributes (aka width and height) of the viewport. These are known as the CSS declarations that can be called by using an internal or external stylesheet.

For example, you can refer to the Internal syntax and External Syntax (Subheadings under the heading “What are Media Queries?”).

In the above-given examples, the CSS declarations are only for those devices which fall under the gamut of the mentioned dimensions (In this case, 500px for internal and 480px for external). Let’s move on to the next section which will cover Element queries which are not yet supported.

 

Element Queries still not supported

What the heck is an ‘Element Query’? Well, it is same as the media query because it utilizes CSS when some of the “Certain” conditions are met. However, the main point to notice is, ‘Element Queries’ are based on elements, not on the browsers, and which is why they are unsupported in CSS3. However, ‘Element Queries’ are gaining popularity as they compliment media queries. This shows that they can work together to create more transposable and malleable designs.

 

Let’s get started with Media Queries for Responsive Layouts

Before going any further, I would like to clarify the core difference between media queries based on ‘width’ and ‘device-width’. First, the width defines the width of a mobile device’s version (rendering) surface. Second, the ‘device-width’ defines the actual screen width of the device.

In simple words, you’ll be applying the rule on the width of the document using ‘width’ media query. The ‘device-width’ is the screen size, which is the entire screen of your device. This elementary difference can cause you enough pain. So, be careful in this small rudimentary difference.

However, I reckon to use media queries for different screen resolution which has no relation with the device’s ‘device-width’. This will help you to create a separate layout for all kind of screens.

 

Illustrations for different screen resolutions

Follow these codes in order to add media queries for different viewports. These are generally known as three core breakpoints i.e., small, medium and large. Generally, small covers all the screens, medium tends to cover screens of 640px and up to 1024px; and Large covers all screens above 1024px.

Let’s add media queries for a responsive layout.

 

Responsive Layout

First, before going on codes, responsive layout uses both break points and the relative units.

Here is the “normal” version of the stylesheet:

#page{

max-width:1280px;

}

#header {

width: 100%;

margin: 0;

padding: 0;

}

#content {

float: left;

width: 60%;

margin: 0 0 20px 0;

padding: 0;

}

#content .bloc {

margin-right: 2%;

}

.sidebar{

float: left;

margin: 0 0 20px 1%;

padding: 0;

}

#bar1{

width:20%;

}

#bar2{

width:18%;

}

#footer {

clear: both;

width: 100%;

margin: 0;

padding: 0;

}

 

You must have noticed that I used max-width. Using this, we do not need to use any other breakpoints that make it easy. Now, the CSS media queries will be:

 

/* The media queries*/

@media screen and (max-width: 1000px) {

#bar1,

#bar2{

width:39%;

}

.sidebar{

float: left;

margin: 0 0 20px 1%;

padding: 0;

}

}

@media screen and (max-width: 540px) {

#bar1,

#bar2{

clear:both;

width:100%;

}

.sidebar{

float: left;

margin: 0 0 20px 1%;

padding: 0;

}

#content {

clear:both;

width:100%;

}

#content .bloc {

margin:0;

}

}

So, this leads us to the major asset of the responsive layout. Majorly, you don’t need these many break points and as the sizes are in percentage, they tend to adapt automatically.

 

Working with Images

There are issues which are intangible such as loss of details, squeezed down images. Yet it is simple to adapt. In order to create scalable images, simply add these code to your stylesheet.

 

img {

max-width: 100%;

}

This code will enable the image to scale accordingly if the container is smaller than the image.

 

Some Media Queries “Tricks” worth trying

 

Cascade matters

Cascade matters for every piece of Cascading Stylesheet (CSS) code.

You can consider the given illustration,

 

#container{

background:rgba(111, 78, 152, 0.9); /*violet */

color:rgb(1, 1, 1);

 

@media all and (min-width:480px) {

#container{

background: rgba(255, 0, 0, 0.9); /* red */

color: white;

}

}

@media all and (min-width:900px) {

#container{

background: rgba(0, 0, 255,0.9); /*blue */

font-family: serif;

}

}

Now, if the span of your browser is larger than 480px, the text color will change to white and that of background will change to red. Similarly, if you expand the screen more than 900px, the text color remains white and the background changes to blue.

 

Vague Media Queries

Observe the given illustration,

#container{

background:rgba(111, 78, 152, 0.9); /*violet */

padding:10px 5px;

color:rgb(1, 1, 1);

}

 

@media all and (min-width:480px) and (max-width:899px) {

#container{

background: rgba(255, 0, 0, 0.9); /* rouge */

font-family: serif;

}

}

@media all and (min-width:900px) {

#container{

background: rgba(0, 0, 255,0.9); /*bleu */

color: white;

font-family: serif;

}

}

 

Now, the topmost media query will apply only for those screens which are between 480 px and 899 px. The second one is for screens bigger than 900 px. In the vague media queries, the properties are filtered for a specific width, they will not be inherited. For instance, in this example code, if you want to apply for serif font on the layout larger than the 900 px, then you have to mention it again on the media query.

In Addition to that, you’ll require a meta tag for the viewport in order to make it (Media Query) work. The viewport meta tag empowers you to control the device of the viewport. In cases, where there is no viewport meta tag, the device tries to adjust the whole web page to fit on the display, which is very awkward.

The meta tag for viewport looks like this;

<meta name=”viewport” content=”initial-scale=1, width=device-width”>

 

Wrapping Up

In conclusion, responsive website with media queries are not that difficult to build. And to be frank, it is today’s demand to have a responsive website. The queries I ncluded are pretty basic ones, yet it is a good start for those who still hadn’t get their hands dirty with media queries.

Let me know through the comments if you guys have worked with the responsive design and used media queries. If you are stuck somewhere, just drop a comment and I will reach out to you.

 

Author Bio:

Alana Berge is Web Designer by profession and writer by hobby. She works for Awebstar- Responsive Web Design Company Singapore. She is an expert in designing custom web designs depending upon client’s requirements. She always lookout for learning something new. Get in touch with her if you are about to hire an experienced web designer for your Custom Website projects.

We really appreciate you for visiting PremiumCoding and reading this article! Now you might also want to check out our Themes here.
PremiumCoding
Written by PremiumCoding
We develop beautiful Wordpress themes with minimal and clean design.