<resolution> - CSS: Cascading Style Sheets
sted below. as with all css dimensions, there is no space between the unit literal and the number. units dpi represents the number of dots per inch. screens typically contains 72 or 96 dots per inch, but the dpi for printed documents is usually much greater. as 1 inch is 2.54 cm, 1dpi ≈ 0.39dpcm. dpcm represents the number of dots per centimeter. as 1 inch is 2.54 cm, 1dpcm ≈ 2.54dpi. dppx represents the number of dots per px unit. due to the 1:96 fixed ratio of css in to css px, 1dppx is equivalent to 96dpi, which corresponds to the default resolution of images displayed in css as defined by image-resolution. x alias for dppx. note: although the number 0 is always the same regardless of unit, the unit may not be omitted. in other words, 0 is invalid and does not represent 0d...
...ten dpi the number must use digits only. 0 the unit is required. ...
...ten dpi the number must use digits only. 0 the unit is required. ...
... must use digits only. 0 the unit is required. specifications specification status comment css values and units module level 4the definition of '<resolution>' in that specification. editor's draft adds the x unit. css values and units module level 3the definition of '<resolution>' in that specification. candidate recommendation adds the dppx unit. media queriesthe definition of '<resolution>' in that specification. recommendation initial definition. ...

-moz-device-pixel-ratio - CSS: Cascading Style Sheets
note: this media feature is also implemented by webkit and by ie 11 for windows phone 8.1 as -webkit-device-pixel-ratio. ...
...vice-pixel-ratio and -webkit-max-device-pixel-ratio. syntax <number> the number of device pixels per css pixel. media: media/visual accepts min/max prefixes: yes examples basic compatibility example -moz-device-pixel-ratio may be used for compatibility with firefox older than 16, and alongside -webkit-device-pixel-ratio for compatibility with webkit-based browsers that do not support dppx. ...
...e -moz-device-pixel-ratio may be used for compatibility with firefox older than 16, and alongside -webkit-device-pixel-ratio for compatibility with webkit-based browsers that do not support dppx. example: @media (-webkit-min-device-pixel-ratio: 2), /* webkit-based browsers */ (min--moz-device-pixel-ratio: 2), /* older firefox browsers (prior to firefox 16) */ (min-resolution: 2dppx), /* the standard way */ (min-resolution: 192dpi) /* dppx fallback */ note: see this csswg article for compatibility good practices regarding resolution and dppx. specifications not part of any standard. ...

