I have a container:
<div id="container"><h1>LONG TITLE LINE</h1></div>
and css:
#container {
width: 50%;
height: 50%;
}
#container h1 {
font-size: XXXXXX;
}
"XXXXXX" <-- where i want the font size to be based on the width of the page/container.
QUESTION: is it possible to have the font-size of the h1 based on the width of the page? in css3? i'm sure it can be done using JS, but like to avoid that if it is possible.
An other option dependng on your layout is to use vw units :
vw : 1/100th of the width of the viewport.(source MDN)
If your #container width is set as a percentage of the viewport, font-size will adapt to it's width :
CSS :
#container h1 {
font-size: 5vw;
}
Browser support for vw units is IE9+, see canIuse for more info.
I don't think it's possible in CSS, but this might be interesting to you:
Not the way you are saying. You can, however, do the opposite. Have the width of the page dependent on the font size, if you declare a base font size in ems, then use em values for your layout. Then, the width would increase if you increased the size of the text.
I don't see why this couldn't be accomplished using media tags. Depending on how granular you wanted to make it, you could do something like this:
@media only screen and (min-width: 1000px){
#container h1 { font-size:42px; }
}
@media only screen and (max-width: 1000px){
#container h1 { font-size:40px; }
}
@media only screen and (max-width: 900px){
#container h1 { font-size:35px; }
}
@media only screen and (max-width: 800px){
#container h1 { font-size:30px; }
}
@media only screen and (max-width: 700px){
#container h1 { font-size:25px; }
}
@media only screen and (max-width: 600px){
#container h1 { font-size:20px; }
}
@media only screen and (max-width: 500px){
#container h1 { font-size:15px; }
}
See the JSFiddle here for a demo.
My solution creates a CSS variable that expresses the height of the container relative to the viewport, in "vh" units, this variable can then be used with the CSS3 "calc" function to calculate font height as a percentage of the height of the container.
the size of the container is measured every time the viewport (window) is resized
<html>
<head>
<style>
.container {
width:100%;
/*
any rules you like to set the dimensions of the container
*/
top:40px;
height:30vh;
border:1px solid red;
white-space:nowrap;
}
</style>
<script>
function setCSSVariableAccordingToElementHeightRelativeToViewPort(elementClassName, cssVariableName, immutableElement)
{
var element
/*
the "immutableElement" parameter is
true when the container is never recreated,
false if its generated dynamicaly
*/
if(immutableElement === true) {
element = document.querySelector("." + elementClassName)
}
var onResize = function() {
if(immutableElement !== true) {
element = document.querySelector("." + elementClassName)
}
if(element != undefined) {
var elementHeight = element.offsetHeight
var elementVH = (elementHeight / window.innerHeight) * 100
element.style.setProperty(cssVariableName, elementVH + "vh")
}
}
onResize()
window.onresize = onResize
}
</script>
</head>
<body>
<div class="container">
<span style="font-size:calc(var(--container-vh) * 0.25)">25%</span>
<span style="font-size:calc(var(--container-vh) * 0.50)">50%</span>
<span style="font-size:calc(var(--container-vh) * 1.00)">100%</span>
</div>
</body>
<script>
setCSSVariableAccordingToElementHeightRelativeToViewPort("container", "--container-vh", true)
</script>
</html>
