Responsive

Download Report

Transcript Responsive 

Responsive
[email protected]
What is Responsive Web Design?
Responsive Web Design makes your web page look good on all devices
(desktops, tablets, and phones).
Responsive Web Design is about using CSS and HTML to resize, hide,
shrink, enlarge, or move the content to make it look good on any screen:
Create a Responsive Website Using HTML5 and CSS3
https://www.youtube.com/watch?v=eOG90Q8EfRo
<!DOCTYPE html>
<html lang="en-us">
<head>
<style>
.city {
float: left;
margin: 10px;
padding: 10px;
width: 300px;
height: 300px;
border: 1px solid black;
}
</style>
</head>
<body>
<h1>Responsive Web Design Demo</h1>
<h2>Resize this responsive page!</h2>
<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>View Source</h2>
<p>View the source code to see how this page was built.</p>
</div>
</body>
</html>
<!DOCTYPE html>
<html lang="en-us">
<head>
<style>
.city {
float: left;
margin: 10px;
padding: 10px;
width: 300px;
height: 300px;
border: 1px solid black;
}
</style>
</head>
<body>
<h1>Responsive Web Design Demo</h1>
<h2>Resize this responsive page!</h2>
<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>View Source</h2>
<p>View the source code to see how this page was built.</p>
</div>
</body>
</html>
Try Responsive Image Gallery
http://bus2226w16.com/stuhtml/3207/test.html
<!DOCTYPE html>
<html>
<head>
<style>
div.img {
border: 1px solid #ccc;
}
div.img:hover {
border: 1px solid #777;
}
div.img img {
width: 100%;
height: auto;
}
div.desc {
padding: 15px;
text-align: center;
}
*{
}
box-sizing: border-box;
.responsive {
padding: 0 6px;
float: left;
width: 24.99999%;
}
@media only screen and (max-width: 700px){
.responsive {
width: 49.99999%;
margin: 6px 0;
}
}
@media only screen and (max-width: 500px){
.responsive {
width: 100%;
}
}
.clearfix:after {
content: "";
display: table;
clear: both;
}
</style>
</head>
<body>
<h2 style="text-align:center">Responsive Image Gallery</h2>
<div class="responsive">
<div class="img">
<a target="_blank" href="img_fjords.jpg">
<img src="http://www.w3schools.com/css/img_fjords.jpg" alt="Trolltunga
Norway" width="300" height="200">
</a>
<div class="desc">Add a description of the image here</div>
</div>
</div>
<div class="responsive">
<div class="img">
<a target="_blank" href="img_forest.jpg">
<img src="http://www.w3schools.com/css/img_forest.jpg"
alt="Forest" width="600" height="400">
</a>
<div class="desc">Add a description of the image here</div>
</div>
</div>
<div class="responsive">
<div class="img">
<a target="_blank" href="img_lights.jpg">
<img src="http://www.w3schools.com/css/img_lights.jpg" alt="Northern
Lights" width="600" height="400">
</a>
<div class="desc">Add a description of the image here</div>
</div>
</div>
<div class="responsive">
<div class="img">
<a target="_blank" href="img_mountains.jpg">
<img src="http://www.w3schools.com/css/img_mountains.jpg"
alt="Mountains" width="600" height="400">
</a>
<div class="desc">Add a description of the image here</div>
</div>
</div>
<div class="clearfix"></div>
<div style="padding:6px;">
<p>This example use media queries to re-arrange the images on
different screen sizes: for screens larger than 700px wide, it will show
four images side by side, for screens smaller than 700px, it will show
two images side by side. For screens smaller than 500px, the images
will stack vertically (100%).</p>
<p>You will learn more about media queries and responsive web
design later in our CSS Tutorial.</p>
<h4>Resize the browser window to see the effect.</h4>
</div>
</body>
</html>
Responsive Website
http://bus2226w16.com/stu000/
Non-Responsive Website
http://www.colorbearwholesale.com