I am trying to achieve HTML-"art direction" (displaying different images for different viewport widths) in React. This is the JSX:
import LogoImg from "../../abstracts/media/logo-large.svg";
import LogoImgMedium from "../../abstracts/media/logo-medium.svg";
<picture>
<source srcSet={`${LogoImgMedium} 1x, ${LogoImg} 2x`} media="(max-width: 37.5em)" />
<img
className="logo__apple"
srcSet={`${LogoImgMedium} 1x, ${LogoImg} 2x`}
alt="Full Logo"
src={LogoImgMedium} />
</picture>
The breakpoint defined in the media
attribute does not seem to work. Do you guys know why? I have tried to specify it with px, rem and em.
Thanks.