Bradley William Elko Bradley William Elko - 1 month ago 12
CSS Question

CSS Is there a unit that the equivalent to vh + vw?

I am wondering if there is a unit for font size that

measures 1% of the width and height of a page
? I think it will make it easier for me, and help me do what I am trying to do, without having to use
javascript
(Although, any answer is acceptable, as long as it works). If there isn't a unit like that, how can I manipulate the font to do that? The only other thing I can think of is
%
but, I don't know if they work.

My problem comes, when I try to resize the page both ways. It works for it's intended purpose, but when you resize the page really small, it wont look good. And I'm a perfectionist and it bothers me when it doesn't work. Here is my code (It is a snipet of my code to be exact. If you want the full code, I will edit it onto here):



*
{
box-sizing: border-box;
}
body
{
margin:0%;
}
.div_1
{
position:relative;
width:100%;
Height:20%;
background-color:#000000;
border-top:.4vh solid #ff7400;
border-left:.4vh solid #ff7400;
border-right:.4vh solid #ff7400;
border-bottom:.2vh solid #ff7400;
}
#div_1_a
{
height:100%;
display: flex;
align-items: center;
justify-content: center;
}
#h1_1_a
{
line-height:100%;
height:60%;
color:#ff7400;
font-size:12vh;
white-space: nowrap
}

<html lang="en">
<head>
<link rel="stylesheet" href="halloweenEvent1.css" type="text/css"/>
<meta charset="UTF-8"/>
<meta name="description" content="A Halloween Event Website"/>
<meta name="keywords" content="Brad,Website,Personal,Information,Halloween"/>
<meta name="author" content="Bradley William Elko"/>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Halloween Event (Home)</title>
</head>
<body>
<div class="div_1">
<div id="div_1_a">
<h1 id="h1_1_a">Halloween Website</h1>
</div>
</div>
</body>
</html>





Any help is greatly appreciated!

Answer

Demo of calc( n * ( 1vh + 1vw ) ) proposed by Dai.

* 
  { 
  box-sizing: border-box;
}
body
{
  margin:0%;
}
.div_1
{
  position:relative;
  width:100%;
  Height:20%;
  background-color:#000000;
  border-top:.4vh solid #ff7400;
  border-left:.4vh solid #ff7400;
  border-right:.4vh solid #ff7400;
  border-bottom:.2vh solid #ff7400;
}
#div_1_a
{
  height:100%;
  display: flex;
  align-items: center;
  justify-content: center;
}
#h1_1_a
{
  line-height:100%;
  height:60%;
  color:#ff7400;
  font-size: calc( 6 * ( 1vh + 1vw ) );
  white-space: nowrap
}
<html lang="en">
  <head> 
    <link rel="stylesheet" href="halloweenEvent1.css" type="text/css"/>
    <meta charset="UTF-8"/>
    <meta name="description" content="A Halloween Event Website"/>
    <meta name="keywords" content="Brad,Website,Personal,Information,Halloween"/>
    <meta name="author" content="Bradley William Elko"/>
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Halloween Event (Home)</title>
  </head>
  <body>
    <div class="div_1">
      <div id="div_1_a">
        <h1 id="h1_1_a">Halloween Website</h1>
      </div>
    </div>
  </body>
</html>


I want the font size to be in accordance to the div it's held in (in this case )

What I undertand by that is that you want the text to keep the same proportions than the container. I'll dodge the problem by using SVG:

* 
  { 
  box-sizing: border-box;
}
body
{
  margin:0%;
}
.div_1
{
  position:relative;
  width:100%;
  Height:20%;
  background-color:#000000;
  border-top:.4vh solid #ff7400;
  border-left:.4vh solid #ff7400;
  border-right:.4vh solid #ff7400;
  border-bottom:.2vh solid #ff7400;
}
<html lang="en">
  <head> 
    <link rel="stylesheet" href="halloweenEvent1.css" type="text/css"/>
    <meta charset="UTF-8"/>
    <meta name="description" content="A Halloween Event Website"/>
    <meta name="keywords" content="Brad,Website,Personal,Information,Halloween"/>
    <meta name="author" content="Bradley William Elko"/>
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Halloween Event (Home)</title>
  </head>
  <body>
    <div class="div_1">
        <svg class="svg" viewbox="0 0 100 20">
            <text fill="#ff7400" x="50" y="10" font-size="50%" text-anchor="middle" dominant-baseline="central">Halloween Website</text>
        </svg>
    </div>
  </body>
</html>

The drawback is that you lose the semantics of h1.

Comments