APP reset.css


各种CSS reset 代码,甚至有人专门做了一个叫css reset 的网站,专门收集这些代码,提供下载,但大部分的CSS reset都是在说PC上的CSS reset,有没有一个适合用于wap 或者APP的reset,今天分享一款写得很好的APP reset.css

html {
    box-sizing: border-box;

/*Yes, the universal selector. No, it isn't slow:*/
* {
    /*This prevents users being able to select text. Stops long presses in iOS bringing up copy/paste UI for example. Note below we specifically switch user-select on for inputs for the sake of Safari. Bug here:*/
    user-select: none;
    /*This gets -webkit specific prefix as it is a non W3C property*/
    -webkit-tap-highlight-color: rgba(255,255,255,0);
    /*Older Androids need this instead*/
    -webkit-tap-highlight-color: transparent;
    /* Most devs find border-box easier to reason about. However by inheriting we can mix box-sizing approaches.*/
    box-sizing: inherit;

*:after {
    box-sizing: inherit;

/* Switching user-select on for inputs and contenteditable specifically for Safari (see bug link above)*/
[contenteditable] {
	user-select: text;

p {
    /*We will be adding our own margin to these elements as needed.*/
    margin: 0;
    /*You'll want to set font-size as needed.*/
    font-size: 1rem;
    /*No bold for h tags unless you want it*/
    font-weight: 400;

a {
    text-decoration: none;
    color: inherit;

/*No bold for b tags by default*/
b {
    font-weight: 400;

/*Prevent these elements having italics by default*/
i {
    font-style: normal;

/*Mozilla adds a dotted outline around a tags when they receive tab focus. This removes it. Be aware this is a backwards accessibilty step!*/
a:focus {
    outline: 0;

fieldset {
    appearance: none;
    border: 0;
    padding: 0;
    margin: 0;
    /*inputs and fieldset defaults to having a min-width equal to its content in Chrome and Firefox (, we may not want that*/
    min-width: 0;
    /*Reset the font size and family*/
    font-size: 1rem;
    font-family: inherit;

/* For IE, we want to remove the default cross ('X') that appears in input fields when a user starts typing - Make sure you add your own! */
input::-ms-clear {
    display: none;

/*This switches the default outline off when an input receives focus (really important for users tabbing through with a keyboard) so ensure you put something decent in for your input focus instead!!*/
input:focus {
    outline: 0;

input[type="number"] {
    /*Mozilla shows the spinner UI on number inputs unless we use this:*/
    -moz-appearance: textfield;

/*Removes the little spinner controls for number type inputs (WebKit browsers/forks only)*/
input[type="number"]::-webkit-outer-spin-button {
    appearance: none;

/*SVG defaults to inline display which I dislike*/
svg {
    display: inline-flex;

img {
    /*Make images behave responsively. Here they will scale up to 100% of their natural size*/
    max-width: 100%;
    /*Make images display as a block (UA default is usually inline)*/
    display: block;


-webkit-tap-highlight-color: rgba(255,255,255,0);




  • 回复「小抄」,领取Vue、JavaScript 和 WebComponent 小抄 PDF
  • 回复「Vue脑图」获取 Vue 相关脑图
  • 回复「思维图」获取 JavaScript 相关思维图
  • 回复「简历」获取简历制作建议
  • 回复「简历模板」获取精选的简历模板
  • 回复「加群」进入500人前端精英群
  • 回复「电子书」下载我整理的大量前端资源,含面试、Vue实战项目、CSS和JavaScript电子书等。
  • 回复「知识点」下载高清JavaScript知识点图谱

每日分享有用的前端开发知识,加我微信:caibaojian89 交流