media query... query!

Forum|Forum|5 years ago
April 15, 2020
1 reply
3841 views

I've never come across this before, but I have received some code from another developer who has media queries in place such as max-width:1199.98px and the next break-point is 1200px; so there's a difference between the two of .01px!

Why .98px and not .99px? Is this a retina thing?

Should I just change them to .99px?

TIA

Code

This topic has been closed for replies.

BenPleysier

Community Expert

Decimals for pixels are ignored and the whole number will be rounded off.

In other words, do not use decimal places for the px unit.

Wappler is the DMXzone-made Dreamweaver replacement and includes the best of their powerful extensions, as well as much more!

pziecina

Legend

Hi Ben,

There is now, (once again) some debate over using decimals in px values.

With many 4x+ devices now being widely used, none of the device/screen manufacurers are saying, (or perhaps even know) what happens if decimals are used. It is possible with a 4x screen that a 0.25px, (or multiples of) pixel mesurement would 'display' 1px, (it gets even worse, when 8x screens are used). Also don't ask what difference the device pixel ratio does anymore.

The debate started with Apples anouncment regarding the iPad OS last year, (the statement that it would display desktop layouts by default) and how it would know which media-query was for desktop?

BenPleysier

Community Expert

Thank you Paula for the explanation. Poor me with my humble setup, have no idea of what happens in ultra high definition screens.

Reading https://www.w3.org/TR/css-values-3/#viewport-relative-lengths

For screen media (including high-resolution devices), low-resolution devices, and devices with unusual viewing distances, it is recommended instead that the anchor unit be the pixel unit. For such devices it is recommended that the pixel unit refer to the whole number of device pixels that best approximates the reference pixel.

To me this reads that for 4K devices, 1 px refers to 16 device pixels. This view comes from a pixel ignoramus (me).

I'll gladly follow your advice.

Wappler is the DMXzone-made Dreamweaver replacement and includes the best of their powerful extensions, as well as much more!

Sign up

To post, reply, or follow discussions, please sign in with your Adobe ID.

Sign in to Adobe Community

To post, reply, or follow discussions, please sign in with your Adobe ID.

Scanning file for viruses.

This file cannot be downloaded