2.1.0 • Published 3 years ago
@sygnas/mediaquery v2.1.0
syg-mediaquery
Javascript でメディアクエリーの管理を簡単にする。
Description
メディアクエリーを登録して、チェックを簡単にするもの。
History
- 2021.11.27 ver.2.1.0
- ブラウザ用を削除
- 出力先を見直し
- メソッド名一部変更
- 2021.11.22 ver.2.0.0
- TypeScript で書き直し。
- メソッド名を全て変更。
Usage
Install
npm install --save @sygnas/mediaquery
JavaScript
import Mediaquery from '@sygnas/mediaquery';
// メディアクエリーを設定
Mediaquery.addMedia('pc', 'screen and (min-width: 801px)');
Mediaquery.addMedia('sp', 'screen and (max-width: 800px)');
if (Mediaquery.isMedia('pc')) {
console.log("メディアクエリー PC に該当");
}
console.log(Mediaquery.getHitMedias());
// ["pc"]
Methods
getMedias
static getMedias(): object
メディアクエリーとして指定した文字列を取得。
addMedia
static addMedia(name: string, value: string): void
メディアクエリーの名前と文字列を登録する。
Mediaquery.addMedia('pc', 'screen and (min-width: 801px)');
引数 | 型 | 説明 |
---|---|---|
name | String | メディアクエリー名 |
value | String | クエリー文字列 |
removeMedia
static removeMedia(name: string): void
メディアクエリーを削除する。
Mediaquery.removeMedia('pc');
引数 | 型 | 説明 |
---|---|---|
name | String | メディアクエリー名 |
isMedia
static isMedia(name: string): boolean
指定したメディアクエリー名に該当するかを判定。
const is_pc = Mediaquery.isMedia('pc');
引数 | 型 | 説明 |
---|---|---|
name | String | 登録したメディアクエリー名 |
戻り値
指定したメディアクエリー名に該当するなら true
。
それ以外は false
を返す。
getHitMedias
static getHitMedias(): string[]
該当するメディアクエリー名の配列を取得。
const hit_medias = Mediaquery.getHitMedias();
License
MIT