Responsive Web Design Media Queries

CSS Tutorial

CSS-Home CSS-Environment CSS-Basic syntax CSS-Selector CSS-How To Add CSS CSS-Comment CSS-Color CSS-Background CSS-Font CSS-Text CSS-Boarder CSS-Margin CSS-Padding CSS-Height/Width CSS-Link CSS-Table CSS-Visibility CSS-Scrollable CSS-Float/Clear CSS-Line CSS-Align CSS-Dimension CSS-Event CSS-Pusedo class CSS-Position CSS-Transparency CSS-Dropdown CSS-Form CSS-List/Counter CSS-Website layout CSS-Text effect CSS-Image effect CSS-Button effect CSS-page number CSS-Box CSS-@media CSS-Multi device CSS-Multi device 1 CSS-Multi device 2

« Previous Next »

The most important feature of style sheet is how a document is to be presented in diffeent media.

Media query is a w3c recommendation .

Media rule makes you to set different rules for media types.

Media queries also used to check :

View point (Width and Height)

Device (Width and Height)

Orientation mode(Landscape and portable)

resolution

using these media queries techniques you can set a tailored style sheet to all type of devices.

Syntax : Media Queries

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

The corresponding stylesheet or style rules are applied when the media query is true.

Unless you use the not or only operators, the media type is optional.

Responsive Design for Phone and Desktop

We can make a web page with rows and columns, to become responsive and look good on a small screen.

Example :Responsive Design

<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<style>
* {
box-sizing: border-box;
}
.row::after {
content: "";
clear: both;
display: block;
}
[class*="columnumn-"] {
float: left;
padding: 15px; }
html {
font-family: "Lucida Sans", sans-serif;
}
.header {
background-color: #9933cc;
color: #ffffff;
padding: 15px;
}
.menu ul {
list-style-type: none;
margin: 0;
padding: 0;
}
.menu li {
padding: 8px;
margin-bottom: 7px;
background-color: #33b5e5;
color: #ffffff;
box-shadow: 0 1px 3px rgba(0,0,0,0.12), 0 1px 2px rgba(0,0,0,0.24);
}
.menu li:hover {
background-color: #0099cc;
}
.aside {
background-color: #33b5e5;
padding: 15px;
color: #ffffff;
text-align: center;
font-size: 14px;
box-shadow: 0 1px 3px rgba(0,0,0,0.12), 0 1px 2px rgba(0,0,0,0.24);
}
.footer {
background-color: #0099cc;
color: #ffffff;
text-align: center;
font-size: 12px;
padding: 15px;
}
/* For desktop: */
.column-1 {width: 8.33%;}
.column-2 {width: 16.66%;}
.column-3 {width: 25%;}
.column-4 {width: 33.33%;}
.column-5 {width: 41.66%;}
.column-6 {width: 50%;}
.column-7 {width: 58.33%;}
.column-8 {width: 66.66%;}
.column-9 {width: 75%;}
.column-10 {width: 83.33%;}
.column-11 {width: 91.66%;}
.column-12 {width: 100%;}
@media only screen and (max-width: 768px) {
/* For mobile phones: */
[class*="column-"] {
width: 100%;
}
}
</style>
</head>
<body>

<div class="header">
<h1>Chania</h1>
</div>

<div class="row">
<div class="column-3 menu">
<ul>
<li>The Flight</li>
<li>The City</li>
<li>The Island</li>
<li>The Food</li>
</ul>
</div>
<div class="column-6">
<h1>The City</h1>
<p>Chania is the capital of the Chania region on the island of Crete. The city can be divided in two parts, the old town and the modern city.</p>
</div>
<div class="column-3 right">
<div class="aside">
<h2>What?</h2>
<p>Chania is a city on the island of Crete.</p>
<h2>Where?</h2>
<p>Crete is a Greek island in the Mediterranean Sea.</p>
<h2>How?</h2>
<p>You can reach Chania airport from all over Europe.</p>
</div>
</div>
</div>
<div class="footer">
<p>Resize the browser window to see how the content respond to the resizing.</p>
</div>
</body>
</html>

It is better to design your website for mobile before designing for desktop or any other device.

This will make the page display faster on smaller devices.

To apply this concept you must make some changes in you CSS.

The table shown below contain the part which is used to develop responsive website.

Edit the media query of the above Example with this concept.

Desktop View First
/* For mobile phones / .column-1 {width: 8.33%;} .column-2 {width: 16.66%;} .column-3 {width: 25%;} .column-4 {width: 33.33%;} .column-5 {width: 41.66%;} .column-6 {width: 50%;} .column-7 {width: 58.33%;} .column-8 {width: 66.66%;} .column-9 {width: 75%;} .column-10 {width: 83.33%;} .column-11 {width: 91.66%;} .column-12 {width: 100%;} @media only screen and (max-width: 768px) { / For desktop: / [class="column-"] { width: 100%; }
Mobile View First
/* For mobile phones: / [class="column-"] { width: 100%; } @media only screen and (min-width: 768px) { /* For desktop */ .column-1 {width: 8.33%;} .column-2 {width: 16.66%;} .column-3 {width: 25%;} .column-4 {width: 33.33%;} .column-5 {width: 41.66%;} .column-6 {width: 50%;} .column-7 {width: 58.33%;} .column-8 {width: 66.66%;} .column-9 {width: 75%;} .column-10 {width: 83.33%;} .column-11 {width: 91.66%;} .column-12 {width: 100%;} }

So you can update your design with the above format to make your design Mobile First.

