uniappでWebページのスタイルを削除する方法

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

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

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

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

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 ページをさらに美しくすることもできます。

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

<style lang="scss" rel="stylesheet">
  @import "../static/reset.css";
</style>

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

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

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

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

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 コンポーネントもターゲットにしています。さまざまなプラットフォームでのスタイルの不一致を解決できます。

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

<style lang="scss" rel="stylesheet">
  @import "../static/common.scss";
</style>

まとめ

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

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