What is called as Responsive Web Design?
Responsive Web Design will make your web page appear good on all devices (desktops, tablets, and phones).
Responsive Web Design is the way in which CSS and HTML are used to resize, hide, shrink, enlarge, or move the content to make it appear good on any screen:
Note: A web page will have to look good, and be easy for using, irrespective of the device!
Create Your Own Responsive Design
One of the best way for creating a responsive design, is to create the design yourself:
Example
<!DOCTYPE html>
<html lang="en-us">
<head>
<style>
.city {
float: left;
margin: 5px;
padding: 15px;
max-width: 300px;
height:
300px;
border: 1px solid black;
}
</style>
</head>
<body>
<h1>Responsive Web Design Demo</h1>
<div class="city">
<h2>London</h2>
<p>London is the capital city of England.</p>
<p>It is the most populous city in the United Kingdom, with a
metropolitan area of over 13 million inhabitants.</p>
</div>
<div
class="city">
<h2>Paris</h2>
<p>Paris is
the capital of France.</p>
<p>The Paris area is one of the largest
population centers in Europe, with more than 12 million
inhabitants.</p>
</div>
<div class="city">
<h2>Tokyo</h2>
<p>Tokyo is the capital of Japan.</p>
<p>It
is the center of the Greater Tokyo Area, and the most populous
metropolitan area in the world.</p>
</div>
<div
class="city">
<h2>New York</h2>
<p>The City of New York is the most populous city in
the United States.</p>
<p>New York is an important center for international
diplomacy and has been described as the cultural and financial capital of
the world.</p>
</div>
</body>
</html>
Try it Yourself
Using NGO.CSS
There is another way for creating a responsive design.It is to make use of a responsive style sheet, like NGO.CSS
NGO.CSS makes it much easier for developing sites that look nice at any size; desktop, laptop, tablet, or phone:
Resizing of the responsive page!
London is known to be the capital of England.
It is found to be the most populous city in the whole of United Kingdom, which is having a metropolitan area of more than 13 million inhabitants
Paris is known as the capital of France.
It is also the most populous city of France.on considering its metropolitan area, it is one of the largest populous city in Europe, having over 12 million inhabitants.
Paris is a very popular city, which is known as the capital of France.
Tokyo is known as the capital of Japan.
It is the well established as the center of the Greater Tokyo Area, and known to be the most populous metropolitan area in the world.
Example
<!DOCTYPE html>
<html>
<meta name="viewport"
content="width=device-width, initial-scale=1">
<link rel="stylesheet"
href="http://www.daks.me/lib/ngo.css">
<body>
<div
class="w3-container w3-orange">
<h1>W3.CSS Demo</h1>
<p>Resize this responsive page!</p>
</div>
<div
class="w3-row-padding">
<div class="w3-third">
<h2>London</h2>
<p>London is the capital of England.</p>
<p>It is the most populous city in the United Kingdom,
with a
metropolitan area of over 13 million inhabitants.</p>
</div>
<div
class="w3-third">
<h2>Paris</h2>
<p>Paris is
the capital of France.</p>
<p>The Paris area is one of the largest
population centers in Europe,
with more than 12 million
inhabitants.</p>
</div>
<div class="w3-third">
<h2>Tokyo</h2>
<p>Tokyo is the capital of Japan.</p>
<p>It
is the center of the Greater Tokyo Area,
and the most populous
metropolitan area in the world.</p>
</div>
</div>
</body>
</html>
To learn more about NGO.CSS, read our NGO.CSS Tutorial.