CSS技巧记录

caspar 发布于2019-08-30 12:46 / 1430人阅读

摘要：截文字方法一需要指定宽度。方法三截断文字，超过一定长度截断。三个事件的起始坐标，终点坐标，以及改变的距离具有重要作用。图像某些部分可能无法显示宽度为，高度包含图片，图片可能会变形定宽高边框以上用设置成设置模拟

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边框

IOS8以上用0.5px

viewport设置成0.5

transform:scale设置0.5

box-shadow模拟

idc机房托管专线服务 css技巧应聘技巧运营技巧配置技巧

文章版权归作者所有，未经允许请勿转载,若此文章存在违规行为，您可以联系管理员删除。

转载请注明本文地址：https://www.ucloud.cn/yun/115045.html

CSS技巧 - 收藏集 - 掘金

摘要：笔者作为一位，将工作以来用到的各种优秀资料神器及框架整理在此，毕竟好记性不如烂键盘，此前端知识点大百科全书前端掘金，，不定期更新技巧前端掘金技巧，偶尔更新。计算数组的极值技巧使你的更加专业前端掘金一个帮你提升技巧的收藏集。 CSS 样式画各种图形 - 前端 - 掘金下面是一些我在 CSS 中经常用到的图案，还有一些是在css-tricks看到的。记录一下，以后会用到。会持续更新… 一、...

Jonathan Shieber 2019-08-29 12:33 评论0 收藏0
CSS技巧 - 收藏集 - 掘金

摘要：笔者作为一位，将工作以来用到的各种优秀资料神器及框架整理在此，毕竟好记性不如烂键盘，此前端知识点大百科全书前端掘金，，不定期更新技巧前端掘金技巧，偶尔更新。计算数组的极值技巧使你的更加专业前端掘金一个帮你提升技巧的收藏集。 CSS 样式画各种图形 - 前端 - 掘金下面是一些我在 CSS 中经常用到的图案，还有一些是在css-tricks看到的。记录一下，以后会用到。会持续更新… 一、...

SHERlocked93 2019-08-22 11:04 评论0 收藏0
CSS技巧

摘要：技巧使你的更加专业这是上关于技巧的一篇译文，另外你也可以在本项目看到原文。列举了一些很实用的技巧，比如给空内容的标签添加内容，逗号分隔列表等等。排序算法看源码，把它背下来吧排序算法的封装。主要帮助初学者更好的掌握排序算法的实现。成为专业程序员路上用到的各种优秀资料、神器及框架成为一名专业程序员的道路上，需要坚持练习、学习与积累，技术方面既要有一定的广度，更要有自己的深度。 Java...

DangoSky 2019-08-22 11:15 评论0 收藏0
CSS技巧

摘要：技巧使你的更加专业这是上关于技巧的一篇译文，另外你也可以在本项目看到原文。列举了一些很实用的技巧，比如给空内容的标签添加内容，逗号分隔列表等等。排序算法看源码，把它背下来吧排序算法的封装。主要帮助初学者更好的掌握排序算法的实现。成为专业程序员路上用到的各种优秀资料、神器及框架成为一名专业程序员的道路上，需要坚持练习、学习与积累，技术方面既要有一定的广度，更要有自己的深度。 Java...

zgbgx 2019-08-29 14:01 评论0 收藏0
CSS中的一下小技巧1之CSS3三角形运用

摘要：后来知道原来可以用实现三角形，可是用过一次后很容易忘记，所以想把这个小技巧记录起来是如何实现三角形的呢答案是通过边框，也就是属性。使用CSS3实现三角形：　　在前端页面中有很多时候会遇到需要三角形图案的时候，以前不知道可以用CSS3实现三角形的时候，一般都是叫UI把三角形图案切出来。　　后来知道原来可以用CSS3实现三角形，可是用过一次后很容易忘记，所以想把这个小技巧记录起来~ 　　C...

番茄西红柿 2019-04-23 11:48 评论0 收藏0