preface

Due to the rapid development of mobile Internet, now there is basically no front-end said that they only develop PC terminal, mobile terminal what I do not care.

Even the main work content of many front-end is to develop mobile terminal, because the content of mobile terminal is various: wechat small program, Alipay small program, JD small program, fast application, wechat public platform, wechat small game, mixed App, H5 and so on…

Open the recruitment software, you can see that the current position on the front end of the requirements are more and more high, omnipresent, in front of the screen you can also open the software to have a look at the requirements, is there at least one or two of such a few: Proficient in mobile terminal front-end technology, have micro channel small program development experience is preferred, have mixed App development experience is preferred, even if not the kind of company specializing in mobile terminal website, there are many also write will be mobile terminal priority…

Therefore, the layout of mobile terminal is very important, because no matter how complicated the interactive logic behind a website page, how large the number of users, how massive data, how high concurrency… It has to have a page after all! Can’t let the user visit the website directly to the people to see the database!

Where there are people there are rivers and lakes where there is a page layout

Layout is not just a neat list of data on a page, a proper layout can make the user’s operation very smooth. At the same time, different layouts should be selected in different scenarios. If the wrong layout is selected, the user’s operation on the page may not be so smooth, even if the initial data presented is the same.

Since the mobile screen is not as large as a computer screen, and the aspect ratio is quite different, the mobile layout is quite different from the PC layout, so let’s take a look at the various common layouts.

Centered layout

In fact, the center layout is basically seen in daily life, but at that time did not pay much attention to it.

A layout that doesn’t impress the user is a good layout because the user’s attention is focused on the content, proving that the layout works well for the user.

Layouts that make an impression on the user are generally less impressive (with the exception of some unusual and cool layouts) :

Why is this button here? I’ve touched it several times by mistake; Where’s the close button? How do you close this? Where is the description of this product? Where should I buy it? This layout how disorderly see I all dizzy, ah forget forget, later will not come to this website……

Different layouts are used to correspond to different scenes. If the right scene is used, the user’s operation will be more comfortable and smooth. However, if the wrong scene is used, the user may be confused, which is not conducive to guiding the user to operate in the way they want.

This layout, where the main content is at the center of the page, is often seen during login, registration, prompting the user, or clicking on the avatar to see a larger image, and is usually covered with a gray transparent mask:

In addition to highlighting the theme, another important point is to make users feel that they have not left the current page, but just a small box appears in the current page, which can effectively reduce the strangeness of users.

Not only that, but the center layout also effectively guides the user to what they want them to do, with a strong sense of contrast to guide the user:

Using CSS library implementation

With the existing CSS library on the market, we can easily do the center layout, especially can use Chinese keywords, which is very conducive to our memory, it is Chinese-layout.

Then we beautify our interface with a CSS library for Chinese gradients-Chinese-gradient.

<! DOCTYPEhtml>
<html>
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="Width = device - width, initial - scale = 1.0">
  <title>Document</title>
  <! Introduce Chinese layout with link tag -->
  <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/chinese-layout">

  <! -- Use link tag to introduce Chinese gradient -->
  <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/chinese-gradient">
  <style>
    /* Clear the default style */
    * { padding: 0; margin: 0; }

    /* Make HTML and body full screen */
    html.body { height: 100%; }

    body {
      /* Set the grid layout */ on the parent element
      display: grid;
      grid: var(center);/* Give a nice gradient */
      background: var(- haze grey); }.center {
      /* Specifies the child element in the center */The grid - area:;/* Set the width and height of the child element. Otherwise, if the width and height are 0, nothing will be seen */
      width: 150px;
      height: 150px;

      /* Give a nice background color */
      background: var(-- Rouge powder); }</style>
</head>
<body>
  <div class="center"></div>
</body>
</html>
Copy the code

Running result:

Absolute positioning implementation

The center layout is usually divided into two types, one is fixed width and the other is not fixed width and height.

Fixed width and height is easy to understand, as the name implies that the width and height are written dead. Instead of a fixed width and height, the box is usually held up by its contents, more or less.

These two methods also create different technical implementations, absolute positioning method is suitable for fixed width and height:

<! DOCTYPEhtml>
<html>
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="Width = device - width, initial - scale = 1.0">
  <title>Document</title>
  <style>
    /* Clear the default style */
    * { padding: 0; margin: 0; }

    /* Make HTML and body full screen with a gray background */
    html.body { height: 100%; background: gray; }

    /* Set relative positioning */ on the parent element first
    body { position: relative } 

    .center {
      /* Absolute positioning */
      position: absolute;

      /* 0 */
      top: 0;
      right: 0;
      bottom: 0;
      left: 0;

      /* Set width and height */
      width: 70%;
      height: 25%;

      /* Let the margin automatically fill in */
      margin: auto;

      /* White background */
      background: white;
    }
  </style>
