声明
元のコンテンツは簡単な本から複製され、著者はSquidbrother、リンクアドレスはhttps://www.jianshu.com/p/eb3e505238d1です。
序文
最近、私はNodeJs + VueJs（Express + ElementUI）フルスタック開発king glory携帯電話の公式Webサイトと管理の背景を実行するために練習していました-3.8章 -スプライトを使用する場合、オンライン画像スプライトを使用してビデオ内ですばやく配置ツールspritecowの公式Webサイトはhttps://www.spritecow.comです。スプライトの画像全体をアップロードすることにより、背景画像のスプライトの背景サイズ、幅、高さ、背景位置、およびその他の情報を取得できます。
スプライト牛は非常に強力なCssスプライトツールで、背景画像内のスプライト画像の背景の位置、幅、高さを取得し、簡単にコピーできます。 CSSスタイルでは、マウスでスワイプすることでスプライトの座標を直接取得でき、非常に便利です。スプライトダイアグラムはゲームプログラミングで非常に一般的です。以前にCocos2d-xゲームエンジンを学習したとき、スプライトの概念がありました。
以下に示すように：
公式住所
手順を使用
1.スプライト画像をアップロードする
2.ズーム率を設定する
そのため、Appleの網膜画面の、額縁まだ漠然とを確保するために、通常は二回設計を必要とする
例えばiphone6に
375px幅の設計は、一般的に携帯電話で必要
とiPhoneの必要性750px幅の設計
、圧縮幅を絵が細か提示向上し
、特定のオペレーション：
-
2-1
背景サイズ：375px自動
次いで特定PXは、フォントサイズのボディ割合のレムに変換される
背景サイズ：REM自動XXX -
2-2。ツールのズーム比、背景サイズの比率を同じ式で設定し、同じに保つ
以下は、MACコンピューターでの使用のスクリーンショットです
。以下は、Windows10システムの使用例です。GoogleのChormeブラウザーがhttps://www.spritecow.com公式Webサイトを開き、王の栄光の写真をアップロードし、破壊ステーションを選択しますスプライト画像のスクリーンショットを以下に示します。
3.ツールの公式Webサイトで、円（ファジーサークル、ピクセルラッソが表示されます。正確である必要はありません）作業領域、アイコンを配置します
背景の位置、幅、高さを順番に取得し、対応するレムに変換して、独自のプロジェクトcssに貼り付けます
4. pxとremの迅速な切り替えを容易にするために、Vscodeでpxを検索してremにインストールできます。
インストール後、プラグイン設定、基本的なフォントサイズサイズを入力、CSSスタイルシートファイルで、カーソルを使用して選択し、キーボードのalt + zを押してpxまたはremに切り替えます。
関連情報
