A brief discussion on mobile terminal adaptation

A brief discussion on mobile terminal adaptation

Preface

The writing of front-end code can never escape the word "compatibility". In the past PC era, programmers have been struggling on the road of IE compatibility due to the arrogance of IE. Now the popularity of mobile devices seems to give us hope, as if we are about to get rid of IE, but! Before one wave of attacks subsides, another wave comes to invade~ Mobile terminals do not need to consider IE, and various new CSS features are also very enjoyable to use, but a big mountain is pressing down, that is, resolution adaptation. Since the display area of ​​mobile terminals is relatively small, the display details of the page on mobile phones with different resolutions are also required to be more stringent. At this time, some fixed width and height layout methods like PC terminals are obviously not suitable. We are required to be able to adapt to different sizes of mobile phone pages. It is really very interesting.

Without further ado, here are some common adaptation techniques for mobile terminals:

1. Percentage

Usage scenario: only the width needs to adapt to the screen, such as text blocks

Percentage is also often used in PC adaptation, which is really easy to use, but it is generally used for width adaptation settings. When setting the height as a percentage, its parent element is required to have a clear height.

1. Use percentage to fill the full screen

In order to make the element height: 100% effective and exactly the window height, you need to set the height of the html and body elements and all their parent elements to 100%.

For example:

<html style="height: 100%;">
  <body style="height: 100%;">
    <div class="wrap" style="height: 100%; width:100%">
        Fill the full screen</div>
  </body>
</html>

Some things to note when using height: 100%;

  • Margins and padding will cause scroll bars to appear on your page, which may not be what you want.
  • If the actual height of your element is greater than the percentage height you set, the height of the element will automatically expand.

Having written this far, I suddenly want to make a digression. For absolutely positioned elements, using height: 100% is obviously invalid, because at this time it has been separated from the document flow, and its height is now supported by its own content. What if I want it to fill the parent box? There is a black magic here, set its top, left, bottom, and right to 0, then the box will be stretched to fill the parent box.

2. Use percentage to fix aspect ratio

Sometimes, we want the width to be adaptive, the height to change with the width, and have a fixed aspect ratio.

Let's take a look at it. Using height percentage obviously doesn't work. Height percentage is based on the height of the parent element, and we need to set the height based on the width.

So padding-top or padding-bottom can be used here. Padding is based on the width of the parent element. We can set the element's height: 0, and then use padding-bottom to stretch the element to achieve a fixed aspect ratio.

2. rem

Usage scenario: For scenes that require high adaptability, such as pictures

rem unit: based on the root font size of the page, that is, the font size of the html element, for example

html{
    font-size:16px;
}

Then 1rem is equal to 16px.

So when using it, we just need to let the root font size adapt to the screen size, then all the elements on the page that use rem units to set the width and height will also adapt to the screen size.

There are two ways to set the root font size according to different screen sizes:

1. CSS method to set rem

Use media queries to set according to different screen sizes. The disadvantage is that it generally only lists some representative screen sizes, and the adaptation cannot fully cover all ranges.

html{
    font-size:10px
} 
@media screen and (min-width:321px) and (max-width:375px) {
    html{
        font-size:11px
    }   
} 
@media screen and (min-width:376px) and (max-width:414px) {
    html{
        font-size:12px
    }
} 
@media screen and (min-width:415px) and (max-width:639px) {
    html{
        font-size:15px
    }
} 
@media screen and (min-width:640px) and (max-width:719px) {
    html{
        font-size:20px
    }
} 
@media screen and (min-width:720px) and (max-width:749px) {
    html{
        font-size:22.5px
    }
} 
@media screen and (min-width:750px) and (max-width:799px) {
    html{
        font-size:23.5px
    }
} 
@media screen and (min-width:800px) {
    html{
        font-size:25px
    }
}

2. JS method to set rem

The root font size is set using JS, so if the change occurs after rendering is complete, it will cause a reflow and cause a flash screen. Therefore, when using this method, the JS code should be placed in the head and before the CSS is introduced.

(function (doc, win) {
  var docEl = doc.documentElement,
    resizeEvt = 'orientationchange' in window ? 'orientationchange' : 'resize',
    recalc = function () {
      var clientWidth = docEl.clientWidth;
      if (!clientWidth) return;
      docEl.style.fontSize = 20 * (clientWidth / 375) + 'px';
    };
  recalc(); 
  if (!doc.addEventListener) return;
  win.addEventListener(resizeEvt, recalc, false);
})(document, window);

In the above, clientWidth is the actual screen width, 375 is the reference screen width that the design is based on, and 20 is the size of 1rem when the actual screen width is equal to the reference screen width. The key parameters 20 and 375 of the code are set like this:

a) Since the design drafts provided are basically based on iPhone 6/7/8, with a width of 750px and a dpr of 2, the reference screen width when calculating rem can be set to 375.

b) Since the minimum font size of Chrome is 12px, and for the convenience of calculation, the size of 1rem can be set to 20px
During the application process, for example, if we get a design draft of 750, then first, divide the value in the design draft by 2 to get the value of the layout according to the size of the mobile phone screen (this is also the origin of 375). Then, divide by 20 to convert the px in the design draft into rem.

3. Media Inquiries

Usage scenario: Media queries are generally used for special processing, such as

1. Adaptation to full-screen devices such as iPhoneX

2. When adapting to super large screens such as iPhone Plus or horizontal screen of pad with DPR of 3, it is necessary to set the critical value according to business needs, and then display different content or replace pictures with different resolutions (that is, the use of 2x pictures and 3x pictures) etc.

4. vw, vh

vw is a percentage unit based on the screen width, 1vw=1% * deviceWidth

vh is a percentage unit based on the screen height, 1v=1% * deviceHeight

vw and vh are indeed very useful, but compatibility issues still need to be considered when using them. They will fail in the browsers that come with some domestic mobile phones (such as Huawei), and it is said that they are prone to problems when using the X5 kernel.

The above is the full content of this article. I hope it will be helpful for everyone’s study. I also hope that everyone will support 123WORDPRESS.COM.

<<:  Detailed explanation of the relationship between Linux and GNU systems

>>:  HTML sample code for implementing tab switching

Recommend

Talking about ContentType(s) from image/x-png

This also caused the inability to upload png files...

Mysql sorting to get ranking example code

The code looks like this: SELECT @i:=@i+1 rowNum,...

Vue sample code for easily implementing virtual scrolling

Table of contents Preface Rolling principle accom...

Analysis of Mysql data migration methods and tools

This article mainly introduces the analysis of My...

CentOS7 uses rpm package to install mysql 5.7.18

illustrate This article was written on 2017-05-20...

Docker data volume container creation and usage analysis

A data volume container is a container specifical...

Detailed explanation of the 8 attribute values ​​of the background attribute (interview question)

The value of the background property in CSS backg...

Text mode in IE! Introduction to the role of DOCTYPE

After solving the form auto-fill problem discussed...

Web Design: Script Materials Reconstruct User Experience

<br />Original text: http://blog.rexsong.com...

Detailed explanation of MYSQL database table structure optimization method

This article uses an example to illustrate the me...

11 Linux KDE applications you didn't know about

KDE Abbreviation for Kool Desktop Environment. A ...

How to install Zookeeper service on Linux system

1. Create the /usr/local/services/zookeeper folde...

VMware vsphere 6.5 installation tutorial (picture and text)

vmware vsphere 6.5 is the classic version of vsph...

Defining the minimum height of the inline element span

The span tag is often used when making HTML web p...

Conventional JS processing functions for Vue Element front-end application development

Table of contents 1. Filter, map, and reduce proc...