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

The first two covered “Why Can’t Mobile be Written like A PC Website” and “What’s Steve Jobs’ Idea for a Retina Screen?” Serialized reading experience is better. Let’s learn about the future development of mobile terminal. Next, let’s talk about how mobile terminal fits in.

adapter

Viewport Settings

To change the layout viewport, use the ViewPort of the meta tag. In addition, you can scale the page.

viewportThe related configuration

attribute value describe
width Positive integer or device-width Defines the width of the layout viewport, in pixels
height Positive integer or device-height Defines the height of the layout viewport, in pixels
initial-scale Allow decimals Define the initial page scaling
minimum-scale 0.0-10.0 Define the minimum value for scaling
maximum-scale Allow decimals Define maximum zoom (ios10&ios10+ invalid)
user-scalable yes / no Setting whether scaling is allowed, ditto

Initial-scale = device-independent pixel/viewport width

Visual viewport width = device-independent pixels/initial-scale

Matters needing attention:

  1. Ios10 and ios10+ set maximum zoom value invalid
  2. Initial is incompatible with width
  3. Initial is the same as the minimum
  4. Some Android devices do not accept width = specific value

Normally, we would set the initial, minimum, and maximum values to 1 and not allow the user to zoom in and out of the page. But since maximum is invalid, we’ll disable scaling via JS later

Viewport Settings:

<meta name="viewport" content="Initial - scale = 1.0, the minimum - scale = 1.0, the maximum - scale = 1.0, user - scalable = no" />
Copy the code

Fit according to pixel ratio

In this way, you write physical pixels directly, again, on the iphone6

iphone6
Physical pixel 750 * 1334
Pixel than 2
Device independent pixel 375 * 667

Layout viewport = physical pixels

<script>
    var meta = document.createElement('meta');
    var scale = 1 / window.devicePixelRatio;
    meta.name = "viewport";
    meta.content="initial-scale="+ scale +",minimum-scale="+ scale+",maximum-scale="+ scale+",user-scalable=no";
    document.head.appendChild(meta);
</script>
Copy the code

Cons: Obviously, you have to write physical pixels, but all you get on the design are CSS pixels

Pixel processing is complete, but mobile adaptation is not so easy. Why?

What is the problem with the same element taking up half of the screen width at 414 * 736 but more than half of the screen width at 320*480?

  1. According to the large screen size, the content should be displayed in a row, in the small screen width is not enough, fell down
  2. Small screen, so tell me, why did I buy a big screen

So in this case, we need to adapt the screen:

In other words, it’s one element, small phone, I show small dot, big phone, I show big dot

In order to do this, we need to learn the following content

Rem adaptation

What is REM? Don’t you think it looks a lot like EM?

Review the em

Font size: 1em = 1 font size: 1em = 1

<style>
    body{
        font-size: 20px;
    }
    div{
        font-size: 15px;
        width: 5em;
        height: 5em;
        background: rebeccapurple;
    }
</style>
Copy the code

width = 15 * 5 = 75px;

Disadvantages: Font size is often changed, em is calculated based on its own font size, easy to change the width and height.

And with that in mind, we’re going to learn a new unit called REM

Rem -> root em 

<style>
    html{
        font-size: 20px;
    }
    div{
        font-size: 15px;
        width: 5em;
        height: 5em;
        background: rebeccapurple;
    }
</style>
Copy the code

width = 20* 5 = 100px;

But it seems that ~ doesn’t change the problem we mentioned above….. Don’t worry! That’s because you haven’t changed the font size yet

Use js to dynamically set font size

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

In that case, all you care about is how much REM you write.

The next chapter will talk about VW and VH on mobile

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

Why Mobile Can’t Be written like A PC Website

What was Steve Jobs’s Idea for a retina screen?

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