'Defining a border width in PX vs EM on a responsive design
My entire stylesheet is all done using em
instead of px
. The entire theme is responsive.
The only thing that I have seen I would like to change to px
is with a class that adds a border:
.border {
border-width: 0.1em;
border-style: solid;
}
The 0.1em
seems a little thick in most places. I would like to change this to px
:
.border {
border-width: 1px;
border-style: solid;
}
I know I am probably being overly picky here, but is there any reason I shouldn't use px
when defining a border width? If so, is there any way I can get that 0.1em
down a little smaller to look more like 1px
?
Solution 1:[1]
Instead of defining it in em, which you have said you're not happy with, define it in px but change the value to 2px or 3px, etc., as the site changes via media queries. Then you have definite control.
@media screen and (min-width:30em) { .border {border:1px;} }
@media screen and (min-width:50em) { .border {border:2px;} }
The disadvantage is if you are wanting small increments in the screen size and your CSS becomes book length. Then you are just being overly picky.
Solution 2:[2]
Don't use px
if you want your border width to be responsive. Px
is a fixed-size unit and will be constant despite any other responsive changes. Thus, you run the risk of having tiny or large border widths relative to the rest of the page.
Did you test how the 1px
looks when your font-size
(em
scales with font-size
) increases or decreases?
Sources
This article follows the attribution requirements of Stack Overflow and is licensed under CC BY-SA 3.0.
Source: Stack Overflow
Solution | Source |
---|---|
Solution 1 | Rob |
Solution 2 | Ayub |