现在越来越多的网站在移动端上也有了自己的应用，而一些新型的移动应用开发框架也慢慢的走进大众的视野。uniapp就是这样一个受欢迎的移动应用开发框架之一，它完全基于vue.js和微信小程序组件库开发，可以同时在多个平台上运行。但是在实际开发中，uniapp的默认网页样式可能会让开发者不满意，本文就来讲解一下如何去除uniapp的默认网页样式。
第一步：清除UniApp默认CSS样式
UniApp的默认CSS样式都在它的基础样式表文件中，我们可以通过引入一个自定义的CSS文件来重写其中的部分样式。具体操作如下：
- 在项目的static目录下新建一个名为
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样式来进一步美化网页。
- 在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样式，这样才可以免除后期开发中的一些麻烦。
- 在项目的static目录下新建一个名为
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文件。跟之前一样，在template标签内加入以下代码：
<style lang="scss" rel="stylesheet"> @import "../static/common.scss"; </style>
总结
通过上述的步骤，我们可以在UniApp开发中去除默认的网页样式，实现网页的个性化设计。其中，我们通过清除全部元素的默认样式，从底部开始自定义样式；并通过reset全局CSS样式，解决了一些不同平台之间样式不兼容的问题。最终，我们获得了一个更加精致、美观的UniApp应用。
