H5經常使用技巧

時間 2019-12-08

標籤 h5 經常使用技巧简体版

原文原文鏈接

　　工做天天都是接觸移動的，特將平時工做中經常使用的技巧整理總結。css

1、@support判定瀏覽器支持狀況定義不一樣樣式

@1像素邊框html

@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吸頂優化體驗android

sticky使用條件：
sticky 元素只能在父容器內活動
sticky 元素父容器不能含有overflow:hidden 和 overflow:auto ios

.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方法css3

// JavaScript中提供了window.CSS.supports方法
// 第一種方法
var supportsFlex = CSS.supports("display", "flex");
// 第二種方法
var supportsFlexAndAppearance = CSS.supports("(display: flex) and (-webkit-appearance: caret)");

2、calc加減乘除運算

.col-3 {
    width: calc(100%-10px);
    height: 200px;
}
.clo-3 li {
    float: left;
    width: calc(100% / 3); /* 33.3% */
    height: 200px;
}

3、圖片水平鏡像翻轉

.example-1 {
    transform: scaleX(-1); /* 方法一 */
}
.example-2 {
    transform: rotateY(180deg); /* 方法二 */
}

4、自旋轉運動

<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);
    }
}

案例展現：demoweb

5、掃光動畫

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

6、超透事件css屬性

.example {
    pointer-event: none;
}

7、加ontouchstart促使css：active生效

<body ontouchstart="">

8、設置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;

9、設置Chrome最小字體顯示小於12px

Google Chrome默認瀏覽器字體最小字體爲：12px，而咱們手機端頁面經常字體小於12px。 解決：右上角（自定義及控制） → 設置 → 顯示高級設置 → 網絡內容（自定義字體） → 最小字號（最小能夠設置爲6px）app

10、設置Chrome最小字體顯示小於12px

//旋轉警告
 var warnWp = document.querySelector(".warn_wp");
 function orientationChange() {
    switch(window.orientation) {
    　　case 0: 
            warnWp.style.display = "none";
            break;
    　　case -90: 
            warnWp.style.display = "block";
            break;
    　　case 90:   
            warnWp.style.display = "block";
            break;
    };
  };
  window.addEventListener("orientationchange",function(){
    orientationChange();
  },false);

//發現感受android紅米監測不到