Professional Documents
Culture Documents
Responsive Web Design Twitter Bootstrap 3 Css Media Queries
Responsive Web Design Twitter Bootstrap 3 Css Media Queries
DESIGN
TWITTER BOOTSTRAP 3
CSS MEDIA QUERIES
CONTENTS
• What is Responsive Web Design?
• What is Twitter Bootstrap 3?
• Why Twitter Bootstrap 3?
• What is Twitter Bootstrap grid system?
• What is Media Queries?
• Why to use media queries?
• How to use media queries?
• What are the standard responsive screen resolutions?
WHAT IS RESPONSIVE WEB DESIGN?
• Ethan Marcotte.
• Fluid grids, flexible images, and media queries.
• Better accessibility and optimal viewing experience.
• Target a wide range of devices with much less efforts.
WHAT IS TWITTER BOOTSTRAP 3?
<div class=“container”>
<div class=“row”>
<div class=“col-lg-3 col-md-4 col-sm-6 col-xs-12”>
</div>
</div>
</div>
<div class="container">...</div>
.container {
padding-right: 15px;
padding-left: 15px;
margin-right: auto;
margin-left: auto;
}
<div class="row">...</div>
<div class="col-md-*"></div>
@media screen and (min-width: 320px) and (max-width: 640px) and (orientation : landscape) {}
iPhone 5 Landscape
iPhone 5 Portrait
IPHONE 6
@media screen and (min-width: 360px) and (max-width: 736px) and (orientation : portrait) {}
@media screen and (min-width: 360px) and (max-width: 736px) and (orientation : landscape) {}
iPhone 6 Landscape
iPhone 6 Portrait
SAMSUNG TAB
@media screen and (min-width: 533px) and (max-width: 768px) and (orientation : portrait) {}
@media screen and (min-width: 533px) and (max-width: 768px) and (orientation : landscape) {}
@media screen and (min-width: 768px) and (max-width: 1024px) and (orientation : landscape) { }
iPad Landscape
iPad Portrait
/*Desktop View*/
/*Header*/
/*End Header*/
/*Navigation bar*/
/*Body*/
/*End Body*/
/*Footer*/
/*End Footer*/
/*End Header*/
/*Body*/
/*End Body*/
/*Footer*/
/*End Footer*/
}
/*End Header*/
/*Body*/
/*End Body*/
/*Footer*/
/*End Footer*/
}
MEDIA QUERIES DECLARATIONS FOR LARGE SCREEN DEVICES
@media screen and (min-width: 800px) and (max-width: 1280px) and (orientation : portrait) {}
@media screen and (min-width: 800px) and (max-width: 1280px) and (orientation : landscape) {}