I have a fluid website and the menu is 20% of its width. I want the font size of the menu to be measured properly so it always fits the width of the box and never wrap to the next line. I was thinking of using "em" as a unit but it is relative to the browser's font size, so when I change resolutions the font size stays the same.
Tried also pts and percentages. Nothing works as I need it...
Give me a hint of how to proceed, please.
@media screen and (max-width : 320px)
{
body or yourdiv element
{
font:<size>px/em/rm;
}
}
@media screen and (max-width : 1204px)
{
body or yourdiv element
{
font:<size>px/em/rm;
}
}
You can give it manually according to screen size of screen.Just have a look of different screen size and add manually the font size.
You can use em, %, px. But in combination with media-queries See this Link to learn about media-queries. Also, CSS3 have some new values for sizing things relative to the current viewport size: vw, vh, and vmin. See link about that.
There are several ways to achieve this
Use media query but requires font sizes for several breakpoints
body
{
font-size: 22px;
}
h1
{
font-size:44px;
}
@media (min-width: 768)
{
body
{
font-size: 17px;
}
h1
{
font-size:24px;
}
}
Use dimensions in % or em. Just change the base font size everything will change. Unlike previous one you could just change the body font and not h1 everytime or let base font size to default of the device and rest all in em
see kyleschaeffer.com/....
CSS3 supports new dimensions that are relative to view port. But this doesn't work in android
3.2vmax = Bigger of 3.2vw or 3.2vh
body
{
font-size: 3.2vw;
}
see css-tricks.com/.... and also look at caniuse.com/....
I've developed a nice JS solution - which is suitable for entirely-responsive HTML (i.e. HTML built with percentages)
I use only "em" to define font-sizes.
html font size is set to 10 pixels:
html {
font-size: 100%;
font-size: 62.5%;
}
I call a font-resizing function on document-ready:
// this requires JQuery
function doResize() {
// FONT SIZE
var ww = $('body').width();
var maxW = [your design max-width here];
ww = Math.min(ww, maxW);
var fw = ww*(10/maxW);
var fpc = fw*100/16;
var fpc = Math.round(fpc*100)/100;
$('html').css('font-size',fpc+'%');
}
You might try this tool: http://fittextjs.com/
I haven't used this second tool, but it seems similar: https://github.com/zachleat/BigText
Not sure why is this complicated. I would do this basic javascript
<body onresize='document.getElementsByTagName("body")[0].style[ "font-size" ] = document.body.clientWidth*(12/1280) + "px";'>
Where 12 means 12px at 1280 resolution. You decide the value you want here
I've created a variant of https://stackoverflow.com/a/17845473/189411
where you can set min and max text size in relation of min and max size of box that you want "check" size. In addition you can check size of dom element different than box where you want apply text size.
You resize text between 19px and 25px on #size-2 element, based on 500px and 960px width of #size-2 element
resizeTextInRange(500,960,19,25,'#size-2');
You resize text between 13px and 20px on #size-1 element, based on 500px and 960px width of body element
resizeTextInRange(500,960,13,20,'#size-1','body');
complete code are there https://github.com/kiuz/sandbox-html-js-css/tree/gh-pages/text-resize-in-range-of-text-and-screen/src
function inRange (x,min,max) {
return Math.min(Math.max(x, min), max);
}
function resizeTextInRange(minW,maxW,textMinS,textMaxS, elementApply, elementCheck=0) {
if(elementCheck==0){elementCheck=elementApply;}
var ww = $(elementCheck).width();
var difW = maxW-minW;
var difT = textMaxS- textMinS;
var rapW = (ww-minW);
var out=(difT/100)*(rapW/(difW/100))+textMinS;
var normalizedOut = inRange(out, textMinS, textMaxS);
$(elementApply).css('font-size',normalizedOut+'px');
console.log(normalizedOut);
}
$(function () {
resizeTextInRange(500,960,19,25,'#size-2');
resizeTextInRange(500,960,13,20,'#size-1','body');
$(window).resize(function () {
resizeTextInRange(500,960,19,25,'#size-2');
resizeTextInRange(500,960,13,20,'#size-1','body');
});
});
This worked for me :
body {
font-size: calc([minimum size] + ([maximum size] - [minimum size]) * ((100vw - [minimum
viewport width]) / ([maximum viewport width] - [minimum viewport width])));
}
Explained in detail here: https://css-tricks.com/books/volume-i/scale-typography-screen-size/
Not using media queries is nice because it allows scaling the font size gradually.
Using vw units will adjust the font size relative to the view port size.
Directly converting vw units to font size will make it difficult to hit to the sweet spot for both mobile resolutions and desktop.
I recommend trying something like:
body {
font-size: calc(0.5em + 1vw);
}
Credit: CSS In Depth
