PC端和移動APP端CSS樣式初始化

CSS樣式初始化分為PC端和移動APP端

1.PC端：使用Normalize.css

Normalize.css是一種CSS reset的替代方案。

我們創造normalize.css有下面這幾個目的：

• 保護有用的瀏覽器默認樣式而不是完全去掉它們
• 一般化的樣式：為大部分HTML元素提供
• 修復瀏覽器自身的bug並保證各瀏覽器的一致性
• 優化CSS可用性：用一些小技巧
• 解釋代碼：用注釋和詳細的文檔來

Normalize.css支持包括手機瀏覽器在內的超多瀏覽器，同時對HTML5元素、排版、列表、嵌入的內容、表單和表格都進行了一般化。盡管這個項目基於一般化的原則，但我們還是在合適的地方使用了更實用的默認值。

Normalize vs Reset

知道Normalize.css和傳統Reset的區別是非常有價值的。

1. Normalize.css 保護了有價值的默認值

Reset通過為幾乎所有的元素施加默認樣式，強行使得元素有相同的視覺效果。相比之下，Normalize.css保持了許多默認的瀏覽器樣式。這就意味着你不用再為所有公共的排版元素重新設置樣式。當一個元素在不同的瀏覽器中有不同的默認值時，Normalize.css會力求讓這些樣式保持一致並盡可能與現代標准相符合。

2. Normalize.css 修復了瀏覽器的bug

它修復了常見的桌面端和移動端瀏覽器的bug。這往往超出了Reset所能做到的范疇。關於這一點，Normalize.css修復的問題包含了HTML5元素的顯示設置、預格式化文字的font-size問題、在IE9中SVG的溢出、許多出現在各瀏覽器和操作系統中的與表單相關的bug。

可以看以下這個例子，看看對於HTML5中新出現的input類型search，Normalize.css是如何保證跨瀏覽器的一致性的。

/**  * 1. Addresses appearance set to searchfield in S5, Chrome  * 2. Addresses box-sizing set to border-box in S5, Chrome (include -moz to future-proof)  */ input[type="search"] { -webkit-appearance: textfield; /* 1 */ -moz-box-sizing: content-box; -webkit-box-sizing: content-box; /* 2 */ box-sizing: content-box; } /**  * Removes inner padding and search cancel button in S5, Chrome on OS X  */ input[type="search"]::-webkit-search-decoration, input[type="search"]::-webkit-search-cancel-button { -webkit-appearance: none; }

3. Normalize.css 不會讓你的調試工具變的雜亂

使用Reset最讓人困擾的地方莫過於在瀏覽器調試工具中大段大段的繼承鏈，如下圖所示。在Normalize.css中就不會有這樣的問題，因為在我們的准則中對多選擇器的使用時非常謹慎的，我們僅會有目的地對目標元素設置樣式。

4. Normalize.css 是模塊化的

這個項目已經被拆分為多個相關卻又獨立的部分，這使得你能夠很容易也很清楚地知道哪些元素被設置了特定的值。因此這能讓你自己選擇性地移除掉某些永遠不會用到部分（比如表單的一般化）。

5. Normalize.css 擁有詳細的文檔

Normalize.css的代碼基於詳細而全面的跨瀏覽器研究與測試。這個文件中擁有詳細的代碼說明並在Github Wiki中有進一步的說明。這意味着你可以找到每一行代碼具體完成了什么工作、為什么要寫這句代碼、瀏覽器之間的差異，並且你可以更容易地進行自己的測試。

這個項目的目標是幫助人們了解瀏覽器默認是如何渲染元素的，同時也讓人們很容易地明白如何改進瀏覽器渲染。

 

2.移動APP端：

html {
    box-sizing: border-box;
}

/*Yes, the universal selector. No, it isn't slow: https://benfrain.com/css-performance-revisited-selectors-bloat-expensive-styles/*/
* {
    /*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: https://bugs.webkit.org/show_bug.cgi?id=82692*/
    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;
}

*:before,
*:after {
    box-sizing: inherit;
}

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

body,
h1,
h2,
h3,
h4,
h5,
h6,
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*/
em,
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;
}

input,
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 (https://code.google.com/p/chromium/issues/detail?id=560762), 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-inner-spin-button,
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;
}


3.知識擴展
1.-webkit-tap-highlight-color
-webkit-tap-highlight-color:rgba(0,0,0,0);//透明度設置為0，去掉點擊鏈接和文本框對象時默認的灰色半透明覆蓋層(iOS)或者虛框(Android)
-webkit-tap-highlight-color:rgba(255,0,0,0.5);   //利用此屬性，設置touch時鏈接區域高亮為50%的透明紅，只在ios上起作用。android上只要使用了此屬性就表現為邊框。在body上加此屬性，這樣就保證body的點擊區域效果一致了

2.outline：none
(1)在pc端為a標簽定義這個樣式的目的是為了取消ie瀏覽器下點擊a標簽時出現的虛線。ie7及以下瀏覽器還不識別此屬性，需要在a標簽上添加hidefocus="true"
(2)input，textarea{outline:none}  取消chrome下默認的文本框聚焦樣式
(3)在移動端是不起作用的，想要去除文本框的默認樣式可以使用-webkit-appearance，聚焦時候默認樣式的取消是-webkit-tap-highlight-color。看到一些移動端reset文件加了此屬性，其實是多余。

3.-webkit-appearance
-webkit-appearance: none;//消除輸入框和按鈕的原生外觀，在iOS上加上這個屬性才能給按鈕和輸入框自定義樣式 
不同type的input使用這個屬性之后表現不一。text、button無樣式，radio、checkbox直接消失
4.-webkit-user-select
-webkit-user-select: none; // 禁止頁面文字選擇 ，此屬性不繼承，一般加在body上規定整個body的文字都不會自動調整
5.-webkit-text-size-adjust
-webkit-text-size-adjust: none; //禁止文字自動調整大小(默認情況下旋轉設備的時候文字大小會發生變化)，此屬性也不繼承，一般加在body上規定整個body的文字都不會自動調整 
6.-webkit-touch-callout
-webkit-touch-callout:none; // 禁用長按頁面時的彈出菜單(iOS下有效) ,img和a標簽都要加
7.-webkit-overflow-scrolling
-webkit-overflow-scrolling:touch;// 局部滾動(僅iOS 5以上支持)