Responsive web design bootstrap and media queries

  • Published on
    12-Aug-2015

  • View
    177

  • Download
    0

Embed Size (px)

Transcript

<ol><li> 1. RESPONSIVE WEB DESIGN TWITTER BOOTSTRAP 3 CSS MEDIA QUERIES </li><li> 2. 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? </li><li> 3. 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. </li><li> 4. WHAT IS TWITTER BOOTSTRAP 3? Most popular HTML, CSS, and JS framework. Create responsive layout with much less efforts. Four tiers grids classes. Mobile first. </li><li> 5. WHY TWITTER BOOTSTRAP 3? Mobile first approach. Browser support. Easy to get started. Responsive web design. Google Chrome Mozilla Firefox Internet Explorer Apple Safari Opera </li><li> 6. WHAT IS TWITTER BOOTSTRAP GRID SYSTEM? The fastest and easy way to create layouts of web pages. Create page layouts through a series of rows and columns. The responsive mobile first fluid grid system. .col-xs- * Smartphone .col-sm- * Tablet .col-md-* Desktop .col-lg-* Large desktop screen </li><li> 7. BASIC GRID STRUCTURE </li><li> 8. <div>...</div> .container { padding-right: 15px; padding-left: 15px; margin-right: auto; margin-left: auto; } <div>...</div> Every row in the grid is made up of 12 units. Experiment and make sure that the sum always needs to be 12. </li><li> 9. WHAT IS MEDIA QUERIES? Customize the presentation. An excellent way to create responsive layout. </li><li> 10. @media screen and (min-width: 320px) and (max-width: 640px) and (orientation : portrait) {} @media screen and (min-width: 320px) and (max-width: 640px) and (orientation : landscape) {} IPHONE 5 iPhone 5 Landscape iPhone 5 Portrait </li><li> 11. @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 iPhone 6 Portrait iPhone 6 Landscape </li><li> 12. 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) {} Samsung Tab Portrait Samsung Tab Landscape </li><li> 13. @media screen and (min-width: 768px) and (max-width: 1024px) and (orientation : portrait) { } @media screen and (min-width: 768px) and (max-width: 1024px) and (orientation : landscape) { } IPAD iPad Portrait iPad Landscape </li><li> 14. /*Desktop View*/ /*Header*/ /*End Header*/ /*Navigation bar*/ /*End Navigation bar*/ /*Body*/ /*End Body*/ /*Footer*/ /*End Footer*/ /*End Desktop View*/ </li><li> 15. /*For smartphone portrait*/ @media screen and (min-width: 320px) and (max-width: 640px) and (orientation : portrait) { /*Header*/ /*End Header*/ /*Body*/ /*End Body*/ /*Footer*/ /*End Footer*/ } /*For smartphone landscape*/ @media screen and (min-width: 320px) and (max-width: 640px) and (orientation : landscape) { /*Header*/ /*End Header*/ /*Body*/ /*End Body*/ /*Footer*/ /*End Footer*/ } </li><li> 16. @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) {} @media screen and (min-width: 900px) and (max-width: 1440px) {} @media screen and (min-width: 600px) and (max-width: 1024px) {} @media screen and (min-width: 1025px) and (max-width: 1280px) {} @media screen and (min-width: 1281px) and (max-width: 1366px) {} @media screen and (min-width: 1367px) and (max-width: 1440px) {} @media screen and (min-width: 1441px) and (max-width: 1600px) {} @media screen and (min-width: 1601px) and (max-width: 1680px) {} @media screen and (min-width: 1681px) and (max-width: 1920px) {} MEDIA QUERIES DECLARATIONS FOR LARGE SCREEN DEVICES </li><li> 17. Thank You! </li><li> 18. Any Questions? </li></ol>