简体中文(ZH-CN) English(EN) 繁体中文(ZH-TW) 日本語(JA) 한국어(KO) Melayu(MS) Français(FR) Deutsch(DE)
ホームページ > ウェブフロントエンド > CSSチュートリアル > 本文

たった 1 行のインストールで Web をレスポンシブにしましょう?投稿者を募集しています！

Barbara Streisand
リリース： 2024-11-06 09:04:02
オリジナル
431 人が閲覧しました

最近、タイトルに記載されている使命を持つ NPM パッケージを公開しました。それは、たった 1 行のコードでプロジェクトの応答性を高めるというものです!

レスポンシブアプリ [ベータ版] パッケージを共有します

この技術の実験と開発には数年かかりました。現在の技術は次のとおりです。

  1. (1) 画面解像度と (2) ブラウザのフォント サイズ (Web アクセシビリティのため) を考慮して、HTML タグのフォント サイズを (JS スクリプトを介して) 動的に設定します
  2. ピクセル定義を rem に前処理します
  3. モバイル画面の要素を一元化する (実験的機能)

結果は、すべての画面解像度ですべての要素の比率と相対サイズが同じになります:

Let’s make the web responsive with just one installation line? I’m looking for contributors!

たとえばロールアップを使用した 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 既存のレスポンシブ ルールがある場合は、それらをバイパスします
  2. 複数の解像度でインターフェースを確認してください
  3. それがどのように機能したか教えてください:)

以上がたった 1 行のインストールで Web をレスポンシブにしましょう?投稿者を募集しています！の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。

ソース：dev.to
前の記事：ホバー時のボタンの色を変更する方法: 何が問題で、その修正方法は何ですか? 次の記事：ビューポートの上部からアンカー リンクをオフセットするにはどうすればよいですか?
このウェブサイトの声明
この記事の内容はネチズンが自主的に寄稿したものであり、著作権は原著者に帰属します。このサイトは、それに相当する法的責任を負いません。盗作または侵害の疑いのあるコンテンツを見つけた場合は、admin@php.cn までご連絡ください。
著者別の最新記事
最新の問題
function_exists() はカスタム関数を決定できません Function test () {return true;} if (function_exists ('test')) {echo "テストは関数です";
から 2024-04-29 11:01:01
0
2
1771
Google Chromeのモバイル版を表示する方法 こんにちは、先生、Google Chrome をモバイル版に変更するにはどうすればよいですか?
から 2024-04-23 00:22:19
0
10
1908
子ウィンドウは親ウィンドウを操作しますが、出力は応答しません。 最初の 2 つの文は実行可能ですが、最後の文は実装できません。
から 2024-04-19 15:37:47
0
1
1626
親ウィンドウには出力がありません document.onclick = function(){ window.opener.document.write('私は子ウィンドウの出力です');
から 2024-04-18 23:52:34
0
1
1536
CSS マインド マッピングに関するコースウェアはどこにありますか? コースウェア
から 2024-04-16 10:10:18
0
0
1571
関連トピック
詳細>
人気のおすすめ
人気のチュートリアル
詳細>
関連するチュートリアル
人気のおすすめ
最新のコース
最新のダウンロード
詳細>
ウェブエフェクト
公式サイト
サイト素材
フロントエンドテンプレート
私たちについて 免責事項 Sitemap
PHP中国語ウェブサイト：福祉オンライン PHP トレーニング，PHP 学習者の迅速な成長を支援します！