Eduonline 24
Published in

Eduonline 24

Responsive Web Design Using CSS3 Media Queries

There are various ways for making a web page responsive, using a framework like bootstrap or materialize.css or with pure CSS. In this article, let’s see how we can use CSS3 to make responsive templates.

Media queries can be used to check many things, such as:
• width and height of the viewport
• width and height of the device
• orientation (is the tablet/phone in landscape or portrait mode?)
• resolution

Using media queries are a popular technique for delivering a tailored style sheet to desktops, laptops, tablets, and mobile phones (such as iPhone and Android phones).

Note: Before using media queries, don’t forget to add the following tag inside the head section:

<meta name="viewport" content="width=device-width, initial-scale=1.0" />

A meta viewport element gives the browser instructions on how to control the page’s dimensions and scaling.

The width=device-width part sets the width of the page to follow the screen-width of the device

The initial-scale=1.0 part sets the initial zoom level when the page is first loaded by the browser.

Syntax

@media not|only mediatype and (expressions) {
CSS-Code;
}

Examples:

For extra small devices (smaller phones, 600px and smaller)

@media only screen and (max-width: 600px) {
body {
background-color: red;
font-size: 1em;
}
}

For small devices (portrait tablets and large phones, 600px and up)

@media only screen and (min-width: 600px) {
body {
background-color: yellow;
font-size: 1.1em;
}
}

For medium devices (landscape tablets, 768px and up)

@media only screen and (min-width: 768px) {	
body {
background-color: blue;
font-size: 1.2em;
}
}

For large devices (laptops/desktops, 992px and up)

@media only screen and (min-width: 992px) {
body {
background-color: green;
font-size: 1.3em;
}
}

For extra large devices (large laptops and desktops, 1200px and up) */

@media only screen and (min-width: 1200px) {
body {
background-color: violet;
font-size: 1.4em;
}
}

Media queries depending on the orientation of the browser.

@media only screen and (orientation: landscape) {
body {
background-color: yellow;
font-size: 1.2em;
}
}
@media only screen and (orientation: portrait) {
body {
background-color: green;
font-size: 1em;
}
}

Read More at MDN

--

--

--

Articles Related to Web Development, Data Science, Programming, Coding, New Technologies, etc.

Recommended from Medium

Anatomy of a Voice API

Variables and writing pseudocode

3 things every developer should know how to do in Postman

Enabling HTTPS on Janus using Nginx on AWS

Consulting Chronicles: Can Do vs Should Do

Business Will Never Satisfy You

SCD Using DBT and Snowflake

“Git what?” Extolling GitHub’s virtues to non-coders

Get the Medium app

A button that says 'Download on the App Store', and if clicked it will lead you to the iOS App store
A button that says 'Get it on, Google Play', and if clicked it will lead you to the Google Play store
Pradeep Singh

Pradeep Singh

Web Dev @ psrajput.com | Writer @ eduonline24.in | Analyst @ Genpact

More from Medium

Piano chord visualization application — a vanilla JS beginner-friendly tutorial. Part I

Empty page to a E-commerce

Top CSS Code vs Real Pic Challenge

Working with Material UI