BiteSizedChunks.comLearn one small thing at a time.

Course contentsShow

Web Development

378The Viewport Meta Tag
379Device Pixels vs CSS Pixels
380Mobile-First Philosophy
381Base Styles for Mobile
382Touch Target Sizes
383Mobile Navigation Patterns
384Viewport Units: vw, vh, vmin, vmax
385Avoiding Horizontal Scroll
386Mobile Performance Considerations
387Testing on Real Devices
388Common Viewport Pitfalls
389Progressive Enhancement Strategy
390Media Query Syntax and Structure
391Common Breakpoint Values
392min-width vs max-width Strategies
393Combining Media Features with Logical Operators
394Width and Height Media Features
395Orientation Media Feature
396Aspect Ratio Media Features
397Resolution and Pixel Density Queries
398Hover and Pointer Media Features
399prefers-color-scheme for Dark Mode
400prefers-reduced-motion for Accessibility
401Other User Preference Media Features
402Range Syntax for Cleaner Queries
403Organizing Media Queries in CSS
404Testing Media Queries Across Devices
405Understanding Fluid Typography
406The clamp() Function
407Viewport Units for Scaling
408Building a Fluid Type Scale
409Accessible Minimum Font Sizes
410Preventing Overly Large Text
411Custom Properties for Fluid Type
412Fluid Line Height and Spacing
413Testing Fluid Typography
414When to Use Fluid vs Stepped Type
415The Challenge of Responsive Images
416Resolution Switching with srcset
417Width Descriptors (w) in srcset
418Density Descriptors (x) in srcset
419The sizes Attribute
420How Browsers Choose from srcset
421Art Direction with the Picture Element
422Media Queries in Picture Sources
423Combining srcset with Picture
424Modern Image Formats with Picture
425The Fallback img Element
426Viewport-Based Image Sizing
427Responsive Images in CSS
428Performance Implications of Responsive Images
429Testing Responsive Image Delivery
430What Are Container Queries?
431Container Queries vs Media Queries
432Setting Up Container Context
433Container Query Syntax
434Container Query Units (cqw, cqh, cqi, cqb)
435Named Containers
436Container Query Breakpoints
437Size vs Inline-Size Containment
438Nested Container Queries
439Component-Based Responsive Design
440Container Query Polyfills and Support
441Real-World Container Query Patterns

Web Development

378The Viewport Meta Tag
379Device Pixels vs CSS Pixels
380Mobile-First Philosophy
381Base Styles for Mobile
382Touch Target Sizes
383Mobile Navigation Patterns
384Viewport Units: vw, vh, vmin, vmax
385Avoiding Horizontal Scroll
386Mobile Performance Considerations
387Testing on Real Devices
388Common Viewport Pitfalls
389Progressive Enhancement Strategy
390Media Query Syntax and Structure
391Common Breakpoint Values
392min-width vs max-width Strategies
393Combining Media Features with Logical Operators
394Width and Height Media Features
395Orientation Media Feature
396Aspect Ratio Media Features
397Resolution and Pixel Density Queries
398Hover and Pointer Media Features
399prefers-color-scheme for Dark Mode
400prefers-reduced-motion for Accessibility
401Other User Preference Media Features
402Range Syntax for Cleaner Queries
403Organizing Media Queries in CSS
404Testing Media Queries Across Devices
405Understanding Fluid Typography
406The clamp() Function
407Viewport Units for Scaling
408Building a Fluid Type Scale
409Accessible Minimum Font Sizes
410Preventing Overly Large Text
411Custom Properties for Fluid Type
412Fluid Line Height and Spacing
413Testing Fluid Typography
414When to Use Fluid vs Stepped Type
415The Challenge of Responsive Images
416Resolution Switching with srcset
417Width Descriptors (w) in srcset
418Density Descriptors (x) in srcset
419The sizes Attribute
420How Browsers Choose from srcset
421Art Direction with the Picture Element
422Media Queries in Picture Sources
423Combining srcset with Picture
424Modern Image Formats with Picture
425The Fallback img Element
426Viewport-Based Image Sizing
427Responsive Images in CSS
428Performance Implications of Responsive Images
429Testing Responsive Image Delivery
430What Are Container Queries?
431Container Queries vs Media Queries
432Setting Up Container Context
433Container Query Syntax
434Container Query Units (cqw, cqh, cqi, cqb)
435Named Containers
436Container Query Breakpoints
437Size vs Inline-Size Containment
438Nested Container Queries
439Component-Based Responsive Design
440Container Query Polyfills and Support
441Real-World Container Query Patterns

← Web Development

Lesson 421 of 2,982·7. Responsive DesignPro lesson

Art Direction with the Picture Element

Using picture and source elements to serve completely different images at different breakpoints.

This lesson is for subscribers

You've completed the free preview. Subscribe to unlock every lesson in every course.

See pricing Back to course