3. What is mean by Responsive
Design?
Responsive design means, Website
automatically fits in the user’s device.
If the user has a small screen, the
elements will rearrange to the screen
width.
5. Meta Tag
<meta> tags always goes inside the
<head> element.
Provides metadata about the HTML
document.
Meta elements are typically used to
specify page description, keywords, and
other metadata.
6. Continue…
<meta name="viewport"
content="width=device-width, initial-
scale=1.0">
The width property controls the size of
the viewport.
Initial-scale property controls the zoom
level when the page is first loaded
7. Media Queries
CSS Media Query is the trick for
responsive design.
It is like writing if conditions…..
12. For IE8 and older version
browsers..
<!--[if lt IE 8]>
<script src="http://css3-mediaqueries-
js.googlecode.com/svn/trunk/css3-
mediaqueries.js">
</script>
<![endif]-->
13.
14.
15. Some more media queries
/* Smartphones (portrait and landscape) ----------- */
@media only screen
and (min-device-width : 320px)
and (max-device-width : 480px) {
/* Styles */
}
/* Smartphones (landscape) ----------- */
@media only screen
and (min-width : 321px) {
/* Styles */
}
16. Cont…
/* Smartphones (portrait) ----------- */
@media only screen
and (max-width : 320px) {
/* Styles */
}
/* iPads (portrait and landscape) ----------- */
@media only screen
and (min-device-width : 768px)
and (max-device-width : 1024px) {
/* Styles */
}
17. Cont…
/* iPads (landscape) ----------- */
@media only screen
and (min-device-width : 768px)
and (max-device-width : 1024px)
and (orientation : landscape) {
/* Styles */
}
/* iPads (portrait) ----------- */
@media only screen
and (min-device-width : 768px)
and (max-device-width : 1024px)
and (orientation : portrait) {
/* Styles */
}
18. Cont…
/* Desktops and laptops ----------- */
@media only screen
and (min-width : 1224px) {
/* Styles */
}
/* Large screens ----------- */
@media only screen
and (min-width : 1824px) {
/* Styles */
}
19. Cont…
/* iPhone 4 ----------- */
@media
only screen and (-webkit-min-device-pixel-
ratio : 1.5),
only screen and (min-device-pixel-ratio :
1.5) {
/* Styles */
}
