css - What units are referenced by responsive web design breakpoints? -

when breakpoints set in css responsive web designs, media queries check width of device different layouts can appropriately displayed. thought understood it, pixel units in media queries referencing rendered pixel resolutions commonly see in device specs. example, iphone 5 @ 640 x 1136px or nexus 5 @ 1080 x 1920.

but i’m confused whether breakpoints instead meant reference device’s points (for ios) or density-independent pixels (for android). question largely stems how i’ve seen common breakpoints referenced, buckets defined phones, tablets, , desktop screens. this, instance, bootstrap’s documentation:

// small devices (portrait phones, less 544px) // no media query since default in bootstrap  // small devices (landscape phones, 544px , up) @media (min-width: 544px) { ... }  // medium devices (tablets, 768px , up) @media (min-width: 768px) { ... }  // large devices (desktops, 992px , up) @media (min-width: 992px) { ... }  // large devices (large desktops, 1200px , up) @media (min-width: 1200px) { ... } 

but wait second. samsung galaxy series has few phones nowadays resolutions 1440 x 2560. breakpoints above, these higher-resolution phones treated desktops, wouldn’t they? iphone 6 plus qualify desktop. can’t right.

and while know it’s best practice define breakpoints based on content , not device, bootstrap example representative of seemingly widespread idea there ought breakpoints portrait phones, landscape phones, tablets, , desktops … single bucket portrait phones doesn’t make sense if we’re talking rendered pixels, because there’s device size diversity in category alone!

finally, found this kinda related post, encourages setting viewport meta tag “the screen's width match device independent pixels , ensure different devices should scale , behave consistently.” (emphasis mine.) return bootstrap example, though unit says px, referring pts or dps?

all of – plus parallel investigation of mine concept of designing in 1x 4x different screen densities – has got me spun around on feels ought basic issue. making out more complicated is? , dps , pts relevant native development , not responsive web design? what units media query breakpoints referencing?

from same post referenced in question:

stack overflow– “should use max-device-width or max-width?”

in terms of media queries, want use max-width rather max-device-width, since max-width target viewport (current browser window), whereas max-device-width target device's actual full screen size/resolution.

so answer question, pixel-based media queries– combined correct <meta name=viewport> tag settings –will reference rendered (as opposed actual) pixels.