Responsive Design for Phone, Tablet and Desktop

We can also create responsive website from many device like phone, tablet and desktop.

Example : Responsive Design

<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<style>
* {
box-sizing: border-box;
font-family: Verdana, Geneva, Tahoma, sans-serif;
}
.row::after {
content: "";
clear: both;
display: block;
}
[class*="column-"] {
float: left;
padding: 15px;
}
html {
font-family: "Lucida Sans", sans-serif;
}
.header {
background-color: red;
color: white;
padding: 15px;
}
.menu ul {
list-style-type: none;
margin: 0;
padding: 0;
}
.menu li {
padding: 8px;
margin-bottom: 7px;
background-color: #33b5e5;
color: #ffffff;
box-shadow: 0 1px 3px rgba(0, 0, 0, 0.12), 0 1px 2px rgba(0, 0, 0, 0.24);
}
.menu li:hover {
background-color: blue;
}
.rightside {
background-color: #33b5e5;
padding: 15px;
color: #ffffff;
text-align: left;
font-size: 14px;
box-shadow: 0 1px 3px rgba(0, 0, 0, 0.12), 0 1px 2px rgba(0, 0, 0, 0.24);
}
.footer {
background-color: green;
color: #ffffff;
text-align: center;
font-size: 12px;
padding: 15px;
}
@media only screen and (min-width: 600px) {
/* For tablets: */
.column-t-1 {width: 8.33%;}
.column-t-2 {width: 16.66%;}
.column-t-3 {width: 25%;}
.column-t-4 {width: 33.33%;}
.column-t-5 {width: 41.66%;}
.column-t-6 {width: 50%;}
.column-t-7 {width: 58.33%;}
.column-t-8 {width: 66.66%;}
.column-t-9 {width: 75%;}
.column-t-10 {width: 83.33%;}
.column-t-11 {width: 91.66%;}
.column-t-12 {width: 100%;}
}
@media only screen and (min-width: 768px) {
/* For desktop: */
.column-1 {
width: 8.33%;
}
.column-2 {
width: 16.66%;
}
.column-3 {
width: 25%;
}
.column-4 {
width: 33.33%;
}
.column-5 {
width: 41.66%;
}
.column-6 {
width: 50%;
background-color: yellow;
}
.column-7 {
width: 58.33%;
}
.column-8 {
width: 66.66%;
}
.column-9 {
width: 75%;
}
.column-10 {
width: 83.33%;
}
.column-11 {
width: 91.66%;
}
.column-12 {
width: 100%;
}
}
@media only screen and (max-width: 600px) {
/* For mobile phone */
[class*="column-"] {
width: 100%;
}
}
</style>
</head>

<body>
<div class="header">
<h1>codealways.com </h1>
</div>
<div class="row">
<div class="column-3 column-t-3 menu">
<ul>
<li>@media</li>
<li>Multidevice</li>
<li>Multidevice 1</li>
<li>Multidevice 2</li>
</ul>
</div>
<div class="column-6 column-t-9">
<h2>CSS - Media Queries</h2>
<p> The most important feature of style sheet is how a document is to be presented in diffeent media.</p>
<p>Media query is a w3c recommendation .</p>
<p>Media rule makes you to set different rules for media types.</p>
<p>Media queries also used to check :</p>
<ui>
<li>View point (Width and Height)</li>
<li>Device (Width and Height)</li>
<li>Orientation mode(Landscape and portable)</li>
<li>resolution</li>
</ui>
<p> Syntax : Media Queries</p>
<p> @media not|only mediatype and (expressions) {</p>
<p>CSS-Code;</p>
<p> }</p>
<img src="image/responisvecolumn.png" style='height: 350px; width: 100%; object-fit: contain'>
</div>
<div class="column-3 right column-t-12">
<div class="rightside">
<h4>What is CSS</h4>
<p>CSS stands for Cascading Style Sheets</p>
<p> CSS is a widely used language on the web.</p>
<p>CSS describes how HTML elements are to be displayed on screen</p>
<p>HTML was created to describe the content of a web page, like:</p>
<p>CSS, is a simple design language intended to simplify the process of making web pages presentable.</p>
<p> CSS handles the look and feel part of a web page.</p>
<p>HTML, CSS and JavaScript are used for web designing. It helps the web designers to apply style on HTML tags.</p>
</div>
</div>
</div>
<div class="footer">
<p>About Contact Feedback</p>
</div>
</body>
</html>

Responsive Design - Other Properties

You can set many Properties with @media.

There are many devices with different heights and widths, so it is hard to define an exact Properties for each device. To keep things simple you could target in groups

Example : @media Group

/*--- Small devices (phones, 600px and less) --- */
@media only screen and (max-width: 600px) {...}
/*--- Small devices (portrait tablets and large phones, 600px and more) --- */
@media only screen and (min-width: 600px) {...}
/*--- Medium devices (landscape tablets, 768px and more) --- */
@media only screen and (min-width: 768px) {...}
/*--- Large devices (laptops/desktops, 992px and more)--- */
@media only screen and (min-width: 992px) {...}
/*--- Extra large devices (large laptops and desktops, 1200px and more)--- */
@media only screen and (min-width: 1200px) {...}

You can also set the change layout of a page depending on the orientation of the browser.

Example : @media Orientation

@media only screen and (orientation: landscape) {...}
@media only screen and (orientation: portrait) {...}

You can also set the font size of a page depending on the screen sizes .

Example : @media Font Size

@media only screen and (min-width: 600px) {
.header {
font-size: 80px;
}
}