uniapp怎麼去除網頁樣式

現在越來越多的網站在行動端上也有了自己的應用，而一些新型的行動應用開發框架也慢慢的走進大眾的視野。 UniApp就是這樣一個受歡迎的行動應用開發框架之一，它完全基於Vue.js和微信小程式元件庫開發，可以同時在多個平台上運作。但在實際開發中，UniApp的預設網頁樣式可能會讓開發者不滿意，本文就來說明如何移除UniApp的預設網頁樣式。

第一步：清除UniApp預設CSS樣式

UniApp的預設CSS樣式都在它的基礎樣式表檔案中，我們可以透過引入一個自訂的CSS檔案來重寫其中的部分樣式。具體操作如下：

1. 在專案的static目錄下新建一個名為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的檔案。
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檔案。跟之前一樣，在template標籤內加入以下程式碼：

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

總結

#透過上述的步驟，我們可以在UniApp開發中移除預設的網頁樣式，實現網頁的個性化設計。其中，我們透過清除全部元素的預設樣式，從底部開始自訂樣式；並透過reset全域CSS樣式，解決了一些不同平台之間樣式不相容的問題。最終，我們獲得了一個更精緻、美觀的UniApp應用程式。

以上是uniapp怎麼去除網頁樣式的詳細內容。更多資訊請關注PHP中文網其他相關文章！