Small knowledge, big challenge! This paper is participating in theEssentials for programmers”Creative activities.

This article also participated in the “Digitalstar Project” to win a creative gift package and creative incentive money

Adaptation scheme

Rem adaptation code:

<script>
    var html = document.documentElement;
    var widths = html.clientWidth;
    var num = 10;
    html.style.fontSize = widths / num + 'px';
</script>
Copy the code

But, not everyone can write JS, is there a way we can not write JS? Or is there? Let’s see.

New units:vw,vh

Compatibility: IE9 or above, IOS 6.1+, Android 4.4+

Both units are based on the viewport screen, so watch out for the scrollbar on your PC

Let’s take a look at the picture below:

Note: Vw refers to horizontal and VH refers to vertical, regardless of whether the device is landscape or portrait

It is not affected by the parent width like the percentage, so we can use CSS to get the current viewport width, using the viewport width obtained / 100vw

html{
    font-size: 10vw;
}
Font-size: 16px; line-height: 20px; "> < span style =" font-size: 16px
Copy the code

This way, the font size on the HTML will change dynamically as the screen width changes.

div{
    width:5rem;
    height:5rem;
}
Copy the code

The above effect is the same as what we achieved by writing JS originally. Of course, we can also directly use vw units, for example:

div{
    width:50vw;
    height:50vw;
}
Copy the code

In addition to VW and VH mentioned above, there are vmin and vmax

Vmin: Select the smaller of VW and VH

Vmax: Select the larger of VW and VH

Of course, this solution is not perfect, because there are also decimal points in the calculation

There’s no way we can fill this hole right now

  1. The mobile input box is blocked by the keyboard
  2. Click through the problem
  3. Slide collision (wheel and scroll bar)
  4. Content forbidden zoom invalid

Mobile terminal easy to use plug-ins

  1. Better – scroll (js)
  2. The animate. CSS animation library
  3. Swiper Screen sliding tool

lib-flexible

A tool used to do REM adaptation, the code inside, in fact, and we write rem adaptation is consistent

Download: github.com/amfe/lib-fl…

Praise support, hand left lingering fragrance, with rongyan, move your rich little hands yo, thank you big guy can leave your footprints.

Past wonderful recommendation

Front-end common encryption methods

Canvas Pit Climbing Road

Don’t know SEO optimization? An article helps you understand how to do SEO optimization

Canvas Pit Road

Wechat small program development guide and optimization practice

Talk about mobile adaptation

Front-end performance optimization for actual combat

Talk about annoying regular expressions

Obtain file BLOB stream address to achieve the download function

Vue virtual DOM confused? This article will get you through the virtual DOM once and for all

Git Git

Easy to understand Git introduction

Git implements automatic push

Interview Recommendations

Front ten thousand literal classics – the foundation

Front swastika area – advanced section

More exciting details: personal homepage