Media Querries Styled Components
Sun May 28 2023 14:35:08 GMT+0000 (Coordinated Universal Time)
Saved by
@Kristi
//devices.js
const size = {
mobile: '425px',
tablet: '768px',
laptop: '1024px',
laptopL: '1440px',
desktop: '2560px',
};
const device = {
mobile: `(min-width: ${size.mobile})`,
tablet: `(min-width: ${size.tablet})`,
laptop: `(min-width: ${size.laptop})`,
laptopL: `(min-width: ${size.laptopL})`,
desktop: `(min-width: ${size.desktop})`,
desktopL: `(min-width: ${size.desktop})`,
};
export default device;
//How to implement to the other files:
import styled from 'styled-components';
import device from './device';
const Page = styled.div`
margin: auto;
font-family: "sans-serif";
text-align: center;
@media ${device.laptop} {
max-width: 800px;
}
@media ${device.desktop} {
max-width: 1400px;
}
`;
content_copyCOPY
https://jsramblings.com/how-to-use-media-queries-with-styled-components/
Comments