Original address: github.com/HuJiaoHJ/bl…

Web mobile layout covers a wide range of topics, including basic topics:

  • Mobile adaptation
  • 1px border
  • Basic layout

This article will focus on these three topics

First, mobile terminal adaptation

When it comes to mobile adaptation, people must think of REM and flexibily.js, and the solution to be shared in this paper is VW + REM

If you are not familiar with mobile terminal adaptation, you can check it out:

  • Use Flexible to achieve terminal adaptation of H5 page
  • Talk about the adaptation of the mobile page
  • How to use VW for mobile adaptation in a Vue project

What is VW?

Vw is a unit of length based on a Viewport, and the four units associated with Viewport are:

  • Vw: short for Viewport’s Width. 1vw is equal to 1% of window.innerWidth
  • Vh: short for Viewport’s Height. 1vh equals 1% of window. InnerHeight
  • Vmin: the lower value of the current VW and VH
  • Vmax: the current greater value in VW and VH

The conventional REM adaptation scheme (including flexible) is actually to simulate the effect of VW through DYNAMIC calculation of JS. The main reason for using this scheme in the past is that VW has certain compatibility problems, but for now, VW can basically meet the requirements of compatibility

It can be seen that Android 4.4 and IOS 8.0 are supported, so now we can directly use VW for mobile adaptation

Vw + REM

1, set HTML font size to 10vw
html {
    font-size: 10vw;
}
Copy the code
2. Take the 750UI diagram as an example. In the CSS, use the length value in the UI diagram and set the unit to px
.head {
    width: 750px;
}
Copy the code
3, to introducepostcss-pxtoremPlug-in, configuration as follows:
require('postcss-pxtorem') ({rootValue: 75.unitPrecision: 5.propList: [The '*'].selectorBlackList: [].replace: true.mediaQuery: false.minPixelValue: 0
})
Copy the code

Above, vw + REM scheme can be used to achieve mobile end adaptation

4, the introduction ofviewport-units-polyfillResolve compatibility issues

Viewport-units-polyfill can be introduced to deal with the compatibility problem of VW in order to ensure that the page can be displayed normally in the model of lower version.

Viewport-units-polyfill is actually a simplified version of viewPort-units-BuggyFill.

Viewport-units-buggyfill (viewPort-units-BuggyFill) By introducing a section of JS, for incompatible versions, iterate through all CSS on the page, find the CSS that uses Viewport units, count the Viewport units as PX units, and insert the new CSS rule into head or body.

Viewport-units-polyfill is a modification of viewPort-units-BuggyFill to get rid of a lot of traversal. Compatibility only for HTML font size (this adaptation only applies to VW in HTML font size). Eliminating traversal greatly optimizes performance.

Usage: simply place the JS script in the head of the page

2, 1 px border

There are a lot of solutions to the 1px border problem on the Internet. Let’s talk about the 1px solution for Retina display

The solution shared in this paper is to use Viewport scale to solve the 1px border problem on the basis of vw + REM adaptation solution

implementation

(function () {
    var dpr = window.devicePixelRatio;
    var scale = 1 / dpr;

    var metaEl = document.querySelector('meta[name="viewport"]') | |document.createElement('meta');
    metaEl.setAttribute('name'.'viewport');
    metaEl.setAttribute('content'.'width=device-width, initial-scale=' + scale + ', maximum-scale=' + scale + ', minimum-scale=' + scale + ', user-scalable=no, viewport-fit=cover');

    if (document.documentElement.firstElementChild) {
        document.documentElement.firstElementChild.appendChild(metaEl);
    } else {
        var wrap = document.createElement('div');
        wrap.appendChild(metaEl);
        document.write(wrap.innerHTML);
    }
})();
Copy the code

Viewport scale is set to 1/ DPR (device pixel ratio), so as to solve the problem of 1px border

