I’m setting up a page where the clients sets a pixel value for the text/font size, and I need it to somehow take the value and say reduce it by -30% for smaller devices for all the different font sizes. I can’t know beforehand which are going to be the pixel values, but they should be the value for larger screens, and should scale based on that value for the smaller screens.
Why do you want tiny fonts for small devices? If anything making them larger would make more sense, keeping them the same size should work, and the user can zoom in and out if they want.
But if the fonts are specified in pixel sizes where they are used rather than relative sizes you’ll have an issue: you can’t just change the overall size in CSS, you’d need to go through them using JS.
Do you mean you want to make them responsive? Like @DanCouper says you can use relative sizes like
rem or you could specify a percentage. You can do that by specifying
rem values or percents in a media query so that it only shrinks on mobile. Here are some links that can help you.
Thank you both, so there’s no way to to do what I’m trying to achieve without changing the unit to a relative one; say defining a 100% value and then setting percents values in media queries for it…
What are the options in JS?
Go through the stylesheet, find the font size properties, extract those rules, convert the values to numbers, multiply the numbers by 0.6666, round, turn them back into the strings (
7px), add the rules back into the head of the document after the stylesheet import declaration. Probably hide everything while this is happening otherwise you’ll get a flash of original size while the processing happens
Thank you! I found as well a jquery plugin that may do the trick. Here it is in case is useful to someone else: http://fittextjs.com/
That plugin is great but note it isn’t for general text, it’s to be used sparingly on headers and the like, it will wreck the performance of the browser if you use it for everything.
Oh understood! thanks!