根元素字体大小是否应该影响文本以外的元素？

Question

Learning about rem and try to make whole website responsive.

According to the value of 1rem , should I be scaling:

1. Font sizes and margins/paddings around text
2. margins/paddings/size of elements that do not directly contain text like components and images

Does this depend on the layout?

For example, I have an image in a card component. As user increases the font size, image or space around it might stay small next to a larger font.

Should I let this happen or scale image with the font size? I know the setting in the browser only changes font size. On Facebook, for instance, font size from browser settings does not affect the images or component sizes.

Should I then only worry about text?

Answer 1

I think this is entirely based on context/preference but,

1. Generally yes, if you are using 'em' for padding/margin (which you should be) this will scale automatically however to the font-size of its element.

2. Depends on the element, text is hard to read for some people as its small lines in unique shapes so this makes the most sense to scale however images and other elements are generally a lot easier to look at. - if the content of the element is something like an icon for button I would probably scale it with text as it is likely to be adjacent to some text so would look weird if the text scaled but the element didn't. Otherwise I would just use responsive web design such as flex/grid to fill the space of a page, this is "scaling" however less for accessibility and more for design.