Is there such a thing as min-font-size and max-font-size?

Question

I'm trying to make a font in a div responsive to the browser window. So far, it has worked perfectly, but the parent div has a max-width of 525px. Resizing the browser further will not make the font stop resizing. This has made me wonder if there is such a thing as min-font-size or max-font-size, and if such a thing does not exist, if there is a way to achieve something similar.

I thought that using percentages at font-size would work, but the bit of text won't scale accordingly to the parent div. Here's what I have:

The CSS for the parent div:

.textField{     background-color:rgba(88, 88, 88, 0.33);      width:40%;     height:450px;      min-width:200px;     max-width:525px;      z-index:2; } 

The CSS for the piece of text in question:

.subText{     position:relative;     top:-55px;     left:15px;      font-family:"news_gothic";     font-size:1.3vw;     font-size-adjust:auto;      width:90%;      color:white;      z-index:1; } 

Answer 1

You can do it by using a formula and including the viewport width.

font-size: calc(7px + .5vw); 

This sets the minimum font size at 7px and amplifies it by .5vw depending on the viewport width.

Answer 2

It works well with CSS.

I went through the same issues and fixed it as follow.

Use a fixed "px" size for maximum size at a specific width and above. Then for different smaller widths, use a relative "vw" as a percentage of the screen.

The result below is that it adjusts itself at screens below 960px but keep a fixed size above. Just a reminder, not to forget to add in the html doc in header:

<meta name="viewport" content="width=device-width"> 

Example in CSS:

@media all and (min-width: 960px) { h1{     font-size: 50px;   } }  @media all and (max-width: 959px) and (min-width: 600px) { h1{     font-size: 5vw;   } }  @media all and (max-width: 599px) and (min-width: 50px) { h1{     font-size: 6vw;   } }