uniappでWebページのスタイルを削除する方法-uni-app-php.cn

現在、モバイル端末上に独自のアプリケーションを搭載する Web サイトがますます増えており、いくつかの新しいモバイルアプリケーション開発フレームワークが徐々に世間の注目を集めるようになりました。 UniApp は、そのような人気のあるモバイルアプリケーション開発フレームワークの 1 つで、完全に Vue.js と WeChat アプレットコンポーネントライブラリに基づいて開発されており、複数のプラットフォームで同時に実行できます。しかし、実際の開発では、UniApp のデフォルトの Web ページスタイルが開発者に不満をもたらす可能性があるため、この記事では UniApp のデフォルトの Web ページスタイルを削除する方法について説明します。

ステップ 1: UniApp のデフォルト CSS スタイルをクリアする

UniApp のデフォルト CSS スタイルは、その基本スタイルシートファイルにあります。カスタム CSS ファイルを導入することで、それらをオーバーライドできます。具体的な操作は次のとおりです。

プロジェクトの静的ディレクトリにreset.cssという名前の新しいファイルを作成します。
このファイルに次の内容を書き込みます:

html, body, div, span, applet, object, iframe,h1, h2, h3, h4, h5, h6, p, blockquote, pre,a, abbr, acronym, address, big, cite, code,del, dfn, em, font, img, ins, kbd, q, s, samp,small, strike, strong, sub, sup, tt, var,b, u, i, center,dl, dt, dd, ol, ul, li,fieldset, form, label, legend,table, caption, tbody, tfoot, thead, tr, th, td,article, aside, canvas, details, embed,figure, figcaption, footer, header, hgroup,menu, nav, output, ruby, section, summary,time, mark, audio, video{ margin: 0; padding: 0; border: 0; font-size: 100%; font: inherit; vertical-align: baseline; } /*自定义的其他样式*/

ログイン後にコピー

このコードは、UniApp のデフォルトの CSS スタイル (マージン、パディング、ボーダー、その他の属性を含む) をクリアします。これは、独自の CSS スタイルを作成するのと同じです。下から見たスタイル。このコードの下に他のカスタマイズされた CSS スタイルを追加して、Web ページをさらに美しくすることもできます。

App.vue コンポーネントの CSS ファイルを参照します。テンプレートタグに次のコードを追加します。

ログイン後にコピー

これは、App.vue コンポーネントの外部 CSS ファイルを参照することにより、UniApp のデフォルト CSS スタイルをクリアします。ここでは、スタイルファイルを HTML ファイルに繰り返し追加することを避けるためにインポートメソッドを使用します。

ステップ 2: グローバル CSS スタイルをリセットする

UniApp のデフォルト CSS スタイルをクリアした後、後の開発での問題を回避するために、リセットされたグローバル CSS スタイルを追加する必要があります。

プロジェクトの静的ディレクトリにcommon.scssという名前の新しいファイルを作成します。
このファイルに次の内容を記述します:

html, body { height: 100%; min-height: 100%; } body { color: #333; font-size: 15px; font-family: "Helvetica Neue", Helvetica, Arial, sans-serif; background-color: #fff; } input[type="text"], input[type="number"], input[type="password"] { -webkit-appearance: none; -webkit-border-radius: 0; } input[type="submit"], input[type="button"], button { border: none; outline: none; background-color: tranparent; cursor: pointer; -webkit-appearance: none; -webkit-tap-highlight-color: rgba(0, 0, 0, 0); } /*自定义的其他样式*/

ログイン後にコピー

この CSS スタイルは、異なるプラットフォーム間でのスタイルの不一致の問題を解決できます。たとえば、iOS と Android プラットフォームでは、入力ボックスの角の丸さが異なりますが、このコードを使用することで、異なるプラットフォームでも入力ボックスの一貫性を維持できます。同時に、このコードはボタンなどの一般的に使用される UI コンポーネントもターゲットにしています。さまざまなプラットフォームでのスタイルの不一致を解決できます。

App.vue コンポーネントの CSS ファイルを参照します。前と同様に、次のコードをテンプレートタグに追加します。

ログイン後にコピー

まとめ

上記の手順により、UniApp 開発でデフォルトの Web ページスタイルを削除し、UniApp の個性を実現できます。ウェブページのデザイン。その中で、すべての要素のデフォルトスタイルをクリアし、スタイルを下からカスタマイズし、グローバル CSS スタイルをリセットして、異なるプラットフォーム間でのスタイルの非互換性の問題を解決しました。最終的に、より洗練された美しい UniApp アプリケーションが完成しました。

以上がuniappでWebページのスタイルを削除する方法の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。