mdn/css/3_css_layout/07_responsive_design

07_responsive_design

dz / mdn / css / 3_css_layout / 07_responsive_design

Summary

Responsive Design

Node Tree

Nodes

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

media_queries
content Media Queries
children run_tests_apply_selective_CSS, breakpoints, common_approach
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 responsive_sites_flex_grids, css_grid, flexbox, multicol
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