How to make responsive font-size/other sizes but with pixel perfect?-CodePudding

I have a site design in Figma for different screen sizes (mobile, tablet, and desktop). How to make font-size smooth changing between these screen sizes, but on these screen sizes font-size have to be the same size as in Figma?

The same question is for a width/height of an icon or picture. How to smooth change its sizes between different screen sizes but have pixel-perfect size on some screen widths?

For example: Screen sizes: 320px, 768px, and 1920px. Font sizes: 40px, 76px, 112px. But between these sizes its have to changing smoothly.

CodePudding user response：

You could use a fully responsive way of declaring your font-size. One way to do this is using font-size: clamp(value1, value2, value3).

The first value is the minimum value - the font-size will never be lower than what you set here.

The second value is the preferred value. The element will try to set the font-size to this value.

The last value is the maximum value. The element's font size will never exceed this.

As for setting the values, I suggest using either em, rem or vw-units for a fully responsive effect. Using the em-unit on the font-size property allows setting the font size of an element relative to the font size of its parent. When the size of the parent element changes, the size of the child changes automatically.

Read more about em & rem on the font-size-property: https://www.geeksforgeeks.org/difference-between-em-and-rem-units-in-css/

Play a bit around with the values! Try resizing the browser in the full page tab with the example snippet and see the effect of how powerful clamp() is. You would probably need a few media-queries to achieve your desired effect, though.

body {
  width: 800px;
  font-size: 40px;
}

div {
  width: 50%;
  font-size: clamp(0.5em, 8vw, 8em);
}

<body>
  <div>
    Resize the browser window to see the full effect of how powerful clamp is.
  </div>
</body>

CodePudding user response：

Use the CSS property clamp.

    /*
      clamp(MIN, IDEAL, MAX)
    */

    .text-class { 
      font-size: clamp(1rem, 2.5vw, 2rem);
    }

This determines the best available size for your current viewing device. Pair that with media queries, and you should be in good stead.