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

一、@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. mvc中使用Pagination，对其进行再封装

    对其进行再次封装: (function($) { $["fn"]["easyPaging"] = function(o) { if (!o.pageSelect ...

  2. JSP显示页面和数据库乱码

    页面 和 数据库编码都是UTF-8,但就是奇怪. 指定Tomcat的编码为UTF-8 就行了

  3. Android Chromium WebView学习启动篇

    Android从4.4起提供基于Chromium实现的WebView.此前WebView基于WebKit实现.WebKit提供网页解析.布局和绘制以及JS执行等基础功能.Chromium在WebKit ...

  4. crawler_exa3

    优化中... #! /usr/bin/env python # -*- coding:utf-8 -*- # Author: Tdcqma ''' v1.0: 由于网站结构存在变更的可能性,一旦爬虫爬 ...

  5. easyUI的汇总列，在前端生成

    1.easyUI初始化,启用汇总列,showFooter:true 2.后台json有默认的footer的值 {"total":28,"rows":[ {&qu ...

  6. ios 适配iOS11&iPhoneX的一些坑

    前阵子项目开发忙成狗,就一直没做iOS11的适配,直到XcodeGM版发布后,我胸有成竹的在iPhoneX上跑起项目,整个人都凉透了...下面总结一下我遇到的坑,不是很全面,日后补充. 导航栏 导航栏 ...

  7. c++中的var_dump

    var_dump 在PHP中可以使用var_dump来输出变量,而且输出的内容很详细 用习惯后,再回来用c++的cout,各种不习惯,于是在github上找了一下,果然有类似的,而且是重载了 < ...

  8. 全局Threshold和动态阈值分割Dyn_Threshold的应用场景

    手册里面的particle例子,例子的任务是分析颗粒在液体中.在这个应用程序的主要困难:存在两种类型的对象:大明亮物体和较低的小物体的对比.此外噪音使分割的存在困难:无法使用全局灰度阈值thresho ...

  9. .net reactor使用教程（一）——界面各功能说明(转)

    概述:安装了.net reactor之后,可以在安装目录下找到帮助文档REACTOR_HELP.chm,目前没有中文版本,里面详细介绍了.net reactor的各功能及使用场景.   安装了.net ...

  10. python 文档

    python 文档 https://docs.python.org/2/library/index.html