移动端总结(更新)

1. 字体

font-family: "Helvetica Neue", Helvetica, STHeiTi, sans-serif;

font-family: 'Helvetica Neue',Helvetica,Arial,'Microsoft Yahei',sans-serif

font-family:'Helvetica Neue',Helvetica, Arial,'Lantinghei SC','Hiragino Sans GB',STHeiti,'Noto Sans S Chinese','Microsoft Yahei','Microsoft Sans Serif','WenQuanYi Micro Hei',sans-serif;

2. 完美视口(viewport)

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

3. 移动端居中

translate版

.center {
position: absolute;
top: 50%;
left: 50%;
-webkit-transform: translate(-50%,-50%);
}

flexbox版

.center {
justify-content: center;//子元素水平居中
align-items: center;//子元素垂直居中
display: -webkit-flex;
}

4. 顶层容器

设置最小最大宽度，宽度自适应，字体默认大小，背景色为灰色

.container {min-width: 320px; max-width: 640px; width: 100%; margin: 0 auto;; background: #ccc; font-family: 'Helvetica Neue',Helvetica,Arial,'Microsoft Yahei',sans-serif;font-size: 12px;}