CSS技巧記錄

caspar 發(fā)布于2019-08-30 12:46 / 1596人閱讀

摘要：截文字方法一需要指定寬度。方法三截?cái)辔淖郑^一定長(zhǎng)度截?cái)唷Ｈ齻€(gè)事件的起始坐標(biāo)，終點(diǎn)坐標(biāo)，以及改變的距離具有重要作用。圖像某些部分可能無法顯示寬度為，高度包含圖片，圖片可能會(huì)變形定寬高邊框以上用設(shè)置成設(shè)置模擬

CSS---截文字

方法一：需要指定寬度。

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

方法二：利用偽類，用background模擬純色或者漸變背景，定位到最后。
方法三：JavaScript截?cái)辔淖郑^一定長(zhǎng)度截?cái)唷?/p>

適配移動(dòng)端
平時(shí)用百分比或者像素?zé)o法動(dòng)態(tài)的修改，項(xiàng)目中用得最多的還是rem來進(jìn)行移動(dòng)端適配。即給根元素一個(gè)字體大小。

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端需要做兼容，需要在超過一定寬高后，強(qiáng)制給一個(gè)max-width和max-height,以及html的字體大小。（媒體查詢即可）

翻屏動(dòng)畫
方式一：給每一屏添加Class，每一個(gè)Class附帶一個(gè)css3的animation屬性。
方式二：垂直滾屏，通過JQ/Zepto的animate()實(shí)現(xiàn)修改元素的top值/transform:translateY()

移動(dòng)端判斷手勢(shì)
移動(dòng)端手勢(shì)操作，一般需要禁止webview/手機(jī)瀏覽器的回彈動(dòng)作，以此提高滑動(dòng)體驗(yàn)。
touchstart,touchmove.touchend三個(gè)事件的起始坐標(biāo)，終點(diǎn)坐標(biāo)，以及改變的距離具有重要作用。pageX,pageY,targetTouches,changedTouches.

background-size
cover 圖像某些部分可能無法顯示
100% 寬度為100%，高度auto
100% 100%
contain 包含圖片，圖片可能會(huì)變形
px 定寬高

1px邊框

IOS8以上用0.5px

viewport設(shè)置成0.5

transform:scale設(shè)置0.5

box-shadow模擬