Vmax & rem

Hi,

I’ve been playing with using vmax as a base font size then using rem for sizing elements, rather than @media for different screen sizes. Seems to be working well; does anyone know of any major problems?

I don’t know of any real world issues but I guess the problem would be that on a small viewport the text will be very small as the height and width is small.


p { font-size: 2vmax }

Grab the corner of the browser window and drag it down to a 320px square and the text is very small (unreadable). So I think you need to be careful with your choice but it may be an option for large headings on desktop as long as they don’t go below the 14px - 16px threshold for mobile.

Regarding rems then they are useful to avoid the compounding issues that ems have but of course you may want to resize one segment of a page simply by changing the parents font-size and all the children scale down automatically. This can be done with ems but not with rems as changing the body size affects the whole page and so you lose fine control.

In the end its a matter of “horses for courses” :slight_smile: