Cargando…
Responsive web design with HTML5 and CSS3 : build responsive and future-proof websites to meet the demands of modern web users /
Learn the HTML5 and CSS3 you need to help you design responsive and future-proof websites that meet the demands of modern web users About This Book Learn and explore how to harness the latest features of HTML5 in the context of responsive web design Learn to wield the new Flexbox layout mechanism, c...
| Clasificación: | Libro Electrónico |
|---|---|
| Autor principal: | |
| Formato: | Electrónico eBook |
| Idioma: | Inglés |
| Publicado: |
Birmingham, UK :
Packt Publishing,
2015.
|
| Edición: | Second edition. |
| Colección: | Community experience distilled.
|
| Temas: | |
| Acceso en línea: | Texto completo (Requiere registro previo con correo institucional) |
Tabla de Contenidos:
- Cover; Copyright; Credits; About the Author; About the Reviewers; www.PacktPub.com; Table of Contents; Preface; Chapter 1: The Essentials of Responsive Web Design; Beginning our quest; Defining responsive web design; Responsive web design in a nutshell; Setting browser support levels; A brief note on tooling and text editors; Our first responsive example; Our basic HTML file; Taming images; Enter media queries; Amending the example for a larger screen; The shortcomings of our example; Summary; Chapter 2: Media Queries
- Supporting Differing Viewports.
- Why media queries are needed for a responsive web designBasic conditional logic in CSS; Media query syntax; Media queries in link tags; Combining media queries; Media queries with @import; Media queries in CSS; What can media queries test for?; Using media queries to alter a design; Any CSS can be wrapped in a media query; Media queries for HiDPI devices; Considerations for organizing and authoring media queries; Linking to different CSS files with media queries; The practicalities of separating media queries; Nesting media queries 'inline'; Combine media queries or write them where it suits?
- The viewport meta tagMedia Queries Level 4; Scripting media feature; Interaction media features; The hover media feature; Environment media features; Summary; Chapter 3: Fluid Layouts and Responsive Images; Converting a fixed pixel design to a fluid proportional layout; Why do we need Flexbox?; Inline block and whitespace; Floats; Table and table-cell; Introducing Flexbox; The bumpy path to Flexbox; Browser support for Flexbox; Leave prefixing to someone else; Getting flexy; Perfect vertically centered text; Offset items; Reverse the order of items.
- How about if we want them laid out vertically instead?Column reverse; Different Flexbox layouts inside different media queries; Inline-flex; Flexbox alignment properties; The align-items property; The align-self property; Possible alignment values; The justify-content property; The flex property; Simple sticky footer; Changing source order; Wrapping up Flexbox; Responsive images; The intrinsic problem of responsive images; Simple resolution switching with srcset; Advanced switching with srcset and sizes; Did you say the browser 'might' pick one image over another?
- Art direction with the picture elementFacilitate new-fangled image formats; Summary; Chapter 4: HTML5 for Responsive Web Designs; HTML5 markup
- understood by all modern browsers; Starting an HTML5 page the right way; The doctype; The HTML tag and lang attribute; Specifying alternate languages; Character encoding; Easy-going HTML5; A sensible approach to HTML5 markup; All hail the mighty tag; New semantic elements in HTML5; The element; The element; The element; The element; The element; The and elements.