</head>
<body>
  <div class="center"></div>
</body>
</html>
Copy the code

Running result:

  • If you don’t give a width or height, the box will be the same size as the parent element, because the absolute position is 0, above, below, left, and right, which means it is right next to the parent element.
  • < span style = “box-sizing: border-box; color: RGB (50, 50, 50); line-height: 20px; font-size: 14px; white-space: normal;”
  • To the margin: auto; If so, the browser will automatically fill in the margin, making it centered.
  • This implementation has the advantage of good compatibility, almost no new CSS features, all classic properties.

Absolute positioning + negative margin

This method is also applicable to fixed width and height:

<! DOCTYPEhtml>
<html>
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="Width = device - width, initial - scale = 1.0">
  <title>Document</title>
  <style>
    /* Clear the default style */
    * { padding: 0; margin: 0; }

    /* Make HTML and body full screen with a gray background */
    html.body { height: 100%; background: gray; }

    /* Set relative positioning */ on the parent element first
    body { position: relative }

    .center {
      /* Absolute positioning */
      position: absolute;

      /* Top and left are 50% */
      top: 50%;
      left: 50%;

      /* Set width and height */
      width: 300px;
      height: 200px;

      /* half of the given height with a negative margin */
      margin-top: -100px;

      /* The left margin is negative by half the given width */
      margin-left: -150px;

      /* White background */
      background: white;
    }
  </style>
</head>
<body>
  <div class="center"></div>
</body>
</html>
Copy the code

Running result:

⚠️ Note that the “absolute positioning + negative margin” method is not suitable for relative units of percent width and percent height, but for specific values.

Because the margin percentage and the width percentage are not the same reference, it is calculated with respect to the width of the parent element, note this.

Absolute positioning + translation

Sometimes the content of the middle box is determined by the data passed from the background. If it is written too much, it will overflow when there is too much data, and a large space will be left when there is too little data. Therefore, we need a more intelligent way to realize the center layout.

Absolute positioning + translation is an improved version of absolute positioning + negative margin, so what are the specific improvements? The percentage of the negative margin is not relative to itself, but relative to the parent element, so writing only specific pixel values is not smart enough.

While translating relative to itself, you only need to mindless write -50% :

<! DOCTYPEhtml>
<html>
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="Width = device - width, initial - scale = 1.0">
  <title>Document</title>
  <style>
    /* Clear the default style */
    * { padding: 0; margin: 0; }

    /* Make HTML and body full screen with a gray background */
    html.body { height: 100%; background: gray; }

    /* Set relative positioning */ on the parent element first
    body { position: relative }

    .center {
      /* Absolute positioning */
      position: absolute;

      /* Top and left are 50% */
      top: 50%;
      left: 50%;

      /* You don't have to give a width or height, but you can give an inside margin to prevent the contents from fitting into the box */
      padding: 10px;

      /* This 50% is relative to its own width and height */
      transform: translate(-50%, -50%);

      /* White background */
      background: white;
    }
  </style>
</head>
<body>
  <div class="center">Open the box with the contents</div>
</body>
</html>
Copy the code

Running result:

  • Margin % is the width relative to the parent element;
  • whiletranslateThe percentage of the function is relative to itself;
  • Not only for unknown width and height, but also for fixed width and height in the center layout.

Grid implementation

You’ve probably heard a lot about The Grid, and if you know it, it’s powerful, but if you don’t, it’s not compatible

But as time goes on, it’s pretty much working on mobile as long as you don’t have to worry about a particularly low version of the phone.

Even if you don’t have much interest in the Grid, using Flex on mobile is enough. It doesn’t take too much effort to remember its simplest use. Because after all, your interviewer will be impressed if you can show them the latest technology:

<! DOCTYPEhtml>
<html>
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="Width = device - width, initial - scale = 1.0">
  <title>Document</title>
  <style>
    /* Clear the default style */
    * { padding: 0; margin: 0; }

    /* Make HTML and body full screen with a gray background */
    html.body { height: 100%; background: gray; }

    /* Direct parent of the central box */
    body {
      /* Make it a grid layout */
      display: grid;

      /* Center its children */
      place-items: center;
    }

    .center {
	  /* You don't have to give a width or height, but you can give an inside margin to prevent the contents from fitting into the box */
      padding: 10px;
      
      /* White background */
      background: white;
    }
  </style>
</head>
<body>
  <div class="center">Open the box with the contents</div>
