レスポンシブデザインや顧客のディスプレイ幅に頭を悩ませず
ただひたすら デザインカンプ に忠実に
HTMLコーディングすることだけに集中するためのJSモジュールです
以下のコマンドでインストールします
npm install liquidly
プロジェクトルートに
liquidly.js
というファイルが生成されるので、自由なディレクトリに配置してお使いください。
あるいは、CDNからお使いください。@以下は可能な限り最新バージョンを指定してください。
<script src="https://unpkg.com/liquidly@0.0.4/dist/index.js"</script>
最新バージョンは https://www.npmjs.com/package/liquidly から確認可能です。
ヘッドタグ末尾にスクリプトタグを挿入し、初期化関数を呼び出します。
<head>
・
・
・
<script src="/path/to/liquidly.js"></script>
<script>
liquidly.init({
"pcCompSize": "1920",
"spCompSize": "750",
"breakPoint": "768"
})
</script>
</head>
初期化関数liquidly.initへ渡すオプションは以下を用意しています
| プロパティ名 | 初期値 | 説明 |
|---|---|---|
| body | ".lq__body" | ウィンドウ幅に応じて可変する要素 |
| elementFixed | ".lq__element--fixed" | 疑似fixed要素 |
| pcCompSize | 1920 | PCカンプの幅(px) |
| spCompSize | 750 | SPカンプの幅(px) |
| breakPoint | 768 | PCカンプ⇔SPカンプ が切り替わるウィンドウ幅 (px) |
| fadeinDuration | 200 | htmlのopacity0から１への推移時間(ミリ秒) |
| resizeTimeout | 300 | リサイズイベントの発動スパン（ミリ秒）※1 |
| scrollEndTimeout | 200 | スクロール終了イベントの発動スパン（ミリ秒）※2 |
| delay | 0 | 初期化関数の遅延実行（ミリ秒） |
※1 スクリプティング負荷を押さえるためリサイズイベントを間引きしています
※2 .lq__element--fixed要素は、iPad Safariの慣性スクロールには追従できないため、iPad Safariの時のみ、スクロール開始でopacity:0;pointer-events:none; 終了イベントでopacity:1;pointer-events:auto; としています
以下の関数を用意しています。グローバルスコープに定義していますので、footer等で読み込んだ他のスクリプト内でも使用可能です。
@returns float
現在のウィンドウ幅における、PC/SPカンプサイズからの拡大・縮小率を取得します
@returns float
現在のウィンドウ幅における、PC/SPカンプサイズからの拡大・縮小率の逆数を取得します
（ 1/getScale() と等価であるが、除算はオーバーヘッドが大きい為、予め関数化）
@returns boolean
現在のウィンドウ幅が、ブレイクポイント以下であれば true、ブレイクポイントより大きければ falseを返す
.lq__bodyはHTMLソース内のただ１つの要素に適用できます。通常、bodyタグ直下のラッパーに指定することを推奨します。 <body>
<div class="lq__body">
・
・
・
</div>
</body>
.lq__bodyのリサイズにはCSS transformプロパティを使用しています。.lq__body内ではposition:fixedやstickyが無効になります。.lq__body の外側に置いてください。 <body>
<div class="lq__body">
・
・
・
</div>
<div class="preloader" style="position:fixed;">
</body>
あるいは、header等の追従要素もリサイズ可能にしたい場合は、疑似的なposition:fixed効果を提供するクラス.lq__element--fixedを用意しています。
<body>
<div class="lq__body">
<header class="lq__element--fixed"></header>
・
・
</div>
</body>
opacity:0を指定しておくことを推奨します。html{
opacity: 0;
filter: alpha(opacity=0);
}
FAQs
No description
The npm package liquidly receives a total of 1 weekly downloads. As such, liquidly popularity was classified as not popular.
We found that liquidly demonstrated a not healthy version release cadence and project activity because the last version was released a year ago. It has 1 open source maintainer collaborating on the project.
Did you know?
Socket for GitHub automatically highlights issues in each pull request and monitors the health of all your open source dependencies. Discover the contents of your packages and block harmful activity before you install or update your dependencies.
Security News
Research
Socket researchers have discovered malicious npm packages targeting crypto developers, stealing credentials and wallet data using spyware delivered through typosquats of popular cryptographic libraries.
Security News
Socket's package search now displays weekly downloads for npm packages, helping developers quickly assess popularity and make more informed decisions.
Security News
A Stanford study reveals 9.5% of engineers contribute almost nothing, costing tech $90B annually, with remote work fueling the rise of "ghost engineers."