Note: This script is a simple version. After testing various brands and models, it is found that this scheme basically performs well, except for several meizu mobile phones, which have the problem of border being too thin. The main reason is that the DPR of Meizu’s mobile phone is 3, but the real screen resolution is not high (my personal understanding has not been verified by the data, and interested partners can verify it), so the view zooming is too much, resulting in the border being too thin. The solution is hack (I have no idea for now, If you have other ways, welcome to comment.

(function () {
    // 1px
    var dpr = window.devicePixelRatio;
    var isIPhone = window.navigator.appVersion.match(/iphone/gi);
    var UA = window.navigator.userAgent;
    // Hack a certain model of Meizu, the main reason is that the DPR is 3, but the screen resolution of the phone is not enough, so the border is too thin. This problem mainly occurs on some Meizu phones
    var hacks = ['m1 note'];
    var flag = false;
    hacks.forEach(function (item) {
        if (UA.indexOf(item) >= 0) {
            flag = true;
            return; }});if(! isIPhone && flag) { dpr = dpr >=2 ? 2 : dpr;
    }
    var scale = 1 / dpr;
    var metaEl = document.querySelector('meta[name="viewport"]') | |document.createElement('meta');
    metaEl.setAttribute('name'.'viewport');
    metaEl.setAttribute('content'.'width=device-width, initial-scale=' + scale + ', maximum-scale=' + scale + ', minimum-scale=' + scale + ', user-scalable=no, viewport-fit=cover');

    if (document.documentElement.firstElementChild) {
        document.documentElement.firstElementChild.appendChild(metaEl);
    } else {
        var wrap = document.createElement('div');
        wrap.appendChild(metaEl);
        document.write(wrap.innerHTML);
    }
})();
Copy the code

Place the script above in the head of the page. When developing a 1px border, it can look like this:

.border {
    border-bottom: 1PX solid #eee;
}
Copy the code

Note: If you use a plugin like PostCSs-pxtorem, note that you cannot convert this 1px unit to REM. The method I use is to use uppercase PX for the unconverted px so that postCSs-pxtorem does not convert

Iii. Basic layout

The basic layout actually covers many aspects, such as:

  • Overall page layout
  • Copy with the icon
    • Various center alignment (vertical, horizontal)
    • Align copy with icon (icon should use iconfont instead of image)
  • Z – index hierarchy

1. Overall layout of the page

The most common layout of H5 page is that the page is divided into three parts: head, body and foot. Head and foot will have the effect of sucking the top and bottom. There will be some problems with the regular use of fixed layout.

<div id="page">
    <div id="hd">
        <! -- head -->
    </div>
    <div id="bd">
        <! -- body -->
    </div>
    <div id="ft">
        <! -- foot -->
    </div>
</div>
Copy the code
#page {
    display: flex;
    flex-direction: column;
    position: relative;
    height: 100%;
    overflow: hidden;
}
#hd {
    z-index: 999;
}
#bd {
    flex-grow: 1;
    overflow-y: scroll;
    -webkit-overflow-scrolling: touch; &::-webkit-scrollbar { display: none; }}Copy the code

2. Copy and Icon

Using iconfont

www.iconfont.cn/

Note: Iconfont does not support multicolor ICONS, so consider using SVG or IMG for multicolor ICONS

Center vertically and horizontally

There are many implementation schemes: css-tricks.com/centering-c…

Align text with icon
<div class="box">
    <span>The text is vertically centered with the icon and aligned horizontally</span>
    <span class="icon-span">
        <i class="icons">&#xe625;</i>
    </span>
</div>
Copy the code
.box {
    height: 92px;
    font-size: 32px;
    line-height: 1;
    padding: 0 20px;
    display: flex;
    align-items: center;
    .icon-span {
        font-size: 24px;
        line-height: 1;
        .icons {
            color: red;
            margin-left: 8px; }}}Copy the code

3. Z-index stratification

Standardize the use of Z-index to prevent display problems on the page due to abuse, use in layers:

$z-layers: ( 
    'below': -1.'default': 1.'content': (
        'base': 100
    ),
    'fixed': 990.'mask': 1000.'modal': 1020.'toast': 1040
);
Copy the code

For ease of use, use the following SCSS methods:

$z-layers: ( 
    'below': -1.'default': 1.'content': (
        'base': 100
    ),
    'fixed': 990.'mask': 1000.'modal': 1020.'toast': 1040
);
@function map-has-nested-keys($map.$keys...) {
    @each $key in $keys{@if not map-has-key($map.$key) {
            @return false;
        }
        $map: map-get($map.$key);
    }
    @return true;
}

@function map-deep-get($map.$keys...) {
    @each $key in $keys {
        $map: map-get($map.$key);
    }
    @return $map;
}

@function z($layers...) {
    @if not map-has-nested-keys($z-layers.$layers...) {
        @warn "No layer found for `#{inspect($layers...) }` in $z-layers map. Property omitted.";
    }
    @return map-deep-get($z-layers.$layers...). ; }Copy the code

Specific use is as follows:

.head {
    z-index: z('fixed');
}
Copy the code

The above mentioned layout, you can go to the DEMO page to see, two-dimensional code:

Code: github.com/HuJiaoHJ/h5…

I have tested the scheme mentioned above on several mainstream mobile phones, and the performance is basically good

Write in the last

The schemes shared in this article are all used in my daily work, and I hope they can be helpful to my friends in need ~~~

If you like my articles, go to my personal blog star ⭐️