HTML Tutorials - Herong's Tutorial Examples
∟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:
- Responsive Design is
about creating a Web page that changes its layout and style in responding to
screen properties of different viewing devices.
- Physical Resolution is the number of physical Pixel Per Inch (PPI), also called Dots Per Inch (DPI),
on the screen that can be turned on or off by the device.
- Logical Resolution is the total number of logical pixels in horizontal direction
and in vertical direction that are actually set to be used by the Web browser to display
text and graphical content.
- The "viewport" Meta Tag in the HTML "head" section
allows you to change "viewport" settings of the Web browser.
- Keep paragraph width of inline blocks relative to its context width.
- Use zoomable font sizes like "px (pixels)" and "em (multiples of default font size)".
- Use 'width: auto" CSS property to create responsive images.
- Use 'width="*%"' CSS properties on table and its columns to create responsive tables.
- Use 'width="*vw" height="*vw"' CSS properties to keep the aspect ratio at a constant value.
- Use 'display: flex' CSS property to create responsive blocks using the flexible box (flexbox) layout.
- Use 'background-size: 100%' CSS property to create responsive background images.
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
MathML Integration in HTML Documents
References
Full Version in PDF/EPUB