@-ui/mq 中文文档教程
@-ui/mq
npm i @-ui/mq
用于将存储的媒体查询和断点添加到 -ui 样式
Quick Start
import mq from '@-ui/mq'
import styles from '@-ui/styles'
const breakpoint = mq({
// 0px
phone: 'only screen and (min-width: 0em)',
// 560px
tablet: 'only screen and (min-width: 35em)',
// 1280px
desktop: 'only screen and (min-width: 80em)',
})
const responsiveBox = styles({
default: `
display: block;
background: #000;
width: 400px;
height: 400px;
`,
big: breakpoint({
default: `
width: 800px;
height: 800px;
`,
desktop: `
width: 1000px;
height: 1000px;
`,
}),
small: `
width: 300px;
height: 300px;
${breakpoint('phone')} {
width: 200px;
height: 200px;
}
`,
})
API
LICENSE
MIT的实用函数
@-ui/mq
npm i @-ui/mq
A utility function for adding stored media queries and breakpoints to -ui styles
Quick Start
import mq from '@-ui/mq'
import styles from '@-ui/styles'
const breakpoint = mq({
// 0px
phone: 'only screen and (min-width: 0em)',
// 560px
tablet: 'only screen and (min-width: 35em)',
// 1280px
desktop: 'only screen and (min-width: 80em)',
})
const responsiveBox = styles({
default: `
display: block;
background: #000;
width: 400px;
height: 400px;
`,
big: breakpoint({
default: `
width: 800px;
height: 800px;
`,
desktop: `
width: 1000px;
height: 1000px;
`,
}),
small: `
width: 300px;
height: 300px;
${breakpoint('phone')} {
width: 200px;
height: 200px;
}
`,
})
API
LICENSE
MIT