Scribd
Upload
87 views

Css Responsive

Introduction to CSS Responsive

Uploaded by

sdfg
Copyright
© © All Rights Reserved
Available Formats
Download as PDF, TXT or read online on Scribd
87 views

Css Responsive

Introduction to CSS Responsive

Uploaded by

sdfg
Copyright
© © All Rights Reserved
Available Formats
Download as PDF, TXT or read online on Scribd
You are on page 1/ 4

CSS - RESPONSIVE

http://www.tutorialspoint.com/css/css_responsive.htm Copyright © tutorialspoint.com

CSS3 Responsive Web Design


Responsive web design provides an optimal experience, easy reading and easy navigation with a
minimum of resizing on different devices such as desktops, mobiles and tabs)

Responsive structure
Below image shows the responsive structure of web pages.

Flexible Grid demo


<html>
<head>
</head>

<style>
body {
font: 600 14px/24px "Open Sans", "HelveticaNeue-Light", "Helvetica Neue
Light", "Helvetica Neue", Helvetica, Arial, "Lucida Grande", Sans-Serif;
}
h1 {
color: #9799a7;
font-size: 14px;
font-weight: bold;
margin-bottom: 6px;
}
.container:before, .container:after {
content: "";
display: table;
}
.container:after {
clear: both;
}
.container {
background: #eaeaed;
margin-bottom: 24px;
*zoom: 1;
}
.container-75 {
width: 75%;
}
.container-50 {
margin-bottom: 0;
width: 50%;
}
.container, section, aside {
border-radius: 6px;
}
section, aside {
background: #2db34a;
color: #fff;
margin: 1.858736059%;
padding: 20px 0;
text-align: center;
}
section {
float: left;
width: 63.197026%;
}
aside {
float: right;
width: 29.3680297%;
}
</style>
<body>

<h1>100% Wide Container</h1>

<div >
<section>Section</section>
<aside>Aside</aside>
</div>

<h1>75% Wide Container</h1>

<div >
<section>Section</section>
<aside>Aside</aside>
</div>

<h1>50% Wide Container</h1>

<div >
<section>Section</section>
<aside>Aside</aside>
</div>

</body>
</html>

It will produce the following result −

Media queries
Media queries is for different style rules for different size devices such as mobiles, desktops, etc.,
<html>
<head>
<style>
body {
background-color: lightpink;
}
@media screen and (max-width: 420px) {
body {
background-color: lightblue;
}
}
</style>
</head>
<body>
<p>If screen size is less than 420px, then it will show lightblue color, or else
it will show light pink color</p>
</body>
</html>

It will produce the following result −

Bootstrap responsive web design


Bootstrap is most popular web design framework based on HTML,CSS and Java script and it helps
you to design web pages in responsive way for all devices

<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet"
href="http://maxcdn.bootstrapcdn.com/bootstrap/3.2.0/css/bootstrap.min.css">
<style>
body{
color:green;
}
</style>
</head>
<body>

<div >

<div >
<h1>Tutorials point</h1>
<p>Tutorials Point originated from the idea that there exists a class of
readers who respond better to online content and prefer to learn new skills at their own
pace from the comforts of their drawing rooms.</p>
</div>

<div >
<div >
<h2>Android</h2>
<p>Android is an open source and Linux-based operating system for mobile
devices such as smartphones and tablet computers. Android was developed by the Open
Handset Alliance, led by Google, and other companies.</p>
</div>
<div >
<h2>CSS</h2>
<p>Cascading Style Sheets, fondly referred to as CSS, is a simple design
language intended to simplify the process of making web pages presentable.</p>
</div>

<div >
<h2>Java</h2>
<p>Java is a high-level programming language originally developed by Sun
Microsystems and released in 1995. Java runs on a variety of platforms, such as Windows,
Mac OS, and the various versions of UNIX. This tutorial gives a complete understanding of
Java.</p>
</div>
</div>

</body>
</html>

It will produce the following result −

You might also like