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

一、@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. 微信小程序-添加手机联系人

    仅供参考 1,wxml: <view bindlongtap="phoneNumTap">{{phoneNum}}</view> 2,js: data = ...

  2. JS的document.images函数使用示例

    <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title> ...

  3. poj1852 Ants（思维）

    https://vjudge.net/problem/POJ-1852 最短时间显然是各自往靠近端点的地方走. 最长时间关键是要想到,折返和擦肩其实是一样的,可以当成两只蚂蚁换了个位子,最终求max是 ...

  4. pygame-KidsCanCode系列jumpy-part5-屏幕滚动

    接上回继续,方块不断向上跳动的过程中,从视觉上看,整个背景屏幕应该不断向下滚动,而且上方要不断出现新档板(否则就没办法继续向上跳了),这节我们将来实现这种效果,感觉好象很复杂,但实现起来其实很简单,只 ...

  5. JSR 整理、翻译

    https://jcp.org/en/jsr/all https://github.com/search?l=Java&q=JSR&type=Repositories

  6. Css3实现波浪线效果1

    一.波浪线 ,常用 .info::before { content: ''; position: absolute; top: 30px; width: 100%; height: 0.25em; b ...

  7. 虚拟主机连接FTP发送"AUTH TLS"命令后提示“无法连接到服务器”

    https://help.aliyun.com/knowledge_detail/36417.html?spm=5176.11065259.1996646101.searchclickresult.7 ...

  8. 数据库的范式，第一、二、三、四、五范式、BC范式

    数据库的规范化(上一篇博客有写到)的程度不同,便有了这么多种范式.数据库范式是数据库设计必不可少的知识,没有对范式的理解,就无法设计出高效率.优雅的数据库,甚至设计出错误误的数据库.课本中的定义比较抽 ...

  9. Oracle 学习笔记 10 -- 约束

    本次笔记来学习约束,约束在表中无处不在. 比如,表中的数据不同意为空或者是表中id为设为主键,都是约束. 约束分类:         主键约束(PRIMARY KEY):主键表示表中一个唯一的标识,本 ...

  10. 亚马逊免费EC2搭建OpenVPN

    系统选择Ubuntu 16.04.5 LTS 1.下载OpenVPN AS 2.1.4 64位版本 sudo wget http://swupdate.openvpn.org/as/openvpn-a ...