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模擬