Is there an alternative for @media queries to accomplish font-size inversely proportional to the screen size? (e.g.: opposite effect of 2vw, where the font gets smaller on small screens);
My first try was divide a value by a viewport width increment, but font-size: calc(10vw / 2); works while font-size: calc(100 / 2vw); unfortunately doesn't works.
ps: even answered, there's still an open bounty on the question so new ideas/infos are welcome.
5 Answers
Answers 1
You can't divide a px value by a viewport-width increment, but you can achieve this inverse size behavior reducing a px value by a viewport-width increment.
Example:
font-size: calc(40px - 2vw);
Alternatively, you could use the other 3 units related to the viewport's size: vh vmin and vmax.
Examples:
font-size: calc(40px - 2vh);
font-size: calc(200px - 20vmin);
font-size: calc(200px - 20vmax);
vw - Relative to 1% of the width of the viewport*;
vh - Relative to 1% of the height of the viewport*;
vmin - Relative to 1% of viewport's* smaller dimension;
vmax - Relative to 1% of viewport's* larger dimension;*viewport = the browser window size.
Source: w3schools
Answers 2
By definition, a vw is 1/100th of the width of the viewport. That's it. 2vw = 2/100ths of the screen. There is no way to get it to be inversely proportional because math doesn't work that way. I am assuming you are doing this as a thought experiment, rather than trying to solve a problem in your code so I'm going to leave it at that.
You could calculate the size of the font to be inversely proportional via javascript. Here's a codepen
HTML:
<div > This is text </div> JS:
$(window).resize(function() { area = 50000; width = $(window).width(); fontSize= (Math.ceil(area/width)); $('div').css('font-size', fontSize); }).resize(); Answers 3
I think that the best that you can do is to use a font size that is not relative to a viewport. For example, 1em will be relatively large on a mobile device and will relatively small on a desktop client. If you use a fluid layout, em is perfect. If you use a static layout, your best option would probably be px. But using px is a bit iffy because a mobile device could potentially have just as many pixels as a desktop client.
The reason that calc(10vw / 2) works but calc(100 / 2vw) doesn't is because the former evaluates to 5vw and the latter evaluates to 50/vw which isn't an expression of distance. More precisely, the engine can only divide by scalar
In summation, to do what you want to do, you'll need to have a fluid layout and use em as your unit for font sizes. But you won't be able to get a direct ratio of the size of the viewport without JavaScript, which you should of course generally not rely on for layout purposes.
Answers 4
No, there is no CSS only solution today (1:st quarter of 2016), as to make this work you need for example to get the screen and window width and compute them to get a divider to be able to do a proper calculation, which CSS can't do (yet).
That said, and if you still need a A script solution, this one impact the performance least and only need to run once per resize and for one element only, the body.
It works as a progressive enhancement for users that have script enabled so in a way risk free.
var fontMax = 40, fontMin = 14; function sizeBodyFont() { var fontSize = ((screen.width / window.innerWidth) * 10); document.body.style.fontSize = Math.min(Math.max(fontSize,fontMin),fontMax) + 'px'; } sizeBodyFont(); (function(el) { window.addEventListener('resize', sizeBodyFont); }(document.querySelector('#test')))body { font-size: 20px; } span { font-size: 100%; } div { font-size: 150%; }<span>Hey there</span> <div>Hey there</div>Answers 5
You can use relative font-styling. like -
html, body { font-size: 16px; } h1 { font-size: 2.5em; } p { font-size: 1em; } 
0 comments:
Post a Comment