07_responsive_design
dz / mdn / css / 3_css_layout / 07_responsive_designSummary
Responsive Design
Node Tree
- responsive_design
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 |