时间戳

首页 > 解决方案 > 样式化组件流体类型

reactjs - 样式化组件流体类型

问题描述

我在这里有一个演示

它是一个简单的反应应用程序，我在其中使用样式组件来创建流体类型

我有这篇文章的功能 - https://nilsb.org/2019-02-12-sass-mixins-in-styled-components/

当前类型是 48px 到 600px，然后缩放到 98px 和 800px 并保持该大小

这就是我想要的，但目前字体大小会下降到 600 像素的较小尺寸，然后开始放大

是否可以使用此代码阻止类型在 600 像素和 800 像素处跳跃

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;
  `;
}

标签： reactjsstyled-components

解决方案

8vw 在 600 min-width 时是 48px。因此，它可以放大到 800 min-width 而不会在 600 之后缩小尺寸。

5vw 在 600 min-width 时是 30px，这会导致尺寸变小，然后在 800 min-width 时放大到 98px。

从演示：

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

计算指南： https ://stackoverflow.com/a/30754518/12618221

推荐阅读