Window.devicePixelRatio - Web APIs
to see when the device resolution changes, so that we can check the value of devicepixelratio to handle any updates we need to. javascript the javascript code creates the media query that monitors the device resolution and checks the value of devicepixelratio any time it changes. ...
...olution: ${window.devicepixelratio}dppx)`; const updatepixelratio = () => { let pr = window.devicepixelratio; let prstring = (pr * 100).tofixed(0); pixelratiobox.innertext = `${prstring}% (${pr.tofixed(2)})`; } updatepixelratio(); matchmedia(mqstring).addlistener(updatepixelratio); the string mqstring is set up to be the media query itself. the media query, which begins as (resolution: 1dppx) (for standard displays) or (resolution: 2dppx) (for retina/hidpi displays), checks to see if the current display resolution matches a specific number of device dots per px. the updatepixelratio() function fetches the current value of devicepixelratio, then sets the innertext of the element pixelratiobox to a string which displays the ratio both as a percentage and as a raw decimal value with ...

CSS3 - Archive of obsolete content
interact with the new css text-orientation property, and extends them where needed. css counter styles level 3 candidate recommendation testing modules css images module level 3 candidate recommendation defines the <image> data type. extends the url() syntax to support image slices using media fragments. adds: the dppx unit to the <resolution> data type. the image() function as a more flexible alternative to url() to define an image from an url. at risk: due to insufficient browser support, standardization of the image() function may be postponed to the next iteration of this module. support for linear-gradient(), repeating-linear-gradient(), radial-gradient() and repeating-radial-gradient(). ...

The Firefox codebase: CSS Guidelines
the opacity property on text as it will cause text to be aliased differently. hdpi support it's recommended to use svg since it keeps the css clean when supporting multiple resolutions. see the svg guidelines for more information on svg usage. however, if only 1x and 2x png assets are available, you can use this @media query to target higher density displays (hdpi): @media (min-resolution: 1.1dppx) ...

CSS numeric factory functions - Web APIs
umber); css.vb(number); css.vmin(number); css.vmax(number); css.cm(number); css.mm(number); css.q(number); css.in(number); css.pt(number); css.pc(number); css.px(number); // <angle> css.deg(number); css.grad(number); css.rad(number); css.turn(number); // <time> css.s(number); css.ms(number); // <frequency> css.hz(number); css.khz(number); // <resolution> css.dpi(number); css.dpcm(number); css.dppx(number); // <flex> css.fr(number); examples we use the css.vmax() numeric factory function to create a cssunitvalue: let height = css.vmax(50); console.log( height ); // cssunitvalue {value: 50, unit: "vmax"} console.log( height.value ) // 50 console.log( height.unit ) // vmax in this example, we set the margin on our element using the css.px() factory function: myelement.attribut...

-webkit-device-pixel-ratio - CSS: Cascading Style Sheets
ecified as a <number> value. it is a range feature, meaning that you can also use the prefixed -webkit-min-device-pixel-ratio and -webkit-max-device-pixel-ratio variants to query minimum and maximum values, respectively. values <number> the number of device pixels used to represent each css px. although the value is a <number>, and thus doesn't syntactically allow units, its implicit unit is dppx. implementation /* a unit of "dppx" is implied: */ @media (-webkit-min-device-pixel-ratio: 2) { ... } /* ... is equivalent to: */ @media (min-resolution: 2dppx) { ... } /* similarly: */ @media (-webkit-max-device-pixel-ratio: 2) { ... } /* ... is equivalent to: */ @media (max-resolution: 2dppx) { ... } examples html <p>this is a test of your device's pixel density.</p> css /* exact res...

CSS values and units - CSS: Cascading Style Sheets
er second. resolution unit resolution units are represented by the type <resolution>. they represent the size of a single dot in a graphical representation, such as a screen, by indicating how many of these dots fit in a css inch, centimeter, or pixel. it accepts the following values: unit description dpi dots per inch. dpcm dots per centimetre. dppx, x dots per px unit. percentages a <percentage> is a type that represents a fraction of some other value. percentage values are always relative to another quantity, for example a length. each property that allows percentages also defines the quantity to which the percentage refers. this quantity can be a value of another property of the same element, the value of a property of an ance...

CSS reference - CSS: Cascading Style Sheets
orcolumn-rule-stylecolumn-rule-widthcolumn-spancolumn-widthcolumnsconic-gradient()containcontentcontrast()<counter>counter-incrementcounter-resetcounter-set@counter-stylecounters()cross-fade()cubic-bezier()::cue::cue-regioncursor<custom-ident>d:defaultdeg<dimension>:dirdirection:disableddisplay<display-box><display-inside><display-internal><display-legacy><display-listitem><display-outside>dpcmdpidppxdrop-shadow()eelement()ellipse()em:emptyempty-cells:enabledenv()exffallback (@counter-style)filter<filter-function>:first:first-child::first-letter (:first-letter)::first-line (:first-line):first-of-typefit-content()<flex>flexflex-basisflex-directionflex-flowflex-growflex-shrinkflex-wrapfloat:focusfont@font-facefont-familyfont-family (@font-face)font-feature-settingsfont-feature-settings (@font-fa...

image-set() - CSS: Cascading Style Sheets
l user needs. syntax image-set() = image-set( <image-set-option># ) where <image-set-option> = [ <image> | <string> ] <resolution> and <string> is an <url> values most commonly you'll see an url() <string> value, but the <image> can be any image type except for an image set. the image-set() function can not be nested inside another image-set() function. <resolution> units include x or dppx, for dots per pixel unit, dpi, for dots per inch, and dpcm for dots per centimeter. every image within an image-set() must have a unique resolution. examples background-image: image-set( "cat.png" 1x, "cat-2x.png" 2x, "cat-print.png" 600dpi); this example shows how to use image-set() to provide two alternative background-image options, ...

The building blocks of responsive design - Progressive web apps (PWAs)
y fail the media query tests and therefore ignore the media queries. you can also serve a larger graphic to a higher resolution device using a resolution media query, like so: button { background: url(images/low-res-header.jpg) 1rem center ; } @media only screen and (-webkit-min-device-pixel-ratio: 2), only screen and ( min-resolution: 192dpi), only screen and ( min-resolution: 2dppx) { button { background: url(images/high-res-header.jpg) 1rem center ; } } this looks rather complicated, but really it's not — we are providing a number of media query options, as at this time different browsers support different resolution media query types and even units. brett jankord has a good explanation at cross browser retina/high resolution media queries. <video> html5 vide...