Mobile terminal layout interview questions comprehensively examine your CSS skills (centered)

Preface

Due to the rapid development of the mobile Internet, there is basically no front end that says that it only develops the PC side, and I don’t care about the mobile side.

Even the main work content of many front-ends is to develop the mobile terminal, because the content of the mobile terminal is varied: WeChat applet, Alipay applet, JD applet, Kuaiapp, WeChat public platform, WeChat mini game, hybrid App, H5, etc...

Open the recruitment software, you can see that the current position has higher and higher requirements for the front-end, and the sky is omnipotent. You can also open the software in front of the screen to have a look at the requirements. Are there at least similar ones? One or two: proficiency in mobile front-end technology, WeChat applet development experience is preferred, mixed App development experience is preferred, even if it is not the kind of company that specializes in mobile websites, many of them also write that mobile is preferred …

So the layout of the mobile terminal is very important, because no matter how complicated the interaction logic behind the pages of a website, how huge the number of users, how large amounts of data, how high concurrency...
it still has to have a page after all! Don't let users directly show the database to others as soon as they visit the website!

Where there are people, there are rivers and lakes where there are pages, there are layouts

The layout is more than just listing the data neatly on the 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, it is likely that the user's operation on the page will not be so silky, even if the data initially presented is the same.

Since the screen of the mobile terminal is not as big as the computer screen, and the aspect ratio is also very different, so the layout of the mobile terminal is very different from the layout of the PC terminal, so let's take a look at the various Common layout.

Centered layout

In fact, everyone has seen the centered layout in daily life, but I didn't pay much attention to it at the time.

The layout that did not impress the user is a good layout, because the user's attention is on the content, which proves that the layout at this time makes the user's operation smooth.

The layout that impresses users is generally not good (except for some cool and distinctive layouts):

Why is this button here? I have touched it several times by mistake; where is the close button? How to close this; where is the introduction of this product? Where should I order? Why is this layout so messy, I feel dizzy, hey, forget it, I won’t come to this website in the future...

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

This layout is where the main content is in the center of the page. It is common in scenarios such as logging in, registering, prompting users, or clicking on the avatar to view a larger image. A gray transparent mask is usually added:

In addition to highlighting the theme, another important point is to make users feel that they have not left the current page, but a small box appears on the current page, which can effectively reduce the user’s burden. Strangeness.

Not only that, the centered layout can also effectively guide users to perform the operations they want users to perform, and guide users with a strong sense of contrast:

Use CSS library to achieve

With the help of existing CSS libraries on the market, we can easily achieve centered layout, especially Chinese keywords can be used, which is very conducive to our memory, it is Chinese -layout .

Then we use a Chinese gradient CSS library to beautify our interface: chinese-gradient .

<!DOCTYPE html>
<html>
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
  <!-- 在这里用link标签引入中文布局 -->
  <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/chinese-layout">

  <!-- 在这里用link标签引入中文渐变色 -->
  <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/chinese-gradient">
  <style>
    /* 清除默认样式 */
    * {
     
      padding: 0; margin: 0; }

    /* 令html和body全屏显示 */
    html, body {
     
      height: 100%; }

    body {
     
     
      /* 先在父元素上设置grid布局 */
      display: grid;
      grid: var(--居中);

      /* 给个好看的渐变色 */
      background: var(--霾灰);
    } 

    .center {
     
     
      /* 指定子元素在中心位置 */
      grid-area: 中;

      /* 给子元素设置宽高，不然宽高为0导致什么也看不见 */
      width: 150px;
      height: 150px;

      /* 给一个好看的背景色 */
      background: var(--胭脂粉);
    }
  </style>
</head>
<body>
  <div class="center"></div>
</body>
</html>

operation result:

Absolute positioning realization

Centered layout is usually divided into two types, one is fixed width and height, and the other is non-fixed width and height.

Fixed width and height are easy to understand, as the name implies, both width and height are hard-coded.
The non-fixed width and height usually rely on the content inside to prop up the height of the box, and the content is more or less sometimes.

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

