工作每天都是接触移动的，特将平时工作中常用的技巧整理总结。

一、@support断定浏览器支持情况定义不同样式

@1像素边框

@supports (-webkit-backdrop-filter:blur(1px)) {

    .o2_mark i {

        border:

    }

    .o2_mark i::before {

        content: "\20";

        border: 1px solid #;

        position: absolute;

        left: ;

        top: ;

        width: %;

        height: %;

        -webkit-transform-origin: left top;

        -webkit-transform: scale(.);

        -webkit-box-sizing: border-box;

    }

}

@sticky吸顶优化体验

sticky使用条件：
sticky 元素只能在父容器内活动
sticky 元素父容器不能含有overflow:hidden 和 overflow:auto

.wx618_tabs{

	position:relative;

	&.fixed ul{

		position:fixed;

		top:0;

		left:0;

		width:100%;

	}

}

//支持sticty属性，运行

@suports (position:-webkit-sticky){

	.wx618_tabs{

		position:-webkit-sticky;

		top:0;

		&.fixed ul{position:relative}

	}

}

@JavaScript中提供了window.CSS.supports方法

// JavaScript中提供了window.CSS.supports方法

// 第一种方法

var supportsFlex = CSS.supports("display", "flex");

// 第二种方法

var supportsFlexAndAppearance = CSS.supports("(display: flex) and (-webkit-appearance: caret)");

二、calc加减乘除运算

.col-3 {

    width: calc(100%-10px);

    height: 200px;

}

.clo-3 li {

    float: left;

    width: calc(100% / 3); /* 33.3% */

    height: 200px;

}

三、图片水平镜像翻转

.example-1 {

    transform: scaleX(-1); /* 方法一 */

}

.example-2 {

    transform: rotateY(180deg); /* 方法二 */

}

四、自旋转运动

<div class="example"></div>

.example {

    position: absolute;

    top: 200px;

    left: 200px;

    width: 100px;

    height: 100px;

    border: 2px solid #000;

    border-radius: 50%;

    animation: autogyRation 4s linear infinite;

}

@keyframes autogyRation {

    from {

        transform: rotate(0deg) translate(-60px) rotate(0deg);

    }

    to {

        transform: rotate(360deg) translate(-60deg) rotate(-360deg);

    }

}

案例展示：demo

五、扫光动画

<style>

  .sample{

    background-color: #0E1326;

    padding-top:30px;

    overflow: hidden;

  }

  .blank_text{

    position: relative;

    width:200px;

    margin:20px auto;

    color: #fff;

    line-height: 1;

    font-size: 50px;

    font-size: 0.74074rem;

    text-align: center;

    overflow: hidden;

    font-family: "icomoon";

  }

.blank_text:after{

    width: 300%;

    height: 100%;

    content: "";

    position: absolute;

    top: 0;

    left: 0;

    background: -webkit-gradient(linear, left top, right top, color-stop(0, rgba(15,20,40, 0.7)), color-stop(0.4, rgba(15,20,40, 0.7)), color-stop(0.5, rgba(15,20,40, 0)), color-stop(0.6, rgba(15,20,40, 0.7)), color-stop(1, rgba(15,20,40, 0.7)));

    -webkit-animation: slide ease-in-out 2s infinite;

}

@-webkit-keyframes slide{

    0%{-webkit-transform:translateX(-66.666%);}

    100%{-webkit-transform:translateX(0);}

}

</style>

<div class="sample">

    <div class="blank_text">选择一本你喜欢的</div>

</div>

六、超透事件css属性

.example {

    pointer-event: none;

}

七、加ontouchstart促使css：active生效

<body ontouchstart="">

八、设置Chrome最小字体显示小于12px

　　字体：

  • ios9+的css字体设置了-apple-system的话中文会调用苹方，英文/数字则调San Francisco；San Francisco在ios/mac上没有显式暴露出来(不能通过字体名字调用)，需要通过这种方式调用；
  • 在不支持-apple-system的ios系统下会调用华文细黑的中文/英文/数字；
  • sans-serif在非ios9+下会调用华文细黑的中文/英文/数字；
  • sans-serif在ios9+下会调用苹方的中文/英文/数字；
  • sans-serif在安卓下会调用系统的中文/英文字体，一般不需要其他设置；
  • 总的来说sans-serif在手机系统下会调用默认中文字体的中文/英文/数字

　　由此移动的字体reset，可以统一设置为：

font-family: -apple-system,Helvetica,sans-serif;

　　

九、设置Chrome最小字体显示小于12px

Google Chrome默认浏览器字体最小字体为：12px，而我们手机端页面常常字体小于12px。 解决：右上角（自定义及控制） → 设置 → 显示高级设置 → 网络内容（自定义字体） → 最小字号（最小可以设置为6px）

十、设置Chrome最小字体显示小于12px

//旋转警告

 var warnWp = document.querySelector(".warn_wp");

 function orientationChange() {

    switch(window.orientation) {

    　　case :

            warnWp.style.display = "none";

            break;

    　　case -:

            warnWp.style.display = "block";

            break;

    　　case :

            warnWp.style.display = "block";

            break;

    };

  };

  window.addEventListener("orientationchange",function(){

    orientationChange();

  },false);

