Question

我的组件如下所示：

<Card>
    <CardMedia>
        <img src="http://images.memes.com/character/meme/evil-toddler"/>
    </CardMedia>
</Card>

我注意到图像几乎占据了页面宽度的100％，这在我的情况下是不可取的。

我想要做的是定义图像的宽度（或者如果可能的话，卡）以取决于屏幕的DPI /分辨率，使用CSS＆＃39; s < EM> @media

例如，如果DPI> 720dp，卡应占据屏幕的60％，否则占90％。这样的事情。

我尝试使用自定义CSS，但它不起作用，因为该库使用内联CSS并覆盖了我的属性。

Answer 1

您可以覆盖卡片本身的样式。要使用屏幕分辨率执行此操作，您可以使用window.screen.availWidth获取宽度。这是一个例子：

import React from 'react';
import {Card, CardMedia} from 'material-ui/Card';

/**
 * Render the card with the given width as a percent.
 * @param {String} widthAsPercent
 * @returns {XML}
 */
let renderCardWithWidth = (widthAsPercent) => {
  return <Card style={{width:widthAsPercent}}>
    <CardMedia>
      <img src='http://images.memes.com/character/meme/evil-toddler'/>
    </CardMedia>
  </Card>;
};

export default class ResponsiveCard extends React.Component {
  render() {
    let width = window.screen.availWidth;
    if (width > 720) {
      return renderCardWithWidth('60%');
    } else {
      return renderCardWithWidth('90%');
    }
  }
}

卡的响应宽度

1 个答案: