styled-components实现 动态媒体查询

import styled, { css, CSSObject } from 'styled-components';

const breakPointList: Record<string, string> = {
  phone: '(max-width:768px)',
  pad: '(min-width: 769px) and (max-width: 992px)',
  pc: '(min-width: 993px)',
};

export const responseTo = (breakPoint: string) => {
  const currentBreakPoint = breakPointList[breakPoint];
  return (...styles: (CSSObject | TemplateStringsArray)[]) => {
    const styleString = styles.map((style) => css(style).join('')).join('');
    return css`
      @media ${currentBreakPoint} {
        ${styleString}
      }
    `;
  };
};

页面调用

  .custom-layout {
    display: flex;
    align-items: center;
    ${responseTo('phone')`
      flex-direction: column;
    `}
  }