@1natsu/handy-media-query 中文文档教程

Question

一种方便的 JavaScript CSS 媒体查询方法

只需返回媒体查询字符串。

一起使用……（例如样式化组件、情感……）

Table of contents

• Table of contents
• ✨ Getting Started
• Usage
• Simple
• Realistic example
• maybe as usufull
• APIs
• Default exported object
  • #min(minPx, [opts])
  • #max(maxPx, [opts])
  • #between(minPx, maxPx, [opts])
  • DefaultOptions
• Named exported methods
  • composeMediaQuery(userSelfMediaQuery)
  • pxToEm(value, ratio)
  • pxToRem(value, ratio)
• Running the tests
• Contributing
• Versioning
• ©️ License
• Acknowledgments
• Inspiration

✨ Getting Started

有机会与 yarn

yarn add @1natsu/handy-media-query

或

npm

npm install @1natsu/handy-media-query

Usage

Simple

import mq from '@1natsu/handy-media-query'

mq.max(480) // "@media all and (max-width: 30em)"
mq.between(481,767) // "@media all and (min-width: 30.0625em) and (max-width: 47.9375em)"
mq.min(768) // "@media all and (min-width: 48em)"

默认情况下，将传递的 px 转换为 em。

Realistic example

maybe as usufull

mediaQuery.js

import mq, { composeMediaQuery, pxToEm } from '@1natsu/handy-media-query'

const breakpoints = {
  small: 480,
  middle: [481, 767],
  large: 768
}

const mediaQueries = composeMediaQuery({
  small: mq.max(breakpoints.small),
  middle: mq.between(breakpoints.middle[0], breakpoints.middle[1]),
  large: mq.min(breakpoints.large),
  irregular: `@media (min-height: ${pxToEm('680px')}), screen and (orientation: portrait)`
})

export { mediaQueries as mq }

Foo.jsx

作为示例，带有 Styled-components(v4) 的组件文件

import React from 'react'
import styled from "styled-components";
import { mq } from './mediaQuery'


const Foo = ({text}) => <div>{text}</div>

const StyledFoo = styled(Foo)`
  color: blue;
  ${mq.small} {
    color: red;
  }
  ${mq.middle} {
    color: cyan;
  }
  // Local irregular……is also OK
  ${mq.between(1921,3840)} {
    color: pink;
  }
`

APIs

Default exported object

import mq from '@1natsu/handy-media-query'

#min(minPx, [opts])

name	require	type	default	decstiption
minPx	✓	string | number	-	"<number>px" or number(assuming pixels)
options	-	object	DefaultOptions

mq.min(480)
// '@media all and (min-width: 30em)'

mq.min(480, {unit: 'px', mediaType: 'screen'})
// '@media screen and (min-width: 480px)'

#max(maxPx, [opts])

name	require	type	default	decstiption
maxPx	✓	string | number	-	"<number>px" or number(assuming pixels)
options	-	object	DefaultOptions

mq.max(480)
// '@media all and (max-width: 30em)'

mq.max(480, {unit: 'px', mediaType: 'screen'})
// '@media screen and (max-width: 480px)'

#between(minPx, maxPx, [opts])

name	require	type	default	decstiption
minPx	✓	string | number	-	"<number>px" or number(assuming pixels)
maxPx	✓	string | number	-	"<number>px" or number(assuming pixels)
options	-	object	DefaultOptions

mq.between(480,980)
// '@media all and (min-width: 30em) and (max-width: 61.25em)'

mq.between(480, 980, {unit: 'px', mediaType: 'screen'})
// '@media screen and (min-width: 480px) and (max-width: 61.25em)'

DefaultOptions

name	require	type	default	decstiption
unit	-	'em' | 'rem' | 'px'	'em'	Output unit
unitRatio	-	number	16	Unit ratio as a reference of 'em' or 'rem'
mediaType	-	'all' | 'screen' | 'print' | 'speech'	'all'	MDN - Media Query#Media-Types

---

Named exported methods

composeMediaQuery(userSelfMediaQuery)

返回带有 {passed argument object} 的新对象+ {media query methods}

这个函数合并了媒体查询方法 & 与对象一起传递。 因此有必要避免重复的属性名称。

name	require	type	default	decstiption
userSelfMediaQuery	✓	object	-	Object with string media query in value

import { composeMediaQuery } from '@1natsu/handy-media-query'

const mediaQueries = composeMediaQuery({
  small: '@media (min-width: 320px)'
  middle: '@media (min-width: 768px)'
  large: '@media (min-width: 1280px)'
  irregular: `@media (min-height: 400px), screen and (orientation: portrait)`
})

↓↓ 生成的对象的内容如下↓↓

const mediaQueries = {
  small: '@media (min-width: 320px)'
  middle: '@media (min-width: 768px)'
  large: '@media (min-width: 1280px)'
  irregular: '@media (min-height: 400px), screen and (orientation: portrait)'
  min: [Function]
  max: [Function]
  between: [Function]
  …
  …
  …
}

但是，假设像这样的用法 现实的例子

pxToEm(value, ratio)

• Unit converter for px to em

name	require	type	default	decstiption
value	✓	string | number	-	Conversion source px. "<number>px" or number
ratio	-	number	16	Unit ratio as a reference of 'em'

import { pxToEm } from '@1natsu/handy-media-query'

const convertToEm = pxToEm(480, 10)
console.log(convertToEm) // 48em

pxToRem(value, ratio)

• Unit converter for px to rem

name	require	type	default	decstiption
value	✓	string | number	-	Conversion source px. "<number>px" or number
ratio	-	number	16	Unit ratio as a reference of 'rem'

import { pxToRem } from '@1natsu/handy-media-query'

const convertToRem = pxToRem(480, 10)
console.log(convertToRem) // 48rem

Running the tests

Jest。

yarn test

或

npm run test

Versioning

使用 SemVer 进行版本控制。 有关可用版本，请参阅此存储库上的标签。

©️ License

麻省理工学院 © 1natsu172

Acknowledgments

Inspiration

• styled-media-query