CSS技巧记录

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%，高度auto
100% 100%
contain 包含图片，图片可能会变形
px 定宽高

1px边框

1. IOS8以上用0.5px

2. viewport设置成0.5

3. transform:scale设置0.5

4. box-shadow模拟