1.移動端開發視窗體的加入
h5端開發以下這段話是必須配置的
<meta name="viewport" content="width=device-width, initial-scale=1, user-scalable=no"> 其他相關配置内容例如以下：
- width viewport 寬度(數值/device-width)
- height viewport 高度(數值/device-height)
- initial-scale 初始縮放比例
- maximum-scale 最大縮放比例
- minimum-scale 最小縮放比例
- user-scalable 是否同意使用者縮放(yes/no)
- minimal-ui iOS 7.1 beta 2 中新增屬性（注意：iOS8 中已經删除），能夠在頁面載入時最小化上下狀态欄。
2.媒體查詢的改進
之前在做移動端開發的時候，為了适配多螢幕。
使用的是
rem
機關。
這個時候就須要依據螢幕的尺寸來來動态的設定根節點
html
的
font-size
值。這樣能夠解決多螢幕适配的問題。
比方以下的 媒體查詢代碼
html {
//iphone5
font-size: 62.5%;
}
@media (max-width: 414px) {
html {
//iphone6+
font-size: 80.85%;
}
}
@media (max-width: 375px) {
html {
//iphone6
font-size: 73.24%;
}
} 這樣做的結果。有兩個非常明顯的缺點。
- 适配螢幕的尺寸不是連續的。
-
在自己的 css 檔案裡加入大段的這樣查詢代碼。
添加了 css 檔案的體積。
後來參考淘寶移動端頁面适配規則。使用 js 擷取client的寬度，依據設計稿的原型動态的計算
font-size
的值。
具體的内容請看這裡 依據iPhone6設計稿動态計算rem值
3.a标簽内容語義化
大多數時候我們都會給一片區域加上點選跳轉的功能。
例如以下圖：
非常可能我們商品區域都是使用的
div
标簽。
非常easy我們會給最外層加上一個
a
由于
a
是行内元素，是沒有寬和高的。
不能夠把容器撐開。
一種解決的方法就是給
a
标簽設定
block
屬性。例如以下：
<style>
a{display:block;}
</style>
<a>
<div></div>
</a> 功能上已經沒有問題。
可是在語義化的層面上，上面的代碼是不标準的。
最好的做法就是做例如以下的改動,這樣不會使自己的 html 代碼顯的太突兀：
<style>
a{display:block;}
span{dispaly:block;}
</style>
<a>
<span></span>
<span></span>
<span></span>
</a> 4.為自己的頁面設定最大寬度和最小寬度
假設我們使用的是
rem
機關。使用
js
動态計算
font-size
值的話，我們能夠無限适配最大和最小的終端螢幕。可是當使用者的螢幕超過一定的尺寸以後還繼續顯示
h5
頁面的話對使用者會非常不友好。
我們參看下京東和淘寶的
h5
頁面
我們看到了都是定義了頁面的最大和最小寬度。
這樣在螢幕超過一定的尺寸以後能夠更友好的展示（當然這不是必須的）。
我給自己的産品頁面定義的最大的寬度和最小寬度各自是：
{
max-width:640px;
min-width:320px;
} 5.去掉 a。input 在移動端浏覽器中的預設樣式
1.禁止 a 标簽背景
在移動端使用
a
标簽做按鈕的時候，點按會出現一個“暗色”的背景，去掉該背景的方法例如以下
a,button,input,optgroup,select,textarea {
-webkit-tap-highlight-color:rgba(0,0,0,0); /*去掉a、input和button點選時的藍色外邊框和灰色半透明背景*/
} 2.禁止長按 a，img 标簽長按出現菜單條
使用
a
标簽的時候，移動端長按會出現一個 菜單條。這個時候禁止呼出菜單條的方法例如以下：
a, img {
-webkit-touch-callout: none; /*禁止長按連結與圖檔彈出菜單*/
} 3.流暢滾動
body{
-webkit-overflow-scrolling:touch;
} 6.CSS 截斷字元串
單行截斷字元串,這裡必須指定字元串的寬度
{
/*指定字元串的寬度*/
width:300px;
overflow: hidden;
/* 當字元串超過規定長度，顯示省略符*/
text-overflow:ellipsis;
white-space: nowrap;
} 7.calc 相關問題
之前在做布局的時候使用
calc
出現了非常嚴重的線上 BUG。
後來就深究了下這個屬性的使用。
calc
好用的地方就是，能夠在不論什麼機關之間進行換算。可是浏覽器支援的不是非常好。看一下 can i use 截圖：
并且在使用的時候要加上廠商字首。達到相容性。隻是如今不推薦使用。畢竟，浏覽器支援有限。
示範樣例代碼：
#formbox {
width: 130px;
/*加廠商字首，操作符（+，-，*，/）兩邊要有空格）*/
width: -moz-calc(100% / 6);
width: -webkit-calc(100% / 6);
width: calc(100% / 6);
border: 1px solid black;
padding: 4px;
} 研究過淘寶，天貓。京東的 h5端頁面看到這個機關用的不多。主要還是相容性的問題吧。
8.box-sizing 的使用
解決盒模型在不同浏覽器中表現不一緻的問題。可是仍然會有相容性問題。
看最以下的浏覽器支援清單。
box-sizing 屬性用來改變預設的 CSS 盒模型 對元素高寬的計算方式。這個屬性用于模拟那些非正确支援标準盒模型的浏覽器的表現。
它有三個屬性值各自是：
content-box
預設值。标準盒模型。
width 與 height 僅僅包含内容的寬和高。 不包含邊框，内邊距，外邊距。注意: 内邊距, 邊框 & 外邊距 都在這個盒子的外部。 比方. 假設 .box {width: 350px}; 并且 {border: 10px solid black;} 那麼在浏覽器中的渲染的實際寬度将是370px;
width 與 height 包含内邊距。不包含邊框與外邊距。padding-box
border-box
width 與 height 包含内邊距與邊框，不包含外邊距。
這是IE 怪異模式（Quirks mode）使用的 盒模型 。注意：這個時候外邊距和邊框将會包含在盒子中。比方 .box {width: 350px; border: 10px solid black;} 浏覽器渲染出的寬度将是350px.
浏覽器支援：
9.水準垂直居中的問題
能夠看之前寫定位的一篇文章，末尾有講到各種定位：【從0到1學Web前端】CSS定位問題三(相對定位,絕對定位)
這裡實作一個相對定位和絕對定位配合實作水準垂直居中的樣式。看效果：
html 代碼例如以下：
<div class="parent-div">
<div class="child-div"></div>
</div> css代碼例如以下：
.parent-div{
width: 100px;
height: 100px;
background-color:red;
position:relative;
}
.child-div{
width:50px;
height:50px;
background-color:#000;
position: absolute;
margin:auto;
top:0;
left:0;
right:0;
bottom:0;
} 絕對定位在布局中能夠非常方邊的解決非常多問題，可是大多數時候都不去使用絕對定位，而是使用浮動等方法。而當須要 DOM 元素脫離目前文檔流的時候才使用絕對定位。如： 彈層，懸浮層等。
10. css 中 line-height 的問題
line-height
一個非常重要的用途就是讓我們的文本能夠在父級的元素中中垂直居中。可是在使用它的過程中也會遇到一些問題。
先來看一個執行個體，例如以下圖：
代碼也非常簡單，就是當我們在
div
中定義的字型非常大的情況下。我們看到字型和父級的元素中之間有一些空隙。那麼這是為什麼？
我們查一下
line-height
的定義。例如以下：
預設。設定合理的行間距。normal
設定數字，此數字會與目前的字型尺寸相乘來設定行間距。number
設定固定的行間距。length
基于目前字型尺寸的百分比行間距。%
規定應該從父元素繼承 line-height 屬性的值。inherit
是以在以上的情況我們要想使。我們的字型能夠撐滿我們的容器。就須要給父級容器加入
line-height
屬性且值為
100%
代碼和效果例如以下：
那麼為什麼會出現上面的問題呢？
line-height 與 font-size 的計算值之差(行距)分為兩半，分别加到一個文本行内容的頂部和底部。
是以。能夠得出以下的一個公式：
空白間距 = line-height - font-size
是以，當設定為
line-height
的值為
100%
的時候，
line-height
的值就等于
font-size
的尺寸。此時的空白間距為0。
11.使用 vertical-align 調整圖示垂直居中
非常多時候我們要把圖示和文字配合使用，并且須要圖示和文字都能夠垂直居中。例如以下圖所看到的：
假設要實作文字的垂直居中非常easy。僅僅須要使用
line-height=父容器高度
。
可是要想使圖示能夠垂直居中就比較麻煩。
正常情況下我們的文字或者說相鄰的容器，都應該和文字保持在同樣的底線上，例如以下圖：
明顯的能夠看到我們的傳回圖示不是垂直居中的。
那麼應該怎麼樣使圖示垂直居中呢？
首先，我們先來搞清楚幾個線的關系（圖檔來源于網絡，侵權請告知）：
這樣我們就要用到
vertical-align
這個屬性，最重要的一點是:
指定了行内（inline）元素或表格單元格（table-cell）元素的垂直對齊方式
：将支援valign特性的對象的内容與父級的元素中基線對齊baseline
：元素基線與父元素的下标基線對齊。sub
：元素基線與父元素的上标基線對齊。super
： 元素及其後代的頂端與整行的頂端對齊。top
：元素頂端與父元素字型的頂端對齊。text-top
：元素中線與父元素的基線對齊。middle
：元素及其後代的底端與整行的底端對齊。bottom
：元素底端與父元素字型的底端對齊。text-bottom
percentage
：用百分比指定由基線算起的偏移量。能夠為負值。
基線對于百分數來說就是0%。
：用長度值指定由基線算起的偏移量。能夠為負值。基線對于數值來說為0。（CSS2）length
看下邊的一段 html ：
<div class="title-div">
<img src="1_icon.png" alt="傳回圖示">
<!-- <span >圖示位置</span> -->
<span>我就是标題</span>
</div> 最初的結果是這樣子的
我們想實作例如以下圖所看到的的結果，圖示相對于右邊的字型居中：
這個時候我們就要使用
vertical-align
屬性和設定他的length屬性。即設定我們的圖示相對與文字基線的偏移量。
當我們加入屬性的時候非常easy使圖示和文字都垂直居中。
{
vertical-align:15px;
} 這個時候就會是我們的圖示和字型相對于父級的元素中居中。
12.flex 彈性盒模型的使用
flex 如今 pc 端支援的不好（主要是由于還有非常多 IE8。9的使用者存在。）大多情況下我們都是在移動端使用
flex
布局。可是就算是這樣。也會有非常多坑人的 bug出現。
談談一些主要的使用經驗吧，什麼時候使用 flex 。
1.什麼時候使用 flex 屬性
先來看一個産品模型例如以下圖
我的左邊商品和右邊商品的寬度是一樣的。
當我看到這個模型的時候，第一件就是想就是使用
flex
讓我們兩列商品清單平分螢幕區域。這個時候就是用
flex
來做。
父級的元素中例如以下定義
{
margin-bottom: .5rem;
display: box;
display: -webkit-box;
display: -ms-flexbox;
display: flex;
display: -webkit-flex;
-webkit-flex-flow: row;
-ms-flex-flow: row;
flex-flow: row;
} 2.加入廠商字首
使用 flex 的時候一定要記得加廠商字首（眼下使用方式都有三種寫法：1，舊的2，過度的3，新的)。不然肯定會有相容性問題。
{
display: -webkit-box;
display: -ms-flexbox;
display: flex;
display: -webkit-flex;
} 3.flex低版本号浏覽器的相容
先看我的代碼：
{
box-flex: 1;
-webkit-box-flex: 1;
-webkit-flex: 1;
-ms-flex: 1;
flex: 1;
width: 18.5rem;
} 這裡僅僅是讓左右兩邊平分螢幕的寬度。
之前使用 flex在安卓4.3的手機上遇到一個問題。正常的頁面應該例如以下圖所看到的，
可是在 安卓4.3的手機上卻是例如以下的結果
後來研究了下天貓的頁面（由于之前使用這個 flex 就是參考天貓來學習的），看到他們在定義
flex
值的時候 都會有這種一個屬性
width=0;
并且當我給我的頁面也加上這個屬性的時候，頁面的布局也變得正常了。我如今想不明确願意是什麼。僅僅能當一個 hack 來使用。假設大家也遇到這個問題，請試一下加入這個屬性。假設大家知道為什麼這麼用。請不吝賜教一下。
13.CSS3動畫性能的問題
給大家推薦一個站點（點選這裡）能夠檢測我們平時使用的 css 屬性改變元素樣式的時候，觸發的是 cpu還是 gpu ，特别是在做動畫的時候。假設使用 gpu 渲染圖形。能夠降低 cpu 的消耗。提高程式的性能。
比方我們做一個 slider 動畫切換圖檔位置的時候，會使用
margin-left
的屬性，通過站點查詢該屬性值得到例如以下的結果
由上能夠知道使用
margin-left
的時候會處罰頁面的重繪和重排。
可是當我們使用css3新屬性
transform
來取代傳統的
margin-left
來改變元素位置的時候對頁面有什麼影響呢？先來看下站點查詢的結果：
由查詢結果能夠知道，使用
transform
不會觸發不論什麼的重繪。并且會觸發 gpu 來幫助頁面的排版。
即使用GPU操作渲染動畫，降低cpu的消耗，提高性能。
css動畫簡單執行個體，css代碼例如以下：
.lottery-animation {
-webkit-animation: lottery-red 2s;
animation: lottery-red 2s;
-webkit-animation-iteration-count: infinite;
animation-iteration-count: infinite;
}
@-webkit-keyframes lottery-red {
from {
-webkit-transform: rotateY(0deg);
transform: rotateY(0deg);
}
to {
-webkit-transform: rotateY(360deg);
transform: rotateY(360deg);
}
}
@keyframes lottery-red {
from {
-webkit-transform: rotateY(0deg);
transform: rotateY(0deg);
}
to {
-webkit-transform: rotateY(360deg);
transform: rotateY(360deg);
}
} 效果例如以下圖：
這裡我僅僅是對圖像标簽加入了一個
class="lottery-animation"
我截取動态圖檔軟體的問題。我的這個gif 截圖動畫有些卡頓，不流暢。
在正常機器上是沒有問題的（假設大家有mac下好用的 gif截圖軟體能夠推薦給我。謝謝！）。