Usage
phone`
your css styles go here
`
import { breakpoint } from './screenSize'; | |
export const phone = (...styles) => { | |
return `@media${breakPoint.xxs}{ | |
${styles} | |
}`; | |
}; | |
export const tablet = (...styles) => { | |
return `@media${breakPoint.sm}{ | |
${styles} | |
}`; | |
}; | |
export const desktop = (...styles) => { | |
return `@media${breakPoint.md}{ | |
${styles} | |
}`; | |
}; |
const screenSize = { | |
xs: 480, | |
sm: 768, | |
md: 996, | |
lg: 1280, | |
}; | |
const minWidth = { | |
xs: `(min-width: ${screenSize.xs}px)`, | |
sm: `(min-width: ${screenSize.sm}px)`, | |
md: `(min-width: ${screenSize.md}px)`, | |
lg: `(min-width: ${screenSize.lg}px)`, | |
}; | |
const maxWidth = { | |
xxs: `(max-width: ${screenSize.xs - 1}px)`, | |
xs: `(max-width: ${screenSize.sm - 1}px)`, | |
sm: `(max-width: ${screenSize.md - 1}px)`, | |
md: `(max-width: ${screenSize.lg - 1}px)`, | |
}; | |
const breakPoint = { | |
xxs: maxWidth.xxs, | |
xs: `${minWidth.xs} and ${maxWidth.xs}`, | |
sm: `${minWidth.sm} and ${maxWidth.sm}`, | |
md: `${minWidth.md} and ${maxWidth.md}`, | |
lg: minWidth.lg, | |
}; | |
export { minWidth, maxWidth, breakPoint, screenSize }; |