移動開發基本知識點
一. 使用rem作爲單位
html { font-size: 100px; }
@media(min-width: 320px) { html { font-size: 100px; } }
@media(min-width: 360px) { html { font-size: 112.5px; } }
@media(min-width: 400px) { html { font-size: 125px; } }
@media(min-width: 640px) { html { font-size: 200px; } }
給手機設置100px的字體大小; 對於320px的手機匹配是100px，其他手機都是等比例匹配; 因此設計稿上是多少像素的話，那麼轉換爲rem的時候，rem = 設計稿的像素/100 即可;
二. 禁用a,button,input,optgroup,select,textarea 等標籤背景變暗
在移動端使用a標籤做按鈕的時候或者文字連接的時候，點擊按鈕會出現一個 "暗色的"背景，比如如下代碼：
button1
在移動端點擊後 會出現"暗色"的背景，這時候我們需要在css加入如下代碼即可：
a,button,input,optgroup,select,textarea{
-webkit-tap-highlight-color: rgba(0,0,0,0);
}
三. meta基礎知識點：
1.頁面窗口自動調整到設備寬度，並禁止用戶及縮放頁面。
屬性基本含義：
content="width=device-width：
控制 viewport 的大小,device-width 爲設備的寬度
initial-scale - 初始的縮放比例
minimum-scale - 允許用戶縮放到的最小比例
maximum-scale - 允許用戶縮放到的最大比例
user-scalable - 用戶是否可以手動縮放
2.忽略將頁面中的數字識別爲電話號碼
3. 忽略Android平臺中對郵箱地址的識別
4. 當網站添加到主屏幕快速啓動方式，可隱藏地址欄，僅針對ios的safari
5. 將網站添加到主屏幕快速啓動方式，僅針對ios的safari頂端狀態條的樣式
6. 需要在網站的根目錄下存放favicon圖標，防止404請求(使用fiddler可以監聽到)，在頁面上需加link如下：
因此頁面上通用的模板如下：
<span style="\"font-family:宋體\"">標題</span><span style="\"font-family:Arial\""></span>
這裏開始內容
四：移動端如何定義字體font-family
body{font-family: "Helvetica Neue", Helvetica, sans-serif;}
五：在android或者IOS下 撥打電話代碼如下：
打電話給:15602512356
六：發短信(winphone系統無效)
發短信給: 10010
七：調用手機系統自帶的郵件功能
1. 當瀏覽者點擊這個鏈接時，瀏覽器會自動調用默認的客戶端電子郵件程序，並在收件人框中自動填上收件人的地址下面
發電子郵件
2、填寫抄送地址;
在IOS手機下：在收件人地址後用?cc=開頭;
如下代碼：
在android手機下，如下代碼：填寫抄送地址
3. 填上密件抄送地址，如下代碼：
在IOS手機下：緊跟着抄送地址之後，寫上&bcc=，填上密件抄送地址
填上密件抄送地址
在安卓下;如下代碼：
4. 包含多個收件人、抄送、密件抄送人，用分號隔(;)開多個收件人的地址即可實現。如下代碼：
包含多個收件人、抄送、密件抄送人，用分號隔(;)開多個收件人的地址即可實現
5、包含主題，用?subject=可以填上主題。如下代碼：
包含主題，可以填上主題
6、包含內容，用?body=可以填上內容(需要換行的話，使用%0A給文本換行)；代碼如下：
包含內容，用?body=可以填上內容
7. 內容包含鏈接，含http(s)://等的文本自動轉化爲鏈接。如下代碼：
八：webkit表單輸入框placeholder的顏色值改變：
如果想要默認的顏色顯示紅色，代碼如下：
input::-webkit-input-placeholder{color:red;}
如果想要用戶點擊變爲藍色，代碼如下：
input:focus::-webkit-input-placeholder{color:blue;}
九：移動端IOS手機下清除輸入框內陰影，代碼如下
input,textarea {
-webkit-appearance: none;
}
十：在IOS中 禁止長按鏈接與圖片彈出菜單
a, img {
-webkit-touch-callout: none;
}
回到頂部
calc基本用法
calc基本語法：
.class {width: calc(expression);}
它可以支持加，減，乘，除; 在我們做手機端的時候非常有用的一個知識點;
優點如下：
1. 支持使用 "+","-","*" 和 "/" 四則運算。
2. 可以混合使用百分比(%),px,em,rem等作爲單位可進行計算。
瀏覽器的兼容性有如下：
IE9+，FF4.0+，Chrome19+，Safari6+
如下測試代碼：
我是測試calc
.calc{
margin-left:50px;
padding-left:2rem;
width:calc(100%-50px-2rem);
height:10rem;
}
回到頂部
box-sizing的理解及使用
該屬性是解決盒模型在不同的瀏覽器中表現不一致的問題。它有三個屬性值分別是：
content-box: 默認值(標準盒模型); width和height只包括內容的寬和高，不包括邊框，內邊距;
比如如下div元素：
box
css如下：.box {width:200px;height:200px;padding:10px;border:1px solid #333;margin:10px;box-sizing:content-box;}
那麼在瀏覽器下渲染的實際寬度和高度分別是：222px,222px; 因爲在標準的盒模型下，在瀏覽器中渲染的實際寬度和高度包括
內邊距(padding)和邊框的(border);如下圖所示：
border-box: width與height是包括內邊距和邊框的，不包括外邊距，這是IE的怪異模式使用的盒模型，比如還是上面的代碼：
box
;css代碼如下：
.box {width:200px;height:200px;padding:10px;border:1px solid #333;margin:10px;box-sizing:border-box;}
那麼此時瀏覽器渲染的width會是178px，height也是178px; 因爲此時定義的width和height會包含padding和border在內;
使用這個屬性對於在使用百分比的情況下佈局頁面非常有用，比如有兩列布局寬度都是50%;但是呢還有padding和border，那麼這個
時候如果我們不使用該屬性的話(當然我們也可以使用calc方法來計算); 那麼總寬度會大於頁面中的100%;因此這時候可以使用這
個屬性來使頁面達到100%的佈局.如下圖所示：
瀏覽器支持的程度如下：
回到頂部
理解display:box的佈局
display: box; box-flex 是css3新添加的盒子模型屬性，它可以爲我們解決按比列劃分，水平均分，及垂直等高等。
一：按比例劃分：
目前box-flex 屬性還沒有得到firefox, Opera, chrome瀏覽器的完全支持，但我們可以使用它們的私有屬性定義firefox(-moz-)，opera(-o-)，chrome/safari（-webkit-）。box-flex屬性主要讓子容器針對父容器的寬度按一定的規則進行劃分。 代碼如下：
Hello
W3School
.test{
display:-moz-box;
display:-webkit-box;
display:box;
width:300px;
}
#p1{
-moz-box-flex:1.0;
-webkit-box-flex:1.0;
box-flex:1;
border:1px solid red;
}
#p2{
-moz-box-flex:2.0;
-webkit-box-flex:2.0;
box-flex:2;
border:1px solid blue;
}
如下圖所示：
注意：
1. 必須給父容器定義 display: box, 其子元素纔可以進行劃分。如上給id爲p1設置box-flex設置爲1，給id爲p2設置box-flex爲2，
說明分別給其設置1等分和2等分，也就是說給id爲p1元素設置寬度爲 300 * 1/3 = 100px; 給id爲p2元素設置寬度爲 300 * 2/3 = 200px;
2. 如果進行父容器劃分的同時，他的子元素有的設置了寬度，有的要進行劃分的話，那麼劃分的寬度 = 父容器的寬度 – 已經設置的寬度 。
再進行對應的劃分。
如下圖所示：
二：box具體的屬性如下：
box-orient | box-direction | box-align | box-pack | box-lines
1. box-orient;
box-orient 用來確定父容器裏的子容器的排列方式，是水平還是垂直，可選屬性如下所示：
horizontal | vertical | inline-axis | block-axis | inherit
一：horizontal | inline-axis
給box設置 horizontal 或 inline-axis 屬性效果表現一致。都可以將子元素進行水平排列.
如下html代碼：
Hello
W3School
css代碼如下：
.test{
display:-moz-box;
display:-webkit-box;
display:box;
width:300px;
height:200px;
-moz-box-orient:horizontal;
-webkit-box-orient:horizontal;
box-orient:horizontal;
}
#p1{
-moz-box-flex:1.0;
-webkit-box-flex:1.0;
box-flex:1;
border:1px solid red;
}
#p2{
-moz-box-flex:2.0;
-webkit-box-flex:2.0;
box-flex:2;
border:1px solid blue;
}
如下圖所示：
二：vertical 可以讓子元素進行垂直排列;
css代碼如下：
*{margin:0;padding:0;}
.test{
display:-moz-box;
display:-webkit-box;
display:box;
width:300px;
height:200px;
-moz-box-orient:vertical;
-webkit-box-orient:vertical;
box-orient:vertical;
}
#p1{
-moz-box-flex:1.0;
-webkit-box-flex:1.0;
box-flex:1;
border:1px solid red;
}
#p2{
-moz-box-flex:2.0;
-webkit-box-flex:2.0;
box-flex:2;
border:1px solid blue;
}
如下圖所示：
三：inherit。 Inherit屬性讓子元素繼承父元素的相關屬性。效果和第一種效果一樣，都是水平對齊;
2. box-direction
還是如下html代碼：
Hello
W3School
box-direction 用來確定父容器裏的子容器的排列順序，具體的屬性如下代碼所示：
normal | reverse | inherit
normal是默認值，按照HTML文檔裏的結構的先後順序依次展示， 如果box-direction 設置爲 normal，則結構順序還是 id爲p1元素，id爲p2元素。
reverse: 表示反轉。如果設置reverse反轉，則結構排列順序爲 id爲p2元素，id爲p1元素。如下代碼：
css代碼如下：
*{margin:0;padding:0;}
.test{
display:-moz-box;
display:-webkit-box;
display:box;
width:300px;
height:200px;
-moz-box-direction:reverse;
-webkit-box-direction:reverse;
box-direction:reverse;
}
#p1{
-moz-box-flex:1.0;
-webkit-box-flex:1.0;
box-flex:1;
border:1px solid red;
}
#p2{
-moz-box-flex:2.0;
-webkit-box-flex:2.0;
box-flex:2;
border:1px solid blue;
}
如下圖所示：
3. box-align:
box-align 表示容器裏面字容器的垂直對齊方式，可選參數如下表示：
start | end | center | baseline | stretch
1. 對齊方式 start：表示居頂對齊
代碼如下：
*{margin:0;padding:0;}
.test{
display:-moz-box;
display:-webkit-box;
display:box;
width:300px;
height:200px;
-moz-box-align:start;
-webkit-box-align:start;
box-align:start;
}
#p1{
-moz-box-flex:1.0;
-webkit-box-flex:1.0;
box-flex:1;
height:160px;
border:1px solid red;
}
#p2{
-moz-box-flex:2.0;
-webkit-box-flex:2.0;
box-flex:2;
height:100px;
border:1px solid blue;
}
如上 P1 高度爲160px p2 爲100px; 對齊方式如下圖所示：
如果改爲end的話，那麼就是 居低對齊了，如下：
center表示居中對齊，如下：
stretch 在box-align表示拉伸，拉伸與其父容器等高。如下代碼：
在firefox下 和父容器下等高，滿足條件，如下：
在chrome下不滿足條件；如下：
4. box-pack
box-pack表示父容器裏面子容器的水平對齊方式，可選參數如下表示：
start | end | center | justify
box-pack:start; 表示水平居左對齊，對於正常方向的框，首個子元素的左邊緣被放在左側（最後的子元素後是所有剩餘的空間）
對於相反方向的框，最後子元素的右邊緣被放在右側（首個子元素前是所有剩餘的空間）代碼如下所示：
更多學習分享加羣 150601600