H5常用技巧

Posted 2020-07-20 平凡

tags:

篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了H5常用技巧相关的知识，希望对你有一定的参考价值。

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

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

@1像素边框

@supports (-webkit-backdrop-filter:blur(1px)) {
    .o2_mark i {
        border: 0
    }

    .o2_mark i::before {
        content: "\20";
        border: 1px solid #666;
        position: absolute;
        left: 0;
        top: 0;
        width: 200%;
        height: 200%;
        -webkit-transform-origin: left top;
        -webkit-transform: scale(.5);
        -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）

参考资料：

CSS3实现文字扫光效果

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

以上是关于H5常用技巧的主要内容，如果未能解决你的问题，请参考以下文章