Jetzt haben immer mehr Websites ihre eigenen Anwendungen auf dem mobilen Endgerät, und einige neue Frameworks für die Entwicklung mobiler Anwendungen geraten langsam in den Fokus der Öffentlichkeit. UniApp ist eines dieser beliebten Frameworks für die Entwicklung mobiler Anwendungen. Es basiert vollständig auf Vue.js und der WeChat-Applet-Komponentenbibliothek und kann auf mehreren Plattformen gleichzeitig ausgeführt werden. In der tatsächlichen Entwicklung kann der Standard-Webseitenstil von UniApp jedoch dazu führen, dass Entwickler unzufrieden sind. In diesem Artikel wird erläutert, wie der Standard-Webseitenstil von UniApp entfernt wird.
Schritt 1: Standard-CSS-Stile von UniApp löschen
Die Standard-CSS-Stile von UniApp befinden sich in der Basis-Stylesheet-Datei. Wir können einige der Stile überschreiben, indem wir eine benutzerdefinierte CSS-Datei einführen. Die spezifischen Vorgänge sind wie folgt:
reset.css
im statischen Verzeichnis des Projekts. 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; } /*自定义的其他样式*/
该段代码是通过重写HTML所有元素的默认值来清空UniApp的默认CSS样式(其中包括margin,padding,border等属性),相当于从底层开始搭建自己的样式。我们还可以在该段代码的下方加入其他自定义的CSS样式来进一步美化网页。
<style lang="scss" rel="stylesheet"> @import "../static/reset.css"; </style>
这就是通过在App.vue组件中引用外部CSS文件的方式来清除UniApp默认CSS样式。在这里我们采用了import的方式,以免在HTML文件中重复加入样式文件。
第二步:reset全局CSS样式
在清空了UniApp默认CSS样式后,我们需要再加入一些reset全局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); } /*自定义的其他样式*/
<style lang="scss" rel="stylesheet"> @import "../static/common.scss"; </style>
common.scss
im statischen Verzeichnis des Projekts. 🎜🎜Schreiben Sie den folgenden Inhalt in die Datei: 🎜🎜rrreee🎜Dieser CSS-Stil kann einige Stilinkonsistenzen zwischen verschiedenen Plattformen beheben. Auf iOS- und Android-Plattformen sind beispielsweise die abgerundeten Ecken der Eingabefelder unterschiedlich. Durch die Verwendung dieses Codes kann die Konsistenz der Eingabefelder auf verschiedenen Plattformen gewahrt bleiben. Gleichzeitig zielt dieser Code auch auf einige häufig verwendete UI-Komponenten ab, beispielsweise Schaltflächen. Es kann einige Inkonsistenzen in den Stilen auf verschiedenen Plattformen beheben. 🎜🎜🎜Referenzieren Sie diese CSS-Datei in der App.vue-Komponente. Fügen Sie wie zuvor den folgenden Code zum Vorlagen-Tag hinzu: 🎜🎜rrreee🎜Summary🎜🎜Durch die oben genannten Schritte können wir den Standard-Webseitenstil in der UniApp-Entwicklung entfernen und ein personalisiertes Design der Webseite erreichen. Unter anderem haben wir die Standardstile aller Elemente gelöscht und die Stile von Grund auf angepasst. Außerdem haben wir die globalen CSS-Stile zurückgesetzt, um einige Stilinkompatibilitätsprobleme zwischen verschiedenen Plattformen zu beheben. Am Ende haben wir eine verfeinerte und schönere UniApp-Anwendung erhalten. 🎜Das obige ist der detaillierte Inhalt vonSo entfernen Sie den Webseitenstil in Uniapp. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!