08_media_queries_beginners

dz / mdn / css / 3_css_layout / 08_media_queries_beginners

Summary

A beginner's guide to media queries

Node Tree

• media_queries
  • apply_CSS_when_device_matches_rule
  • basics
    • feature_rules
      • hover
      • orientation
      • pointer
        • coarse
        • fine
        • none
      • width_height_min_max
    • syntax
      • media_expression
      • media_type
  • breakpoint
  • complex_media_queries
    • and_logic
    • not_logic
      • negates_entire_query
    • or_logic
      • comma_separted
  • how_to_choose_breakpoints
    • breakpoint
    • change_size_when_design_breaks
    • responsive_design_mode

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	feature_rules, syntax
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	hover, orientation, pointer, width_height_min_max
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