CSS技巧记录

2024年1月4日 75次阅读 来源: Chang1ng

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

    原文作者：Chang1ng
    原文地址: https://segmentfault.com/a/1190000004414879
    本文转自网络文章，转载此文章仅为分享知识，如有侵权，请联系博主进行删除。
点赞