how to get vw fonts to stop growing

I'm trying to create a responsive webpage where the max-width of html is 1000px. All of my fonts are specified in terms of vw. Is there a way to stop the fonts from growing when the browser is expanded to over 1000px?

2 answers

  • answered 2019-08-14 00:31 adam_th

    Use media queries

    .dynamic-size-text {
        font-size: 30px;
      }
    
    @media only screen and (max-width: 1000px) {
      .dynamic-size-text {
        font-size: 10vw;
      }
    }
    

  • answered 2019-08-14 00:33 mertcanb

    You can use a @media rule:

    .text-class {
        font-size: 0.2vw;
    }
    
    @media only screen and (min-width: 1000px) {
        .text-class {
            font-size: /* some fixed size */;
        }
    }