1、添加 viewport meta

<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0,user-scalable=no">

2. flex 應(yīng)用

手機(jī)頁面最常用的技術(shù)是 flex，為了讓內(nèi)容自適應(yīng)，等分，水平居中，垂直居中，我們都可以直接使用 flex 解決，事實(shí)上，它的表現(xiàn)跟 table 類似。

• 等分 ^[1]

.parent{display: -webkit-box; display: -webkit-flex; display: flex;}
.child{-webkit-box-flex: 1; -webkit-flex: 1; flex: 1;}

• 水平居中 ^[2]

.parent{display: -webkit-box; display: -webkit-flex; display: flex; -webkit-box-pack: center; -webkit-justify-content: center; justify-content: center;}

• 垂直居中

.parent{display: -webkit-box; display: -webkit-flex; display: flex; -webkit-box-align: center; -webkit-align-items: center; align-items: center;}

1. 上面 parent 代表父元素，child 代表子元素，水平垂直居中把上面的分別合并起來即可。 ?

2. 在有了 flex 之后，現(xiàn)在很多彈窗組件的結(jié)構(gòu)也在發(fā)生著變化，以前遮罩層都是與彈窗分開的，現(xiàn)在在移動(dòng)端，完全可以直接嵌套起來，如： div.overlay>div.pop , 然后 overlay 層 position: fixed; top: 0; bottom: 0; left: 0; right: 0; pop 層作水平垂直居中即可 ?