UMD Web Utilities Library
    Preparing search index...

    Function createMediaQueryRange

    • Creates a media query for a range of viewport sizes. Generates a media query that applies styles only when the viewport width falls between the minimum and maximum breakpoints (inclusive).

      Parameters

      • min: number

        The minimum breakpoint in pixels

      • max: number

        The maximum breakpoint in pixels

      • styles: Record<string, any> = {}

        The CSS-in-JS styles object to apply within this range

      Returns Record<string, any>

      A media query object with the specified range constraint

      // Apply styles only for tablet viewports (768px - 1023px)
      const tabletStyles = createMediaQueryRange(768, 1023, {
      fontSize: '18px',
      padding: '2rem',
      columns: 2
      });
      // Returns: {
      // '@media (min-width: 768px) and (max-width: 1023px)': {
      // fontSize: '18px',
      // padding: '2rem',
      // columns: 2
      // }
      // }