媒体查询

媒体查询在Emotion中可以直接使用，例如以下示例。

import { jsx, css } from '@emotion/react';

function App() {
  return (
    <div
      css={css`
        font-size: 15px;
        @media (min-width: 400px) {
          font-size: 25px;
        }
      `}>
      Some text.
    </div>
  );
}

借助于Javascript提供的计算键，还可以便捷的重复使用固定的几个媒体查询条件。

import { jsx, css } from '@emotion/react';

const breakpoints = [320, 576, 768, 992, 1200, 1400];

const mq = breakpoints.map(bp => `@media (min-width: ${bp}px`);

function App() {
  return (
    <div>
      <div
        css={{
          color: 'red',
          [mq[0]]: {
            color: 'gray'
          },
          [mq[1]]: {
            color: 'blue'
          }
        }}>
        Some text.
      </div>
      // 既然媒体查询已经被转换成了字符串，那么也可以直接在字符串模版中使用
      <div
        css={css`
          color: red;
          ${mq[0]} {
            color: gray;
          }
          ${mq[1]} {
            color: blue;
          }
        `}>
        Some text.
      </div>
    </div>
  );
}

像上例这样定义一组媒体查询的断点虽然十分可行，但是带来的结果是冗长的代码。在一般情况下，媒体查询所控制的样式属性都是相同的一个或者一组，所以这里可以借助一些其他的库来简化媒体查询的编写。这里所使用的辅助库名称为facepaint，可以使用以下命令在项目中安装。

npm install facepaint
yarn add facepaint

使用facepaint就可以把上面这个示例简化成以下这样。

import { jsx } from '@emotion/react';
import facepaint from 'facepaint';

const breakpoints = [320, 576, 768, 992, 1200, 1400];
const mq = facepaint(breakpoints.map(bp => `@media (min-width: ${bp}px)`));

function App() {
  return (
    <div>
      <div
        css={mq({
          color: ['red', 'gray', 'blue']
        })}>
        Some text.
      </div>
    </div>
  );
}