fbpx

Media Query and Responsive Web Design6 min read

[lmt-post-modified-info]
Media query and responsive web design
Share on facebook
Share on twitter
Share on linkedin
Share on pinterest
Share on whatsapp
Share on email

Table of Contents

GUIDE TO MEDIA QUERIES

When it comes to Responsive web design, Media Query is very important in Web Development.

It is what instructs the browser on “When”, “What” and “How”. Developers have always created a website using the foundational blocks: HTML and CSS even before the advent of frameworks like Bootstrap.

And when they do this, they are often focused on designing on a desktop view and not creating a responsive web design.

So while developing their webpages, they test them simultaneously on the desktop computer. The problem after job completion however, then becomes how exactly the web pages are rendered on a mobile device.

Imagine how a grid system of contents that covers almost the whole screen of your laptop computer is to appear on your mobile phone that is only about one-third of our laptop screen size. It is going to be awkward and unorganized.

Then, the Media Query came as a very efficient tool to enable developers to instruct the computer to render web pages in a particular way when it is opened on a particular screen or in a particular form. So in short, you can name Media Query a Responsiveness tool for responsive web design.

Funny enough, even with the present use of CSS frameworks like Bootstrap and Materialized primarily responsive CSS, Media Queries are still very important to set your specific preference of how exactly your contents should be displayed.

Telling the device and browser:

“When” – for example, when the screen size is less than 500pixels.

“What” – to select the News section (class) of the blog.

“How” – and then style it to appear on one single flex column rather than on a row flex.

This is a typical example of how to apply the Media Query. For this example, the syntax would look like this:

@media screen and (max-width: 500px) {
	.news{
		flex: column;
}
}

Thus, the general syntax for applying Media Queries is as follows:

@media media-type and (media-rule) {
  /* CSS rules */
}
  • The media-type section tells the browser the type of media the instructions is for. Media could either be:
  • Screen – How the web page appears on different screens.
  • Print – How the web page appears when printed.
  • Speech – How the web page responds when delivered through speech, or
  • All – Applies to all media (When the media section is left out in your media query syntax, it automatically applies the “all” type to it )
  • The media-rule refers to the feature that the browser should consider and confirm to be true before executing the codes within the media query. It could be:
  • Width of the device that the browser is opened on or its height:

We can apply CSS if the viewport is above or below a certain width or at an exact width using the min-width, max-width, and width CSS elements.

They are used to create various rendering styles and layout that respond well to different screen sizes and re-organize themselves well with their contents. The width (and height) media features can be used as ranges, and therefore be prefixed with min- or max- to indicate that the given value is a minimum or a maximum.

In practice, using minimum or maximum values is much more useful for responsive web design so you will rarely see width or height used alone. It allows for features to fit in properly within a range of values since you cannot always accurately predict the size of different device screens that will use the web page.

The syntax to apply this will be just like in the first example e.g

@media screen and (max-width: 700px) {
	body{
		background-color: red;
}
}

This will change the background colour of the body to red if the screen size is lower than 700 pixels.

Orientation:

This media-rule allows for the browser to test if the device on which the page is (will be) rendered on is in portrait or landscape mode. Any of these two layouts can be selected as the rule then several query codes can be written to fit right to it.

An example to test this will be like:

@media print and (orientation: landscape) {
	body {
		font-family: monospace;
}
}

This will change the font of the content of the web page to font type Monospace if the page is printed in landscape.

COMBINATION, SELECTION AND EXCEPTION

Just like in any program, you cannot be always too sure which among the criteria that you set will ultimately be met by the user and his/her device. So it is always very crucial to set a plethora of options, a specific condition and then, what exactly to do.

Media Query allows you to select conditions to implement, combine conditions to implement or exempt some conditions from implementing a whole bunch of codes.

The “and” selector: This allows you to select a couple of media-rules and add the series of codes under it to the browser or device once the prerequisites are met. The feature to note here, however, is that both or all of the conditions must be met to execute the set of instructions that follows.

For example, if you want the size of the font in the class “myArticle” to increase from 12pt to 14pt if the display is in landscape mode and at the same time on a screen that has a size not more than 500px, we write it this way:

@media screen and (max-width: 500px) and (orientation: landscape) {
	.myArticle {
		font-size: 14pt;
}
}

This means that for the font to increase to 14pt, the screen has to be lesser than 500px and must also be in landscape mode.

The “or” selector: This allows you to write a plethora of conditions from which the browser chooses from and run the instructions. For example, you may not know if the user uses an iPad or an Android device and both have different sizes. So you separate the rules with a comma.

@media screen and (max-width: 500px), screen and (max-width: 1000px) {
	body {
	background-color: cyan;
}
}

Here, if the screen is less than 500px or less than 1000px, the background colour changes to Cyan.

The “not” selector: This allows for an exemption. If you want a group of instructions to apply to every screen size except for a particular one, you apply the “not” selector. This reverses the original ruleset.

For example,

@media not screen and (max-width: 500px) {
	body {
	color: red;
}
}

In this example, the colour of the font will only be colour red if the max-width of the screen is not lower than 500pixels.

Media Query is a great tool for Web Development. Even with primarily responsive frameworks; you still media queries to configure the way your web pages render on different devices specifically the way you want them to.

We do hope that this piece has helped a whole lot!

Farhan Sodiq

Farhan Sodiq

Sodiq Farhan is presently a computer engineering student of the University of Ilorin and a frontend web developer. As a content developer for a couple of organizations also, Farhan enjoys writing and developing contents that aims at educating individuals about the world of technology and beyond

Leave a Comment

This site uses Akismet to reduce spam. Learn how your comment data is processed.

Business Empowerment Program

Join Our Business Empowerment Program

Get a website and more from #10,000 only.
Get started now!

Don’t forget to share on Social Media!

Share on facebook
Share on twitter
Share on linkedin
Share on pinterest
Share on whatsapp
Share on email
Grow your skills

Hey dear, just Before You Leave!

Get Updates To Help You Grow.

We offer more than just services but teach people what we know to help them grow FOR FREE.

We promise not to spam!

Don’t Forget to check our blog/resources hub.