一.viewport的作用
1.把整个大的页面渲染在一个比例比较大的viewport(ios是980px，安卓不一定，可能会有640、1000、1200等)里面
2.通过缩放让你看到整个viewport的全貌
二.meta标签
980默认的viewport不是很适合我们来开发移动web页面(因为不规范)，通过meta标签来改造viewport来达到我们想要的移动web定制化的效果
<meta name="viewport" content="width=device-width,initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, user-scalable=no">
width：设置布局viewport的特定值(“device-width”)
initial-scale：设置页面的初始缩放
user-scalable：用户能否缩放
移动web最佳viewport设置
布局viewport=设备宽度=度量viewport
三.Flexbox弹性盒子布局
父元素{ display:-webkit-flex;} //标志使用弹性布局
子元素{ flex:1;} //flex:num 占容器的比例
兼容性：ios都可以，android4.4以下只能兼容旧版的flexbox布局
新旧比较：
| 新flex布局 | 旧flex布局 |
| display:-webkit-flex; | display:-webkit-flex-box; |
| flex:1; | flex-box:1; |
| justify-content:center; | box-pack:center; |
| align-items:center; | box-align:center; |
*补充【flexbox版】不定宽高的水平垂直居中
父元素{ display:-webkit-flex;
justify-content:center; //子元素水平居中
align-items:center; //子元素垂直居中
}
四.一像素边框
同样是retina屏幕下的问题，根本原因：1px使用2dp渲染
表现：不同手机，精度不一样，1像素边框，在2倍屏幕上为2“占位”，3倍屏上为3“占位”，但设计师就要1“占位”
解决方法：border:0.5px(只有ios8可以用)
成熟的解决方案
li{ position:relative;}
li:bofore{ position:absolute; top:-1px; left:0; content:' '; width:100%; height:1px; border-top:1px solid #000; transform:scaleY(0.5);}
li{ position: relative; border:none; }
li:after{ content: ''; position: absolute; left: 0; background: #000; width: 100%; height: 1px; -webkit-transform: scaleY(0.5); transform: scaleY(0.5); -webkit-transform-origin: 0 0; transform-origin: 0 0; }
|
五.点击元素时，有黑色的底
* {webkit-tap-highlight-color: rgba(0, 0, 0, 0); -webkit-touch-callout: none;}
去掉手持设备点击时出现的透明层 （一般会在头部做格式化）
a,button,input{ -webkit-tap-highlight-color: rgba(0,0,0,0); -webkit-tap-highlight-color: transparent; /* For some Androids */}
六。动画
不建议改变left值，尽量用transform和translete来改变位移，不然性能很卡
