Home > Others

H5 Common Skills

Source: Internet
Author: User
Developer on Alibaba Coud: Build your first app with APIs, SDKs, and tutorials on the Alibaba Cloud. Read more ＞

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

This article is an English version of an article which is originally in the Chinese language on aliyun.com and is provided for information purposes only. This website makes no representation or warranty of any kind, either expressed or implied, as to the accuracy, completeness ownership or reliability of the article or any translations thereof. If you have any concerns or complaints relating to the article, please send an email, providing a detailed description of the concern or complaint, to info-contact@alibabacloud.com. A staff member will contact you within 5 working days. Once verified, infringing content will be removed immediately.

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

Get Started for Free

  • Sales Support

    1 on 1 presale consultation

    Chat Contact Sales

  • After-Sales Support

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

    Open a Ticket

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

    Learn More