<!DOCTYPE html>
<html>
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
  <style>
    /* 清除默认样式 */
    * {
     
      padding: 0; margin: 0; }

    /* 令html和body全屏显示, 并有一个灰色背景 */
    html, body {
     
      height: 100%; background: gray; }

    /* 先在父元素上设置相对定位 */
    body {
     
      position: relative } 

    .center {
     
     
      /* 绝对定位 */
      position: absolute;

      /* 上下左右全部为0 */
      top: 0;
      right: 0;
      bottom: 0;
      left: 0;

      /* 给定宽高 */
      width: 70%;
      height: 25%;

      /* 令外边距自动填充 */
      margin: auto;

      /* 白色背景 */
      background: white;
    }
  </style>
</head>
<body>
  <div class="center"></div>
</body>
</html>

operation result:

• If you don't specify the width and height, the box will be the same size as the parent element, because the absolute positioning is 0, which means it is close to the edge of the parent element.
• Fixed width and height are given, but if margin is not written , the box will be fixed in the upper left corner, because top and left have higher priority.
• If margin: auto; is given, the browser will automatically fill in the margin to center it.
• The advantage of this implementation is that it has good compatibility, almost no new features of CSS are used, and all of them are classic properties.

Absolute positioning + negative margin

This method is also suitable for fixed width and height:

<!DOCTYPE html>
<html>
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
  <style>
    /* 清除默认样式 */
    * {
     
      padding: 0; margin: 0; }

    /* 令html和body全屏显示, 并有一个灰色背景 */
    html, body {
     
      height: 100%; background: gray; }

    /* 先在父元素上设置相对定位 */
    body {
     
      position: relative }

    .center {
     
     
      /* 绝对定位 */
      position: absolute;

      /* 上方和左方为50% */
      top: 50%;
      left: 50%;

      /* 给定宽高 */
      width: 300px;
      height: 200px;

      /* 上外边距为负的给定高度的一半 */
      margin-top: -100px;

      /* 左外边距为负的给定宽度的一半 */
      margin-left: -150px;

      /* 白色背景 */
      background: white;
    }
  </style>
</head>
<body>
  <div class="center"></div>
</body>
</html>

operation result:

⚠️ Note that the "absolute positioning + negative margin" method is not suitable for relative units of percent width and percent height. Instead, specific values ​​are used.

Because the percentage of the margin and the percentage of width and height are not the same reference, it is calculated relative to the width of the parent element. Pay attention to this.

Absolute positioning + translation

Sometimes the content of the middle box is determined by the data transferred from the background. If it is hard to write, overflow will occur when there is more data, and a large area will be vacated when there is less data, so we need a smarter way To achieve a centered layout.

绝对定位 + 平移Is 绝对定位 + 负边距an improved version, then what specific improvements are aspects of it?
The percentage of negative margins is not relative to itself, but relative to the parent element, so only specific pixel values ​​can be written, which is not smart enough.

The translation relative to itself, just no brain to write -50%on it:

<!DOCTYPE html>
<html>
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
  <style>
    /* 清除默认样式 */
    * {
     
      padding: 0; margin: 0; }

    /* 令html和body全屏显示, 并有一个灰色背景 */
    html, body {
     
      height: 100%; background: gray; }

    /* 先在父元素上设置相对定位 */
    body {
     
      position: relative }

    .center {
     
     
      /* 绝对定位 */
      position: absolute;

      /* 上方和左方为50% */
      top: 50%;
      left: 50%;

      /* 不用给宽高，但是可以给个内边距防止内容与盒子过于贴合 */
      padding: 10px;

      /* 这个50%是相对于自身宽高而言的 */
      transform: translate(-50%, -50%);

      /* 白色背景 */
      background: white;
    }
  </style>
</head>
<body>
  <div class="center">
    用内容撑开盒子
  </div>
</body>
</html>

operation result:

• The percentage of margin is relative to the width of the parent element;
• And translatea function of percentage is relative to itself;
• It is not only suitable for unknown width and height, but also for centered layout with fixed width and height.

Grid implementation

You may have heard a number of more or less Gridname, had in-depth understanding of people would think it is very powerful, but not in-depth understanding of people had the impression that it might be:兼容性不好

But with the passage of time, it can basically be used on the mobile terminal as long as you don’t consider particularly low-version mobile phones.