//发现感觉android红米监测不到

参考资料：

CSS3实现文字扫光效果

css3 animation属性实现图片扫光高亮效果　

H5常用技巧的更多相关文章

  1. chrome控制台常用技巧有哪些

    chrome控制台常用技巧有哪些 一.总结 一句话总结:别的里面支持的快捷键,chrome里面几乎都支持,比如sublime中的ctrl+d,其实真是一通百通,都差不多的 1.chrome如何快速切换 ...

  2. 【shell 大系】Linux Shell常用技巧

    在最近的日常工作中由于经常会和Linux服务器打交道,如Oracle性能优化.我们数据采集服务器的资源利用率监控,以及Debug服务器代码并解决其效率和稳定性等问题.因此这段时间总结的有关Linux ...

  3. oracle存储过程常用技巧

    我们在进行pl/sql编程时打交道最多的就是存储过程了.存储过程的结构是非常的简单的,我们在这里除了学习存储过程的基本结构外,还会学习编写存储过程时相关的一些实用的知识.如:游标的处理,异常的处理,集 ...

  4. Vim 常用技巧：

    Vim 常用技巧: 将回车由默认的8个空格改为4个空格: 命令:set sw=4 修改tab为4空格: 命令:set ts=4 设置每一级的缩进长度: 命令:set shiftwidth=4 设置文件 ...

  5. JS~~~ 前端开发一些常用技巧 模块化结构 &&&&& 命名空间处理 奇技淫巧！！！！！！

    前端开发一些常用技巧               模块化结构       &&&&&     命名空间处理 奇技淫巧!!!!!!2016-09-29    17 ...

  6. Android ListView 常用技巧

    Android ListView 常用技巧 Android TextView 常用技巧 1.使用ViewHolder提高效率 ViewHolder模式充分利用了ListView的视图缓存机制,避免了每 ...

  7. JavaScript常用技巧总结（持续添加中...）

    在我学习过程中收集的一些常用技巧: typeof x !== undifined 判断x是否已定义: x === Object(x)  判断x是否为对象: Object.keys(x).length ...

  8. Eclipse调试常用技巧(转)

    Eclipse调试常用技巧 转自http://daimojingdeyu.iteye.com/blog/633824 1. 条件断点 断点大家都比较熟悉,在Eclipse Java 编辑区的行头双击就 ...

  9. AS技巧合集「常用技巧篇」

    转载:http://www.apkbus.com/forum.php?mod=viewthread&tid=254723&extra=page%3D2%26filter%3Dautho ...

随机推荐

  1. .net分布式系统架构的思路

    首先说明的是.net下开源内容较少,并且也不是做并行数据库等基础服务,因此在这里什么Hadoop.Spark.ZooKeeper.dubbo等我们暂不去考虑. 一.最初假设的网站中,我们把应用系统网站 ...

  2. C# GDI+之Graphics类 z

    GDI+是GDI的后继者,它是.NET Framework为操作图形提供的应用程序编程接口,主要用在窗体上绘制各种图形图像,可以用于绘制各种数据图像.数学仿真等. Graphics类是GDI+的核心, ...

  3. Docker实现容器具有固定IP

    Docker的网络类型 Docker安装后,默认会创建三种网络 $ docker network ls NETWORK ID NAME DRIVER SCOPE 6bdc00ad2a8d bridge ...

  4. FFM及DeepFFM模型在推荐系统的探索及实践

    12月20日至23日,全球人工智能与机器学习技术大会 AiCon 2018 在北京国际会议中心盛大举行,新浪微博AI Lab 的资深算法专家 张俊林@张俊林say 主持了大会的 搜索推荐与算法专题,并 ...

  5. docker中mysql数据库的数据导入和导出

    导出数据 查看下 mysql 运行名称 docker ps 结果:  执行导出(备份)数据库命令: 由第一步的结果可知,我们的 mysql 运行在一个叫 mysql_server 的 docker ...

  6. git中提示 please tell me who you are

    提示也就是需要你登录一下,确认你的身份,但是不要按照其提示输入,先输入命令git config user.name “username”,换行输入git config user.email “emai ...

  7. Spring Core Programming(Spring核心编程) - AOP Concepts(AOP基本概念)

    1. What is aspect-oriented programming?(什么是面向切面编程?) Aspects help to modularize cross-cutting concern ...

  8. python接口自动化测试(六)-unittest-单个用例管理

    前面五节主要介绍了环境搭建和requests库的使用,可以使用这些进行接口请求的发送.但是如何管理接口案例?返回结果如何自动校验?这些内容光靠上面五节是不行的,因此从本节开始我们引入python单元测 ...

  9. iOS10使用SecKeyCreateWithData读取公钥私钥

    在使用openssl命令生成RSA公钥私钥以后,当后端人员把密钥的字符串发给你: 首先要问清公钥私钥的密钥格式(PKCS1,PKCS8),密钥位数(1024,2048),然后在iOS10以后,使用苹果 ...

  10. servlet的xx方式传值中文乱码

    protected void doGet(HttpServletRequest req, HttpServletResponse resp) throws ServletException, IOEx ...