CSS---截文字

方法一：需要指定宽度。

text-overflow:ellipsis;white-space:nowrap;overflow:hidden;width:10px;

方法二：利用伪类，用background模拟纯色或者渐变背景，定位到最后。

方法三：JavaScript截断文字，超过一定长度截断。

适配移动端

平时用百分比或者像素无法动态的修改，项目中用得最多的还是rem来进行移动端适配。即给根元素一个字体大小。

html{font-size:16px;}

var timer;    function setSize() {        var baseWidth = 320;        var baseFont = 16;        var root = document.documentElement;        var deviceWidth = parseInt(root.clientWidth);        var scale = deviceWidth / baseWidth;        var value = scale * baseFont;        root.style.fontSize = scale * baseFont + 'px';    }    window.addEventListener('resize', function() {        timer && clearTimeout(timer);        timer = setTimeout(setSize, 10, false);    });

如果在PC端需要做兼容，需要在超过一定宽高后，强制给一个max-width和max-height,以及html的字体大小。（媒体查询即可）

翻屏动画

方式一：给每一屏添加Class，每一个Class附带一个css3的animation属性。方式二：垂直滚屏，通过JQ/Zepto的animate()实现修改元素的top值/transform:translateY()

移动端判断手势

移动端手势操作，一般需要禁止webview/手机浏览器的回弹动作，以此提高滑动体验。touchstart,touchmove.touchend三个事件的起始坐标，终点坐标，以及改变的距离具有重要作用。pageX,pageY,targetTouches,changedTouches.

background-size

cover 图像某些部分可能无法显示100% 宽度为100%，高度auto100% 100% contain 包含图片，图片可能会变形px 定宽高

1px边框

1. IOS8以上用0.5px

2. viewport设置成0.5

3. transform:scale设置0.5

4. box-shadow模拟