Bummer! This is just a preview. You need to be signed in with an account to view the entire instruction.
- Fluid Layouts vs. Fixed Layouts
- Benefits of a Fluid Layout
- Implementing Fluid Design in CSS
- Scaling Font Sizes and Images
- How to Convert Fixed Widths to Fluid Widths
- How to Use Other Units of Measure with Responsive Design
- Practical Use Cases
- Benefits of Using Viewport Units
- How to Size Fonts in Responsive Web Design
- Implementing a Fluid Design Quiz 5 questions
Well done!
You have completed (UPI) Chapter 9: Responsive Web Design!
Instruction
Scaling Font Sizes and Images
In addition to fluid layouts, relative font sizes and scalable images help make a design more responsive.
-
Relative Font Sizes:
- Use
emorremunits rather than fixed pixel sizes to allow text to scale based on screen size.
- Example:
font-size: 1.2em;adapts the font size based on the parent element.
- Use
-
Scalable Images:
- Set images to a percentage-based wid...