1

I have a demo here

It a simple react app where I am using styled components to create fluid type

I have the function from this article - https://nilsb.org/2019-02-12-sass-mixins-in-styled-components/

Currently the type is 48px up to 600px, it then scales up to 98px and at 800px and stays that size

This is what I want but currently the type size jumps down to a smaller size at 600px and then starts to scale up

Is it possible with this code to stop the type jumping in size at 600px and 800px

export function flexUnit(
  amount: number,
  minFont: number,
  maxFont: number,
  unit = "vw",
  prop = "font-size",
  minBreak: number,
  maxBreak: number
) {
  const minBreakpoint = minBreak;
  const maxBreakpoint = maxBreak;
  const dimension = unit === "vw" ? "width" : "height";

  return `
    @media (min-${dimension}: ${minBreakpoint}px) {
      ${prop}: ${amount}${unit};
      color: red;
    }

    ${
      maxFont
        ? `
        @media (min-${dimension}: ${maxBreakpoint}px) {
        ${prop}: ${maxFont}px;
      }
    `
        : ""
    }

    ${prop}: ${minFont}px;
    color: green;
  `;
}
lomine
  • 873
  • 5
  • 20
  • 36

1 Answers1

0

8vw would be 48px at 600 min-width. So, it would scale up just fine till 800 min-width without any reduce in size after 600.

5vw would be 30px at 600 min-width which is causing the smaller size and then scale up to 98px at 800 min-width.

From the demo:

    const StyledHeadline = styled.p`
  ${flexUnit(8, 48, 96, "vw", "font-size", 600, 800)}
`;

calculation guide: https://stackoverflow.com/a/30754518/12618221

Priyatham sai chand
  • 78
  • 5