CSS
Responsive Web Design
Automatic views on Devices
Desktop Phone
Responsive Web Design
Responsive web design makes your web page look good
on all devices.
Responsive web design uses only HTML and CSS.
Responsive web design is not a program or a JavaScript.
It is called responsive web design when you use CSS and
HTML to resize, hide, shrink, enlarge, or move the content
to make it look good on any screen.
Throught the slides, if the CSS property is preceded with
a period (.), it denotes that the property is a class
The Viewport
The viewport is the user's visible area of a web page.
The viewport varies with the device, and will be smaller
on a mobile phone than on a computer screen.
Before tablets and mobile phones, web pages were
designed only for computer screens, and it was common
for web pages to have a static design and a fixed size.
Then, when we started surfing the internet using tablets
and mobile phones, fixed size web pages were too large
to fit the viewport. To fix this, browsers on those devices
scaled down the entire web page to fit the screen.
Setting the Viewport
HTML5 introduced a method to let web designers take control
over the viewport, through the <meta> tag.
<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 (which will vary
depending on the device).
The initial-scale=1.0 part sets the initial zoom level when the
page is first loaded by the browser.
Effects of Viewport
Without the viewport meta tag With the viewport meta tag
Form Elements
Method Tag
Textbox <input type= "text">
Radio Button <input type= "radio">
Check Box <input type= "checkbox">
Hidden <input type= "hidden">
Text area <textarea>..</textarea>
List down box <select>..</select>
Password <input type= "password">
When any text is written in this type of input box, ‘*’ will
appear.
What is a Grid-View?
Many web pages are based on a grid-view, which means
that the page is divided into columns:
What is a Grid-View?
Using a grid-view is very helpful when designing web pages. It makes
it easier to place elements on the page.
A responsive grid-view often has 12 columns, and has a total width of
100%, and will shrink and expand as you resize the browser window.
Building a Responsive Grid-View
ensure all HTML elements have the box-sizing property set to border-box.
This ensures the padding and border are included in the total width and
height of the elements.
* {
box-sizing: border-
box;
The example is fine with two columns
}
but to use the 12 columns, proceed below .menu {
First we must calculate the percentage for width: 25%;
one column: 100% / 12 columns = 8.33%. float: left;
}
Then we make one class for each of the 12
.main {
columns, class="col-" and a number defining width: 75%;
how many columns the section should span: float: left;
}
Building a Responsive Grid-View
.col-1 {width: 8.33%;} [class*="col-"] { <div class="row">
.col-2 {width: 16.66%;} float: left; <div class="col-3">
.col-3 {width: 25%;} padding: 15px;
...</div>
.col-4 {width: 33.33%;} border: 1px solid red;
.col-5 {width: 41.66%;} } <!-- 25% -->
.col-6 {width: 50%;} <div class="col-9">
.col-7 {width: 58.33%;}
...</div>
.col-8 {width: 66.66%;}
.col-9 {width: 75%;} <!-- 75% -->
.col-10 {width: 83.33%;} </div>
.col-11 {width: 91.66%;}
.col-12 {width: 100%;}
CSS CSS HTML
Media Query
Media query is used to determine the size of the screen
Eg: If the browser window is 600px or smaller, the
background color will be lightblue
In this example, the breakpoint is set at 600px
@media only screen and (max-width: 600px) {
body {
background-color: lightblue;
}
}
Media Query : Breakpoint
Breakpoints are used to as a determiner for the web site
to display a different view
The rule of thumb is to set a breakpoint at 768px
/* For desktop: */
.col-11 {width: 91.66%;}
.col-1 {width: 8.33%;}
.col-12 {width: 100%;}
.col-2 {width: 16.66%;}
.col-3 {width: 25%;}
@media only screen and (max-width: 768px) {
.col-4 {width: 33.33%;}
/* For mobile phones: */
.col-5 {width: 41.66%;}
[class*="col-"] {
.col-6 {width: 50%;}
width: 100%;
.col-7 {width: 58.33%;}
}
.col-8 {width: 66.66%;}
}
.col-9 {width: 75%;}
.col-10 {width: 83.33%;}
Media Query : Breakpoint
Switches to desktop view then screen size exceeds 768px
Desktop Phone
Media Query : Breakpoint
Always start with smaller size first
Phone (<600px) Tablet (600px) Desktop (786px)
Media Query : Breakpoint
/* For mobile phones: */
[class*="col-"] { .col-s-12 {width: 100%;}
width: 100%; }
} @media only screen and (min-width:
@media only screen and (min-width: 768px) { /* For desktop: */
600px) { /* For tablets: */ .col-1 {width: 8.33%;}
.col-s-1 {width: 8.33%;} .col-2 {width: 16.66%;}
.col-s-2 {width: 16.66%;} .col-3 {width: 25%;}
.col-s-3 {width: 25%;} .col-4 {width: 33.33%;}
.col-s-4 {width: 33.33%;} .col-5 {width: 41.66%;}
.col-s-5 {width: 41.66%;} .col-6 {width: 50%;}
.col-s-6 {width: 50%;} .col-7 {width: 58.33%;}
.col-s-7 {width: 58.33%;} .col-8 {width: 66.66%;}
.col-s-8 {width: 66.66%;} .col-9 {width: 75%;}
.col-s-9 {width: 75%;} .col-10 {width: 83.33%;}
.col-s-10 {width: 83.33%;} .col-11 {width: 91.66%;}
.col-s-11 {width: 91.66%;} .col-12 {width: 100%;}
}
Font
The font-family property sets the font for your page
or the element of your choice
/* One sets <p> to TNR, the other set body to Verdana */
p {
font-family: "Times New Roman", Times, serif;
}
body {
font-family: "Verdana";
}
Bold, italic and normal is set through font-weight
p.thick { /* sets <p class="thick"> to bold */
font-weight: bold;
}
p {/* sets all <p> to italic*/
font-weight: italic;
}
Font
The size of the font is controlled by font-size property
Sizes may be expressed using px or em
1em is equivalent to 16px
p {
font-size: 14px;
}
p {
font-size: 0.875em; /* 14px/16=0.875em */
}
Variable Font Size
Font sizes may be set to display accordingly depending on
the screen size
/* If the screen size is 601px or more, set the font-size of <div> to 80px */
@media only screen and (min-width: 601px) {
div.example {
font-size: 80px;
}
}
/* If the screen size is 600px or less, set the font-size of <div> to 30px */
@media only screen and (max-width: 600px) {
div.example {
font-size: 30px;
}
}
Images : Using The width Property
If the width property is set to a percentage and the
height is set to "auto", the image will be responsive and
scale up and down: img {
width: 100%;
height: auto;
}
If the max-width property is set to 100%, the image will
scale down if it has to, but never scale up to be larger
than its original size: img {
max-width: 100%;
height: auto;
}
HTML5 <picture> Element
With <picture> element, HTML lets you define more
than one image.
The <picture> element works similar to the
<audio> and <video> elements. You set up different
sources, and the first source that fits the preferences is the
one being used:
<picture>
<source srcset="img_smallflower.jpg" media="(max-width: 400px)">
<source srcset="img_flowers.jpg">
<img src="img_flowers.jpg" alt="Flowers">
</picture>
Video : Using The width Property
If the width property is set to 100%, the video player will
be responsive and scale up and down:
video {
width: 100%;
height: auto;
}
If the max-width property is set to 100%, the video player
will scale down if it has to, but never scale up to be larger
than its original size: video {
max-width: 100%;
height: auto;
}
CSS Tables
To specify table borders in CSS, use the border property.
table, th, td {
border: 1px solid black;
}
The border-collapse property collapses table border into a
single border
table {
border-collapse: collapse;
}
table, th, td {
border: 1px solid black;
}
CSS Table
Horizontal alignment is set using text-align property.
th {
text-align: left; /* left, right or center */
}
Vertical alignment is set using vertical-align
property.
td {
height: 50px;
vertical-align: bottom; /* top, bottom or center */
}
CSS Table
use the padding property on <td> and <th> elements
to control the space between the border and content
th, td {
padding: 15px;
text-align: left;
}
Add the border-bottom property to <th> and <td> for
horizontal dividers:
th, td {
border-bottom: 1px solid #ddd;
}
CSS Table
Use the :hover selector on <tr> to highlight table rows
on mouse over in Hoverable Table
tr:hover {background-color: #f5f5f5;}
/* Peter is slightly grey */
For zebra-striped tables, use the nth-child() selector
and add a background-color to all even (or odd) table
rows table {
border-collapse: collapse;
width: 100%; }
th {
height: 50px;
padding: 8px; }
tr:nth-child(even) {background-color: #f2f2f2;}
CSS Table
Background color and text color of <th> elements can be
manipulated using CSS
th {
background-color: #4CAF50;
color: white;
}
Responsive table allows for horizontal scroll bar to be
present if the screen size can not fit the table using
overflow-x:auto
<div style="overflow-x:auto;">
<table>
... table content ...
</table>
</div>
