Comment supprimer le style de page Web dans Uniapp

Maintenant, de plus en plus de sites Web ont leurs propres applications sur le terminal mobile, et certains nouveaux cadres de développement d'applications mobiles apparaissent lentement aux yeux du public. UniApp est l'un de ces frameworks de développement d'applications mobiles populaires. Il est entièrement développé sur la base de la bibliothèque de composants d'applet Vue.js et WeChat et peut fonctionner sur plusieurs plates-formes en même temps. Cependant, dans le développement réel, le style de page Web par défaut d'UniApp peut mécontenter les développeurs. Cet article explique comment supprimer le style de page Web par défaut d'UniApp.

Étape 1 : Effacer les styles CSS par défaut d'UniApp

Les styles CSS par défaut d'UniApp se trouvent dans son fichier de feuille de style de base. Nous pouvons remplacer certains styles en introduisant un fichier CSS personnalisé. Les opérations spécifiques sont les suivantes :

1. Créez un nouveau fichier nommé reset.css dans le répertoire statique du projet. 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;
}
/*自定义的其他样式*/

该段代码是通过重写HTML所有元素的默认值来清空UniApp的默认CSS样式（其中包括margin，padding，border等属性），相当于从底层开始搭建自己的样式。我们还可以在该段代码的下方加入其他自定义的CSS样式来进一步美化网页。

3. 在App.vue组件中引用该CSS文件。在template标签内加入以下代码：

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

这就是通过在App.vue组件中引用外部CSS文件的方式来清除UniApp默认CSS样式。在这里我们采用了import的方式，以免在HTML文件中重复加入样式文件。

第二步：reset全局CSS样式

在清空了UniApp默认CSS样式后，我们需要再加入一些reset全局CSS样式，这样才可以免除后期开发中的一些麻烦。

1. 在项目的static目录下新建一个名为common.scss
Écrivez le contenu suivant dans ce fichier :

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);
   }
   /*自定义的其他样式*/

Ce code efface le style CSS par défaut d'UniApp (qui inclut la marge, le remplissage, la bordure et d'autres attributs) en réécrivant les valeurs par défaut​​de tous les éléments HTML, ce qui est équivalent à partir de La couche inférieure commence à construire son propre style. Nous pouvons également ajouter d'autres styles CSS personnalisés sous ce code pour embellir davantage la page Web.

Référencez ce fichier CSS dans le composant App.vue. Ajoutez le code suivant dans la balise de modèle :

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

Il s'agit d'effacer le style CSS par défaut d'UniApp en référençant le fichier CSS externe dans le composant App.vue. Ici, nous utilisons la méthode d'importation pour éviter d'ajouter à plusieurs reprises des fichiers de style au fichier HTML.

Étape 2 : Réinitialiser les styles CSS globaux

Après avoir effacé les styles CSS par défaut d'UniApp, nous devons ajouter des styles CSS globaux réinitialisés, afin d'éviter certains problèmes lors du développement ultérieur. 🎜🎜🎜Créez un nouveau fichier nommé common.scss dans le répertoire statique du projet. 🎜🎜Écrivez le contenu suivant dans le fichier : 🎜🎜rrreee🎜Ce style CSS peut résoudre certaines incohérences de style entre différentes plateformes. Par exemple, sur les plateformes iOS et Android, les coins arrondis des zones de saisie sont différents. L'utilisation de ce code permet de maintenir la cohérence des zones de saisie sur différentes plateformes. Dans le même temps, ce code cible également certains composants d’interface utilisateur couramment utilisés, tels que les boutons. Cela peut résoudre certaines incohérences dans les styles sur différentes plates-formes. 🎜🎜🎜Référencez ce fichier CSS dans le composant App.vue. Comme auparavant, ajoutez le code suivant à la balise du modèle : 🎜🎜rrreee🎜Résumé🎜🎜Grâce aux étapes ci-dessus, nous pouvons supprimer le style de page Web par défaut dans le développement UniApp et obtenir une conception personnalisée de la page Web. Parmi eux, nous avons effacé les styles par défaut de tous les éléments, personnalisé les styles depuis le bas et réinitialisé les styles CSS globaux pour résoudre certains problèmes d'incompatibilité de style entre différentes plates-formes. Au final, nous avons obtenu une application UniApp plus raffinée et plus belle. 🎜

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!