Ranter
Join devRant
Do all the things like
++ or -- rants, post your own rants, comment on others' rants and build your customized dev avatar
Sign Up
Pipeless API
From the creators of devRant, Pipeless lets you power real-time personalized recommendations and activity feeds using a simple API
Learn More
Comments
-
biscuit19167y@harambae Humour me. 2 divs , 1 styled with 1px border, the second with 0.5px border.
The borders are the same width... Because 0.5px is scaled up to smallest possible value -
hawkes15767y@biscuit when zooming to 200%, a 0.5px border is displayed as 1px wide, a 1px border as 2px. High-DPI displays ("retina") might also display less pixels.
-
biscuit19167y@hawkes well if he's zoomed to 200% the line is 1px wide, which it is when he's at 100%.dpi makes no difference. A pixel is smaller on a 1080 x 768 screen than a 640 x 480 screen... But it's still a pixel.
-
hawkes15767y@biscuit I mean screens with e.g. 3840x2160, where the OS or browser sets pixel scaling to 2x
-
biscuit19167y@hawkes they might scale / double it, so things are readable... But 1px is still smallest option.
-
Okay,
So on a 4K screen the 0.5px border is thinner than a 1px border.
On a normal screen, both the 0.5px and 1px border render at the same thickness.
The 1px border doesn't change thickness between the normal and 4K
So, a 0.5px on a normal screen is rendered as 1px
Over the years, I always had a problem with web development on small screens. Whenever I was debugging html/css I had to open the console which would take up a large amount of the screen. This only becomes a problem on laptops/small monitors.
A solution that I have "invented" is to add this to the css ->
* {
border: 0.5px solid rgb(50,150,180);
}
This shows the box outline for all elements. Its surprisingly useful and it means I don't always have to open the console.
undefined