08_media_queries_beginners
dz / mdn / css / 3_css_layout / 08_media_queries_beginnersSummary
A beginner's guide to media queries
Node Tree
- media_queries
Nodes
media_queries | |
content | CSS media queries |
children | apply_CSS_when_device_matches_rule (desc), basics, breakpoint, complex_media_queries, how_to_choose_breakpoints |
apply_CSS_when_device_matches_rule | |
content | a way to apply CSS only when the browser device environment matches a specified rule |
parents | media_queries |
basics | |
content | media query basics |
children | syntax, feature_rules |
parents | media_queries |
syntax | |
content | @media meda-type and (media-feature-rule) {} |
children | media_expression, media_type |
parents | basics |
media_type | |
content | media-type: what kind of media code meant for (print, screen, all) |
parents | syntax |
media_expression | |
content | media expression: rule/test that must be passed for contained CSS to be applied. |
parents | syntax |
feature_rules | |
content | media feature rules |
children | width_height_min_max, hover, orientation, pointer |
parents | basics |
width_height_min_max | |
content | width, height, max-[width|height], min-[width|height] |
parents | feature_rules |
orientation | |
content | orientation: [portrait|landscape] |
parents | feature_rules |
hover | |
content | hover |
parents | feature_rules |
pointer | |
content | pointer |
children | coarse, fine, none |
parents | feature_rules |
none | |
content | none: no pointing device. navigation possibly done with keyboard or voice? |
parents | pointer |
fine | |
content | fine: mouse/trackpad |
parents | pointer |
coarse | |
content | coarse: finger on touchscreen |
parents | pointer |
complex_media_queries | |
content | more complex media queries |
children | and_logic, not_logic, or_logic |
parents | media_queries |
and_logic | |
content | "and" logic |
parents | complex_media_queries |
or_logic | |
content | "or" logic |
children | comma_separted |
parents | complex_media_queries |
not_logic | |
content | "not" logic |
children | negates_entire_query |
parents | complex_media_queries |
comma_separted | |
content | comma-separated |
parents | or_logic |
negates_entire_query | |
content | negates entire query |
parents | not_logic |
how_to_choose_breakpoints | |
content | how to choose breakpoints |
children | breakpoint, change_size_when_design_breaks, responsive_design_mode |
parents | media_queries |
breakpoint | |
content | breakpoint: point at which a media query is introduced |
parents | media_queries, how_to_choose_breakpoints |
change_size_when_design_breaks | |
content | instead of targetting specific devices, change design at size when con tent starts to break in some way |
parents | how_to_choose_breakpoints |
responsive_design_mode | |
content | responsive design mode in firefox DevTools |
parents | how_to_choose_breakpoints |