2

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.

Comments
  • 0
    You know you can't have 0.5px don't you?
  • 0
    @biscuit works for me...
  • 0
    @biscuit I always thought point pixels were valid 🤔
  • 0
    A pixel is the smallest unit...
  • 0
    @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
  • 1
    @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.
  • 0
    @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.
  • 0
    @biscuit I mean screens with e.g. 3840x2160, where the OS or browser sets pixel scaling to 2x
  • 0
    My screen is 4K. Perhaps I should investigate this!
  • 0
    @hawkes they might scale / double it, so things are readable... But 1px is still smallest option.
  • 0
    You can pop out the Dev tools
  • 2
    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
Add Comment