Where to use em instead of px in CSS?

I am developing a responsive website for our product. I want to know for which CSS definitions I should use em instead of px. What are the possible future problems that I will have to face if I use them throughout my entire css.

Below are the css definitions:

width
padding
border-radius
border
height
margin
line-height
font-size
box-shadow
text-shadow

      

I am using em for font size and line properties. I suppose I would use them for other properties too? Could this cause scaling issues in different DPI modes on different mobile and tablet devices? Are there any CSS properties I should be using em (or px) for to avoid future issues in responsive design?

Thank.

PS I understand that this question cannot be answered directly. I am awaiting expert opinion on DPI scaling and css standards to consider when designing responsively.

+3


source to share





All Articles