Minified and Simplified include-media with CSS-in-JS
when you style with css-in-js (emotion, styled-component) you can perfectly and easily deal with responsive design with this css-in-js-media
which is similar with include-media
npm install css-in-js-media
import media from "css-in-js-media";
- example in
code-sandbox-link
: https://codesandbox.io/embed/k28q2nv2w7
smallPhone: 320
phone: 375
tablet: 768
desktop: 1024
largeDesktop: 1440
with css-in-js library (ex: emotion.js , styled-component)
- example with
emotion.js
import media from "css-in-js-media";
export const exampleClass = css`
color: red;
${media(">desktop")} {
font-size: 15px;
}
${media("<=desktop", ">tablet")} {
font-size: 20px;
}
${media("<=tablet", ">phone")} {
font-size: 25px;
}
${media("<=phone")} {
font-size: 30px;
}
`;
- example with
styled-component
import media from "css-in-js-media";
const exampleClass = styled.h1`
color: red;
${media(">desktop")} {
font-size: 15px;
}
${media("<=desktop", ">tablet")} {
font-size: 20px;
}
${media("<=tablet", ">phone")} {
font-size: 25px;
}
${media("<=phone")} {
font-size: 30px;
}
`;
리μ‘νΈ κ°λ°μ νλ©΄μ styled-componentsλ emotion.jsκ°μ css-in-js κΈ°λ²μ νμ©ν΄ λ°μν λμμ ν λ λΆνΈν μ μ΄ λ§μλλ°μ, scssλ₯Ό νμ©ν λλ include-media κ°μ λΌμ΄λΈλ¬λ¦¬λ₯Ό ν΅ν΄ μ§κ΄μ μΌλ‘ λ°μνλμμ ν μ μμλ μ μμ μ°©μν΄ μ΄λ₯Ό css-in-js κΈ°λ²λ€(styled-component, emotion.js) μμλ μ¬μ©ν μ μλλ‘ λ§λ λΌμ΄λΈλ¬λ¦¬ μ λλ€.