mdn/css/3_css_layout/08_media_queries_beginners

08_media_queries_beginners

dz / mdn / css / 3_css_layout / 08_media_queries_beginners

Summary

A beginner's guide to media queries

Node Tree

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