07_responsive_design

dz / mdn / css / 3_css_layout / 07_responsive_design

Summary

Responsive Design

Node Tree

• responsive_design
  • viewport_meta
    • tells_browser_set_vp_to_intended_size
      • mobile_browsers_lie_about_viewport
        • smartphone_early_days
  • RWD
  • change_font_size_screen_real_estate
  • design_for_range_of_devices
  • media_queries
    • breakpoints
    • common_approach
      • mobile_first
    • run_tests_apply_selective_CSS
  • mobile_first
  • resp_images
    • art_direction
    • img_srcset_size
    • never_larger_than_container
    • picture_elem
  • responsive_layout_tech
    • css_grid
      • fr_unit_distr_avail_space
    • flexbox
      • flex_grow_shrink
    • multicol
      • column_count_width
    • responsive_sites_flex_grids
      • change_design_when_things_look_bad
  • responsive_typography
    • viewport_units
      • cant_zoom_text
        • how_to_use_vw

Nodes

responsive_design
content	responsive web design
children	viewport_meta, RWD (AKA), change_font_size_screen_real_estate (desc), design_for_range_of_devices (desc), media_queries, mobile_first, resp_images, responsive_layout_tech, responsive_typography

media_queries
content	Media Queries
children	breakpoints, common_approach, run_tests_apply_selective_CSS
parents	responsive_design

design_for_range_of_devices
content	design approach that addresses the range of devices and device sizes
parents	responsive_design

RWD
content	RWD
parents	responsive_design

run_tests_apply_selective_CSS
content	runs series of tests and apply CSS selectively to style the page
parents	media_queries

breakpoints
content	breakpoints: points at which media query is introduced and layout is changed
parents	media_queries

common_approach
content	common approach: single column layout for narrow screen, check for wider screen, implement multicol
children	mobile_first
parents	media_queries

mobile_first
content	mobile-first design
parents	common_approach, responsive_design

responsive_layout_tech
content	responsive layout technologies
children	css_grid, flexbox, multicol, responsive_sites_flex_grids
parents	responsive_design

responsive_sites_flex_grids
content	responsive sites built on flexible grids
children	change_design_when_things_look_bad
parents	responsive_layout_tech

change_design_when_things_look_bad
content	used to change design when things start looking bad
parents	responsive_sites_flex_grids

multicol
content	multicol
children	column_count_width
parents	responsive_layout_tech

column_count_width
content	column-count works out width, column-width works out count
parents	multicol

flexbox
content	flexbox
children	flex_grow_shrink
parents	responsive_layout_tech

flex_grow_shrink
content	use flex-grow/shrink to indicate behavior when more or less space encountered
parents	flexbox

css_grid
content	CSS Grid
children	fr_unit_distr_avail_space
parents	responsive_layout_tech

fr_unit_distr_avail_space
content	fr unit allows distribution of avilable space across grid tracks
parents	css_grid

resp_images
content	responsive images
children	art_direction, img_srcset_size, never_larger_than_container, picture_elem
parents	responsive_design

never_larger_than_container
content	never larger than its responsive container: max-width:100%
parents	resp_images

picture_elem
content	<picture>
parents	resp_images

img_srcset_size
content	<img> srcset and size attributes
parents	resp_images

art_direction
content	art direct images used at different sizes
parents	resp_images

responsive_typography
content	responsive typography
children	viewport_units
parents	responsive_design

change_font_size_screen_real_estate
content	change font size using media queries or viewport units to reflect less or greater screen real estate
parents	responsive_design

viewport_units
content	viewport units (vw)
children	cant_zoom_text
parents	responsive_typography

cant_zoom_text
content	can't zoom text. never set text using viewport units alone
children	how_to_use_vw (solution)
parents	viewport_units

how_to_use_vw
content	calc(1.5rem + 3vw)
parents	cant_zoom_text

viewport_meta
content	The viewport meta tag
children	tells_browser_set_vp_to_intended_size (desc)
parents	responsive_design

tells_browser_set_vp_to_intended_size
content	tells browsers that they should set width of viewport to 100% of its intended size, which shows document at intended mobile optimized size.
children	mobile_browsers_lie_about_viewport (why)
parents	viewport_meta

mobile_browsers_lie_about_viewport
content	mobile browsers tend to lie about viewport width
children	smartphone_early_days (historical context)
parents	tells_browser_set_vp_to_intended_size

smartphone_early_days
content	early days of smartphones: not mobile optimized width, set to 980px, zoomed out version of desktop layout, users zoomed in to click
parents	mobile_browsers_lie_about_viewport