Even if you are Gridnot interested in moving that end with Flexjust enough of. It won't take much effort to remember its simplest usage. Because after all, if you can write the latest technology to the interviewer, the interviewer will also look at you with admiration:

<!DOCTYPE html>
<html>
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
  <style>
    /* 清除默认样式 */
    * {
     
      padding: 0; margin: 0; }

    /* 令html和body全屏显示, 并有一个灰色背景 */
    html, body {
     
      height: 100%; background: gray; }

    /* 中央盒子的直接父元素 */
    body {
     
     
      /* 令其变成网格布局 */
      display: grid;

      /* 令其子元素居中 */
      place-items: center;
    }

    .center {
     
     
	  /* 不用给宽高，但是可以给个内边距防止内容与盒子过于贴合 */
      padding: 10px;
      
      /* 白色背景 */
      background: white;
    }
  </style>
</head>
<body>
  <div class="center">用内容撑开盒子</div>
</body>
</html>

Operation result:

In fact, the key code is unusually simple, and there is almost no significant learning cost. Just two lines:

/* 令其变成网格布局 */
display: grid;

/* 令其子元素居中 */
place-items: center;

Flex Box

Flex, the king of mobile layout:

<!DOCTYPE html>
<html>
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
  <style>
    /* 清除默认样式 */
    * {
     
      padding: 0; margin: 0; }

    /* 令html和body全屏显示, 并有一个灰色背景 */
    html, body {
     
      height: 100%; background: gray; }

    /* 找到中央盒子的直接父元素 */
    body {
     
     
      /* 令其变成弹性布局 */
      display: flex;
    }

    .center {
     
     
      /* 自动外边距 */
      margin: auto;

      /* 白色背景 */
      background: white;

      /* 不用给宽高，但是可以给个内边距防止内容与盒子过于贴合 */
      padding: 10px;
    }
  </style>
</head>
<body>
  <div class="center">用内容撑开盒子</div>
</body>
</html>

Operation result:

Flex is almost impossible, right? It's super easy to use, simple, affordable and convenient. If you don't know this, you can go to the blog of teacher Ruan Yifeng, which contains a very detailed tutorial:

• Ruan Yifeng's blog: http://www.ruanyifeng.com/blog/2015/07/flex-grammar.html

In addition, Zhang Xinxu’s blog is also very good:

• Zhang Xinxu's blog: https://www.zhangxinxu.com/wordpress/2018/10/display-flex-css3-css/

Table layout

In the centered layout scenario, the table layout is also very suitable:

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
  <style>
    /* 清除默认样式 */
    * {
     
      padding: 0; margin: 0; }

    body {
     
     
      /* 令body全屏显示 */
      width: 100vw;
      height: 100vh;

      /* 显示为表格的格子 */
      display: table-cell;

      /* 水平居中 */
      text-align: center;

      /* 垂直居中 */
      vertical-align: middle;

      /* 灰色背景 */
      background: gray;
    }

    .center {
     
     
      /* 显示为行内块元素 */
      display: inline-block;

      /* 不用给宽高，但是可以给个内边距防止内容与盒子过于贴合 */
      padding: 10px;

      /* 白色背景 */
      background: white;
    }
  </style>
</head>
<body>
  <div class="center">用内容撑开盒子</div>
</body>
</html>

Running results:

The key points of this layout are:

• 3 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, is it very depressing? There are so many ways to implement a small centered layout, and this is not all of the ways to implement it. I only picked a few common ones on the market, and you may think that it is necessary to remember this So much!

In fact, this question seems to be that the benevolent sees the benevolent and the wise see the wisdom. On the one hand , the current situation of making rockets in interviews and screwing screws at work makes everyone very distressed. Obviously I feel that my technology is not bad, at least what the company wants can be achieved, but I can't do anything in the face of the interviewer's difficulties during the interview.

Maybe the next interview will not meet an interviewer who will let you achieve the centering layout in various ways, but it is always good to broaden your horizons, because a change of thinking will help you to quickly choose when you encounter a complex layout. .

The article was first published on the public account前端学不动

By the way, this article is serialized. The centered layout is just the beginning. 点赞 + 关注See you next time!