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 应用
手机页面最常用的技术是 flex,为了让内容自适应,等分,水平居中,垂直居中,我们都可以直接使用 flex 解决,事实上,它的表现跟 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;}