Press/to search

Effects

Fluid Font Size v1.0.8

Utilities for sets min and max font sizes for screen size without breakpoints.

Class

classcss
fluid
text-min-{value}
text-max-{value}		@media screen and (min-width: 20rem) { .fluid.text-min-{modifier}.text-max-{modifier} { font-size: calc({min} + 0 * ((100vw - 20rem) / 30)) } } @media screen and (min-width: 50rem) { .fluid.text-min-{modifier}.text-max-{modifier} { font-size: {max} } }
classcss
xsfont-size: .75remText
smfont-size: .875remText
mdfont-size: 1remText
lgfont-size: 1.125remText
xlfont-size: 1.25remText
2xlfont-size: 1.5remText
3xlfont-size: 1.875remText
4xlfont-size: 2.25remText
5xlfont-size: 3remText
6xlfont-size: 4remText
7xlfont-size: 5remText
8xlfont-size: 6remText

Usage

Set font size adaptively to the width of the screen size. When the smaller screen size, the text size is text-lg max. Meanwhile, when the screen size is getting bigger, the text size is text-md max.

<!-- Example -->
<y class="fluid text-min-lg text-max-md">
  ...
</y>

Mix with other fluid utilities, such as Fluid Margin, Fluid Padding.

<!-- Example -->
<y class="fluid m-min-4 m-max-2 p-min-8 p-max-4 text-min-lg text-max-md">
  ...
</y>

Variant

ResponsiveDark ModeLight ModeReduce-MotionPortraitLandscapeHoverGroup-HoverFocusGroup-FocusFocus-VisibleFocus-WithinActiveVisitedCheckedDisabled

Default enabled variants. Read more information about the Responsive and Pseudo-Class Variants.