hey there! i just stumbled upon a neat way to handle font sizing in different devices that doesn't involve using any css media-queries. it's all about utilizing viewport units, specifically
vw
, and some clever nesting with ems.
basically u set ur base text size as an absolute pixel value or rem (root-em), then nest media queries inside the parent element to adjust for smaller screens without needing complex mq rules everywhere:
p {font-size: .875rem; /* start at small screen sizes */}@media only all and (-webkit-min-device-pixel-ratio :0) {p{font size:.9em}/* tweak on tablets, adjust as needed */}the key is to keep ur main styles simple with pixels or root ems then just fine tune where necessary. it's a bit of extra work but keeps the code clean and easy maintainable!