ホームページ >ウェブフロントエンド >CSSチュートリアル >たった 1 行のインストールで Web をレスポンシブにしましょう?投稿者を募集しています！
たった 1 行のインストールで Web をレスポンシブにしましょう?投稿者を募集しています！
- Barbara Streisandオリジナル
- 2024-11-06 09:04:02505ブラウズ
最近、タイトルに記載されている使命を持つ NPM パッケージを公開しました。それは、たった 1 行のコードでプロジェクトの応答性を高めるというものです!
レスポンシブアプリ [ベータ版] パッケージを共有します
この技術の実験と開発には数年かかりました。現在の技術は次のとおりです。
- (1) 画面解像度と (2) ブラウザのフォント サイズ (Web アクセシビリティのため) を考慮して、HTML タグのフォント サイズを (JS スクリプトを介して) 動的に設定します
- ピクセル定義を rem に前処理します
- モバイル画面の要素を一元化する (実験的機能)
結果は、すべての画面解像度ですべての要素の比率と相対サイズが同じになります:
たとえばロールアップを使用した 1 行のインストールの場合:
import responsive from 'rollup-plugin-responsive-app'
export default {
…
plugins: [
…,
// Last plugin on the list
responsive()
],
};
または、ブラウザにバンドルされたバージョンをページに配置します:
<head>
<script src="https://cdn.jsdelivr.net/npm/responsive-app@1.0.7-beta.0/dist/browser-bundle.min.js"></script>
</head>
ここでの主な目的は、応答性にまったく対処する必要がなく、インターフェイスがすべての画面解像度で適切に表示されることを信頼するだけで、新しいプロジェクトを作成するときに時間を節約することです。素晴らしいですね?
そこで、このベータ版をリリースした後、サポートと貢献者を探しています。当初の考えは、このパッケージをさまざまなコンテキスト、プロジェクト、フレームワーク (React、Angular、Vue など) でテストして、プロセスを可能な限り包括的にすることです。
この挑戦に挑戦するのは誰ですか?テスト手順は次のとおりです:
- 新しいアプリまたは既存のアプリにスクリプト タグをインストールまたは追加します 1.1 既存のレスポンシブ ルールがある場合は、それらをバイパスします
- 複数の解像度でインターフェースを確認してください
- それがどのように機能したか教えてください:)
以上がたった 1 行のインストールで Web をレスポンシブにしましょう?投稿者を募集しています！の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。
声明：
この記事の内容はネチズンが自主的に寄稿したものであり、著作権は原著者に帰属します。このサイトは、それに相当する法的責任を負いません。盗作または侵害の疑いのあるコンテンツを見つけた場合は、admin@php.cn までご連絡ください。