H5 Common Skills

Source: Internet
Author: User

One, @support determine browser support conditions define different styles

@1 Pixel Border

@supports (-webkit-backdrop-Filter:blur (1px)) {. O2_mark I {border:0 "\20" 66600200%200%origin:left top;-webkit-transform:scale (. ); -webkit-box-sizing:border-box;}}         

@sticky Top-Suction optimization experience

Sticky conditions of Use:
Sticky elements can only be active within the parent container
Sticky element parent container cannot contain Overflow:hidden and Overflow:auto

1234567891011121314151617 .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}    }}

The Window.CSS.supports method is provided in the @JavaScript

12345 // JavaScript中提供了window.CSS.supports方法// 第一种方法varsupportsFlex = CSS.supports("display", "flex");// 第二种方法varsupportsFlexAndAppearance = CSS.supports("(display: flex) and (-webkit-appearance: caret)");
Second, Calc subtraction operations
123456789 .col-3 {      width:calc (100%-10px);      height:200px; } .clo-3 li {      float : Left;      width:calc (100%/3); /* 33.3% */      height:200px;
Third, picture horizontal mirror Flip
123456 .example-1 {    transform: scaleX(-1); /* 方法一 */}.example-2 {    transform: rotateY(180deg); /* 方法二 */}
Iv. self-rotating motion
1234567891011121314151617181920 <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);    }}

Case Show: Demo

Five, sweep the light animation
1234567891011121314151617181920212223242526272829303132333435363738 <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>
Vi. Hyper-transparent event CSS Properties
123 .example {    pointer-event: none;}
Vii. Ontouchstart urges css:active to enter into force
1 <body ontouchstart="">
Eight, set chrome minimum font display less than 12px

Font:

    • ios9+ CSS Font Set-apple-system words will call Apple, English/digital tune San Francisco;san Francisco not explicitly exposed on the IOS/MAC (cannot be called by the font name), need to call through this way;
    • Chinese/English/numerals will be called in the iOS system that does not support-apple-system;
    • Sans-serif will call Chinese/English/numerals under non-ios9+.
    • Sans-serif will call Apple's Chinese/English/numerals under ios9+;
    • Sans-serif in Android will call the system's Chinese/English font, generally do not need other settings;
    • In general Sans-serif will call the default Chinese/English/digital text in the phone system

The font that is moved by reset can be set uniformly to:

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

  

Nine, set chrome minimum font display less than 12px

Google Chrome default Browser font minimum font is: 12px, and our mobile phone page is often less than 12px font. Resolution: Upper right corner (Customize and control) → settings → show advanced settings → Web content (custom font) → minimum font size (minimum can be set to 6px)

H5 Common Skills

Contact Us

The content source of this page is from Internet, which doesn't represent Alibaba Cloud's opinion; products and services mentioned on that page don't have any relationship with Alibaba Cloud. If the content of the page makes you feel confusing, please write us an email, we will handle the problem within 5 days after receiving your email.

If you find any instances of plagiarism from the community, please send an email to: info-contact@alibabacloud.com and provide relevant evidence. A staff member will contact you within 5 working days.

A Free Trial That Lets You Build Big!

Start building with 50+ products and up to 12 months usage for Elastic Compute Service

  • Sales Support

    1 on 1 presale consultation

  • After-Sales Support

    24/7 Technical Support 6 Free Tickets per Quarter Faster Response

  • Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.