Responsive Design of Web Pages

This chapter provides tutorial notes and example codes on Responsive Design for Web Pages. Topics include introduction of responsive design; logical resolution vs. physical resolution; HTML 'viewport' meta tag; responsive design on text paragraphs, images, tables, 'div' blocks, flexible box (flexbox) layouts and background images.


These sections are omitted from this Web preview version. To view the full content, see information on how to obtain the full version this book.

What Is Responsive Design

Logical Resolution vs. Physical Resolution

HTML "viewport" Meta Tag

Responsive Paragraphs with 'width: 1.1em !important;'

Responsive Images with 'width: auto !important;'

Responsive Tables with Relative Width

Responsive Block with Fixed Aspect Ratio

Responsive Block with Flexible Box Layout

Responsive Background Images


Takeaways:

Table of Contents

 About This Book

 Introduction of HTML

 Introduction of HTML5 Features

 HTML Document Structure and Content

 HTML Document and Elements Syntax

 Displayed and Printed HTML Documents

Responsive Design of Web Pages

 References

 Full Version in PDF/EPUB