preface

Don’t know we met in what I do need to transform a non mobile side project quickly become the demand of the mobile terminal adapter This article theory + practical demonstration for quick analysis can transform a project to make its mobile terminal adapter At the same time to the mobile terminal adapter scheme are also summarized Mother don’t have to worry about a set of code compatible with different terminal Ha ha go

What is an adaptive site? Responsive website, H5 website, widescreen website, these can be called adaptive website, simply said that a website can be compatible with different terminals, such as: computer, iPad, mobile phone and so on. There is no need to make a version of the website for each device, the website automatically identifies, compatible, complete computer website, mobile website, micro website. At the same time, computer website, mobile website, micro website unified background, data synchronization, easy management.

The body of the

1. Common adaptation solutions

  • Media Queries This program is estimated that we are familiar with the main use of CSS3 new features of media queries to determine the width of the device in different areas using different styles of personalized customization will be higher here take a look at examples

    The PC style is as follows

    The mobile style is as follows

  • Rem (font size of the root Element) Unit of font size relative to the root element. It is simply a relative unit, and the rule of REM calculation depends on the root element. The principle is to design the page according to the fixed height and width first, and then convert to REM units, with JS query screen size to change the HTML font size

    We can look at taobao and netease practice

    The following example is a simple REM layout to achieve adaptive font width, height, margins, etc. All rem instead of PX

  • Flex, short for Flexible Box, is used to provide maximum flexibility to Box models. Mobile browsers generally support Flex well, so many layouts use elastic box layouts that can be combined with percentage layouts to achieve the desired effect

    You can refer to flex adaptive layout on mobile

    The following example is a partial use of Flex to achieve some element adaptation of the page, but the entire page also includes REM and media queries

  • A viewport is a virtual window in a mobile device browser for a page that can be larger or smaller than the mobile device’s viewable area. When we put a PC web page on the mobile, the mobile browser will display the PC web page in full proportion, because the mobile browser will render the web page in a large scale layout by default (ios default is 980px). 980px above Android4.0), and then zoom to see the full picture of the page.

    You can refer to viewPorts for mobile Web development

    If you’re working on a mobile project, you’ll probably see this phrase a lot: add a meta tag to the page head

    <meta
  name="viewport"
  content="width=device-width, initial-scale=1, maximum-scale=1, minimum-scale=1, user-scalable=no"
/>
Copy the code
    • Width =device-width: indicates the width of the device screen
    • Initial-scale =1: indicates the initial scaling ratio
    • Minimum-scale =1: indicates the minimum scale
    • Maximum-scale =1: indicates the maximum scale
    • User-scalable =no: indicates whether the user can adjust the scaling

    In my own research on mobile adaptation, I found that a lot of websites don’t have a viewPort set up deliberately, especially if they don’t have mobile adaptation in mind at the beginning, the width of the page is a dead px and it turns out that if you don’t set the viewport, the browser will automatically scale, Zooming in so that it doesn’t have a scrollbar is sort of adaptive

    We can see the effect

    • Width write dead do not set viewPort

    • Width write dead set viewPortYou can see that after setting the ViewPort the style is obviously messed up and the original PX values are displayed with a scroll bar

2. Adaptation scheme summary

If you are thinking about making an adaptive website, you need to plan out your ideas from the beginning. You need to set up your REM based on the design, use media query Flex, percentage layout, etc. You can customize PC and mobile style with a set of code

If you need to modify the existing PC side project to the mobile side, you can choose your own technical solution according to the complexity of the project. Of course, if the adaptive requirements are not very high, you can consider the project layout center width as the adaptive base width of the old project and remove the viewport setting to let the browser zoom Although the effect may not be as good as their own personalized customization, but it can be used as a relatively simple and general scheme

3. Analyze and transform the system to make it self-adaptive

3.1 Determining whether to Set the ViewPort

See if you can modify project fitness by simply configuring the ViewPort

Conclusion: The project has configured viewPort on the mobile side

3.2 Analyze the front-end technology stack and UI framework of the project

See if the framework’s built-in adaptation can be applied

Conclusion: This project is currently built using vue+ Element-UI

3.3 the layout

Look at common layout methods and CSS writing for your project

Conclusion: The layout of the project is basically an elastic box layout using Flex

Most people will probably look at this and think that this project should have some adaptive capabilities. Although rem and media queries are not used, the Element-UI framework has adaptive methods and Flex is a smart adaptive way to layout on the mobile side. So let’s take a look at the effect on the mobile side

Isn’t it a little different from what you might expect? Although the navigation on the left is adaptive, the main body of the page has a scroll bar that is not viewable on the mobile side. Let’s analyze why this is the case

4. Existing problems and solutions in the adaptation of the system to be transformed

4.1 The page has write dead width

The parent element uses a Flex layout but also specifies a width that is not adaptive

Let’s change the width to a percentage and see what happens

It can be seen that the adaptation effect can be achieved under the 893px screen

But what we need to do is the mobile adaptation 893px is obviously too big. Next we change the flex direction of the parent element to vertical and change the width of its children to percentages

It can be seen that the home page has been adapted to the mobile terminal haha ~~

4.2 Use absolute location for multiple pages

When we see a lot of words superimposed on the mobile terminal, it is likely to be caused by the adoption of absolute positioning. For example:

Tip: Although absolute positioning is simple and crude, in many cases it is not recommended if there is an alternative because it does not fit well

We can use Flex or float instead of absolute positioning but float must work with ClearFix if not use media query to change positioning to match

5. The system to be modified is repaired

5.1 Workbench Page
  • Before the repair

  • After repair

5.2 Schedule Page
  • Before the repair

  • After repair

5.3 Task Page
  • Before the repair

  • After repair

5.4 Announcement and Subsequent Pages
  • Before the repair

  • After repair

6. Summary

As you can see, we simply changed the width of the parent element that set the Flex layout to a percentage and then tried to remove some of the absolute positioning as much as possible by changing the Flex orientation to vertical with media queries if necessary, and then a system that looks messy and has scroll bars can be adapted to mobile thanks to the extensive use of Flex layout throughout the system So flex plus percentage layout is a good choice for our project when considering mobile side adaptation, but we must not fix the width in the project. If we want to have a set of code that fits different ends, we need to have more detailed control suggestions and rem and media query to customize the effect of different ends

Finally, if you think this article is helpful, please remember to like three lian Oh, thank you very much!

This article is participating in the “Nuggets 2021 Spring Recruitment Campaign”, click to see the details of the campaign

Shark’s front-end fishing skills

Welcome everyone technical exchange push touch fish help all can – link