Responsive Web Design with HTML5 and CSS3 - Second Edition

图书信息

作者	Ben Frain
出版社	Packt Publishing
ISBN	9781784398262
出版时间	2015-08-24
字数	236.7万
分类	进口书,外文原版书,电脑,网络

读书简介

Are you writing two websites: one for mobile and one for larger displaysOr perhaps you've already implemented your first RWD but are struggling to bring it all togetherIf so, this book gives you everything you need to take your websites to the next level. Some HTML and CSS knowledge will help; everything else you need is included in the book.

目录

Responsive Web Design with HTML5 and CSS3 Second Edition

Table of Contents

Responsive Web Design with HTML5 and CSS3 Second Edition

Credits

About the Author

About the Reviewers

www.PacktPub.com

Support files, eBooks, discount offers, and more

Why subscribe?

Free access for Packt account holders

Preface

What this book covers

What you need for this book

Who this book is for

Conventions

Reader feedback

Customer support

Downloading the example code

Downloading the color images of this book

Errata

Piracy

Questions

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

2. Media Queries – Supporting Differing Viewports

Why media queries are needed for a responsive web design

Basic 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 tag

Media Queries Level 4

Scripting media feature

Interaction media features

The hover media feature

Environment media features

Summary

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

Choosing your auto-prefixing solution

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 element

Facilitate new-fangled image formats

Summary

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