Highlighted

media query... query!

Community Beginner ,
Apr 15, 2020

Copy link to clipboard

Copied

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

Topics

Code

Views

1.7K

Likes

Translate

Translate

Report

Report
Community Guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more

media query... query!

Community Beginner ,
Apr 15, 2020

Copy link to clipboard

Copied

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

Topics

Code

Views

1.7K

Likes

Translate

Translate

Report

Report
Community Guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
Adobe Community Professional ,
Apr 15, 2020

Copy link to clipboard

Copied

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.


Ben

Likes

Translate

Translate

Report

Report
Community Guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
Reply
Loading...
LEGEND ,
Apr 15, 2020

Copy link to clipboard

Copied

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?

Likes

Translate

Translate

Report

Report
Community Guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
Reply
Loading...
Adobe Community Professional ,
Apr 15, 2020

Copy link to clipboard

Copied

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.


Ben

Likes

Translate

Translate

Report

Report
Community Guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
Reply
Loading...
LEGEND ,
Apr 15, 2020

Copy link to clipboard

Copied

Don't worry Ben, if you are as confused as me on the subject, then welcome to the 'confusion reigns' group.

 

The question that I could not answer, (and no one else has satisfactorily to my knowledge) was that if px values are displayed in browsers as 1px = 16 device pixels, (4k screen) then how does srcset, (using the 'w' descriptor) or the px size for images work, as they are displayed at 1px = 1px?

 

The problem is becomming worse, with 30 inch+ 4k screens being used not just by smart tv's, but as desktop monitors.

(makes me glad I retired).

Likes

Translate

Translate

Report

Report
Community Guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
Reply
Loading...
pziecina LATEST
LEGEND ,
Apr 15, 2020

Copy link to clipboard

Copied

Forgot to add Ben,

 

For anyone thinking that srcset is just a 'gimmick'. Try viewing your site on a 30 inch+ 4k screen, then remember that 4k game consoles have browsers, and 1 in 5 users of them do use the built in browsers, (1 in 5-8 (estimated) for smart tv's).

Likes

Translate

Translate

Report

Report
Community Guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
Reply
Loading...
Resources
Learn Resources
Add a group