</body>
</html>
Copy the code

Running result:In fact, the key code is surprisingly simple, and there is hardly any great cost to learn, just two lines:

/* Make it a grid layout */
display: grid;

/* Center its children */
place-items: center;
Copy the code

Flex box

Flex, the king of mobile layout:

<! DOCTYPEhtml>
<html>
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="Width = device - width, initial - scale = 1.0">
  <title>Document</title>
  <style>
    /* Clear the default style */
    * { padding: 0; margin: 0; }

    /* Make HTML and body full screen with a gray background */
    html.body { height: 100%; background: gray; }

    /* Find the immediate parent element */ of the central box
    body {
      /* Make it flexible */
      display: flex;
    }

    .center {
      /* Automatic margins */
      margin: auto;

      /* White background */
      background: white;

      /* You don't have to give a width or height, but you can give an inside margin to prevent the contents from fitting into the box */
      padding: 10px;
    }
  </style>
</head>
<body>
  <div class="center">Open the box with the contents</div>
</body>
</html>
Copy the code

Running result:There’s almost nothing Flex can’t do, right? Super easy to use, simple, affordable and convenient, if you can’t do this, you can go to the ruan Yifeng teacher’s blog, which has a very detailed tutorial:

  • Nguyen other blog: www.ruanyifeng.com/blog/2015/0…

In addition, Zhang Xinxu wrote a good blog:

  • Zhang Xinxu blog: www.zhangxinxu.com/wordpress/2…

Table layout

In the case of a center layout, a tabular layout also works:

<! DOCTYPEhtml>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="Width = device - width, initial - scale = 1.0">
  <title>Document</title>
  <style>
    /* Clear the default style */
    * { padding: 0; margin: 0; }

    body {
      /* Make the body display in full screen */
      width: 100vw;
      height: 100vh;

      /* Display as a table of cells */
      display: table-cell;

      /* Level in the middle */
      text-align: center;

      /* Vertical center */
      vertical-align: middle;

      /* Gray background */
      background: gray;
    }

    .center {
      /* Displays as an in-line block element */
      display: inline-block;

      /* You don't have to give a width or height, but you can give an inside margin to prevent the contents from fitting into the box */
      padding: 10px;

      /* White background */
      background: white;
    }
  </style>
</head>
<body>
  <div class="center">Open the box with the contents</div>
</body>
</html>
Copy the code

Running result:The key points of this layout are:

  • Three style Settings on the parent element:

    • display: table-cell;
    • text-align: center;
    • vertical-align: center;

  • Set on the child element:

    • display: inline-block;

conclusion

After reading these are not very depressed, a small center layout are so many ways to achieve, and this is not all the way to achieve, I only picked a few common market, you may feel the need to remember so much!

In fact, this question appears to be different people, on the one hand interview build rocket, work screw status quo let everyone very distressed. Obviously think their technology is good, at least the company wants to be able to achieve, but when the interview in the face of the interviewer’s difficulties they can do nothing.

Your next interview may not be with an interviewer who wants you to be centered in a variety of ways, but it’s always good to broaden your horizons, because changing your thinking can help you choose a more complex layout quickly.

The article was first published on the front end of the public number

By the way, this post is serialized, and the center layout is just the beginning. Like + follow us on our next layout!

Previous excellent article

  • Microsoft launches comments section on GitHub
  • Vue 3.0.3: New CSS variable passing and the latest Ref Proposal
  • You Yuxi: Ref Grammar Sugar Proposal
  • “Double 11 small black box is cool? Let’s use CSS variables to improve!”
  • “Don’t underestimate the nine grid, one question can let a candidate reveal his true colors!”
  • A series of confusing behaviors after setting prototype Objects as Proxies
  • Vue’s Super Fun New Feature: DOM Portal
  • A fun new feature of Vue: Introducing JS variables into CSS
  • Create your own Visual Data Map without any libraries
  • “Use of React’s Super-popular CSS-in-JS Library in the Vue Project: Styled – Components”
  • Is It Finally Vue’s Turn to Inspire React?
  • A Small Pit in Vue3 on IOS
  • Upgrade your React project to Immer instead of Immutable by 2020
  • “Soul Interrogation from the Author of React Hooks and Immutable”
  • Good news, Vue3 official document is available in Chinese!
  • Hooks use of the New VUe-Router
  • Vue 3:20 Years of Status Updates
  • React 17 is officially a transition version!
  • Yu Yuxi: The Design Process of Vue3
  • The Father of Node’s refactoring Deno is finally released. Will it Replace Node after all?
  • The Vue3 beta was released early this morning and openly supports scaffolding!