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以上支援)