preface

With the innovation of Web technology, the adaptation scheme of mobile terminal is also constantly changing. There are many articles on mobile terminal adaptation on the Internet, saying that REM layout is outdated and VW adaptation is the best adaptation scheme. Any adaptation scheme has its advantages and disadvantages, and should be combined with their own use scenarios to choose.

Article first tell us about the adaptation of several common schemes, and then take a look at a few companies (tencent, jingdong, netease, the little red book, weibo, Meituan, B station, sohu, hungry yao, ctrip, the public comments, zhihu, on loan, Lu Jin) the mobile end of the page USES what kind of adapter, finally discuss the adaptation method of application scenarios and the advantages and disadvantages, If there is something wrong, I hope I can get the boss to correct me.

Rethinking mobile adaptation

1 mobile terminal adaptation is rem or VW?

Not all scenarios are suitable for REM or VW adaptation.

  • vwandremThe essence of adaptation is equal scale scaling, so that the page in different screen sizes have similar to the vector image scaling effect, to ensure the size of the page elements between the scale and position.
  • These two adaptation schemes are suitable for a wide variety of visual components, and visual design has a strong dependence on the relative relationship of the location of elements on mobile pages. Basically, most pages can be adapted with two schemes.
  • However, for text content, where we want to immerse the user in more content rather than larger content, such a proportional scaling scheme is not sufficient. I recommend using a px layout in conjunction with a Flex layout.

2 rem should be abandoned, doesn’t VW smell good?

Vw adaptor is not omni-purpose, it is best to use it with REM

  • The rem solution became popular precisely because browser support for Viewport units was poor at the time (IOS 8+, Android 4.4+ see Caniuse for ViewPort Units). In contrast, REM was much better (IOS 4.1+, Android 2.1+ see Caniuse), so it was not easy for VW to say “I love you” in the context of that time.

  • With the innovation of front end technology, the most important is the strength of the major browser manufacturers, except Opera Mini full version and IE low version does not support VW, other browsers have basically supported VW, some people or a team began to discuss the use of actual projects. Although The VW scheme proposed by Mr. Big in the article “Talking about the Adaptation of mobile Terminal page” uses the viewport-units-Buggyfill library for compatibility, I personally do not recommend it, because this library uses the CSS content attribute for compatibility processing. The official documentation points out that this affects the IMG tag in some browsers and requires a CSS rule to be introduced globally. It also causes inevitable conflicts for situations where content is normally used (e.g. icon fonts), and pseudo-element compatibility is not supported. So from my personal point of view, if you have to ask me what VW adaptations I use, I would recommend the above two VW + REM schemes.

  • Although the page effect after using VW adaptation is very good, but it is the use of viewport unit layout, depending on the size of the viewport and automatic scaling, whether the viewport is too large or too small, it also with the viewport is too large or too small, lost the limit of the maximum and minimum width.

Mobile terminal adaptation solution

1 rem adaptation

The essence of REM adaptation is to scale the layout proportionally. The size of REM can be changed by dynamically setting the FONT size of HTML.

The viewport configuration

<! -- dpr = 1-->
<meta name="viewport" content="width=device-width; initial-scale=1; maximum-scale=1; minimum-scale=1; user-scalable=no;">
Copy the code

Set scale to 1 times the viewport size. You can also scale the viewport according to the DPR value, as follows:

/ / below is based on equipment DPR set viewport var DPR = window. DevicePixelRatio | | 1 var scale = 1 / DPR viewport. The setAttribute (" content ", "width=device-width" + ",initial-scale=" + scale + ", maximum-scale=" + scale + ", minimum-scale=" + scale + ", user-scalable=no" )Copy the code

There are a few caveats

  • The Viewport tag is only valid for mobile browsers, not PC browsers.

  • When the scale is 100%, logical pixels = CSS pixel width = width of the ideal viewport = width of the layout viewport.

  • Setting either initial-scale or width separately has compatibility issues, so the best way to set a layout viewport as an ideal viewport is to set both properties.

  • Even with User-Scalable = no set, manual scaling can be forced in Android Chrome.

Set rem reference value

The core code is as follows

// set 1rem = logical pixel (device independent pixel) / 10
function setRemUnit () {
    var rem = document.documentElement.clientWidth / 10
    / / 375/10 = 37.5
    docEl.style.fontSize = rem + 'px'
}
7setRemUnit()
Copy the code
  • Will HTML nodefont-sizeSet to pageclientWidth(layout viewport) 1/10, i.e.1REM = 1/10 of the layout viewport
  • iniphone6Bottom:docEl.clientWidth= Device independent pixels (logical pixels) = Layout viewport width = Ideal window width = 375. At this time:1rem = 375/10 +px = 37.5px

Postcss-pxtorem converts the units to REM

module.exports = {
   plugins: {
     'autoprefixer': {
       browsers: ['Android > = 4.0'.'iOS >= 7']},'postcss-pxtorem': {rootValue: 37.5, propList: [The '*'.'! font-size'],
         selectorBlackList: ['van-circle__layer'.'ignore'], 12}}}Copy the code

  • Rule: Base value = 1/10 of current device width

  • The reference value setting code in the iPhone6 device Settings HTML — >; The font and size also is 37.5 px

  • But the design size is 750px, so when measuring the design size, divide by 2

Disadvantages of REM layout

In a responsive layout, the root element’s font-size must be dynamically controlled by JS. This means that the CSS style is coupled to the JS code, and the code that changes the font-size must be placed before the CSS style.

2 vw adaptation

Vw is a unit of length based on Viewport, which is the area of the browser’s visualization:

  • For PC: the viewable area iswindow.innerWidth/window.innerHeightThe size of is shown as follows
  • For mobile: The viewable area isdocument.documentElement.getBoundingClientRect().width/document.documentElement.getBoundingClientRect().heightWidth set in the viewport of the mate tag

In CSS Values and Units Module Level 3, there are four Units associated with the Viewport, namely VW, VH, Vmin, and vmax.

  • vw: is short for Viewport’s width,1vwIs equal to thewindow.innerWidththe1%
  • vh: similar to vw, short for Viewport’s height, 1vh is equal towindow.innerHeihgtthe1%
  • vmin:vminThe value of is currentvwandvhThe smaller value in
  • vmax:vmaxThe value of is currentvwandvhThe larger value in

If the design is 750px wide, then 100vw = 750px, i.e. 1vw = 7.5px. So we can directly convert the px value from the design drawing to the corresponding VW value. If you don’t want to calculate it yourself, you can use the PostCSS plug-in postcss-px-to-viewport, which allows you to write px directly in your code.

{
     loader: 'postcss-loader'.options: {
         plugins: (a)= >[
             require('autoprefixer') ({browsers: ['last 5 versions']}),require('postcss-px-to-viewport') ({viewportWidth: 375.// Viewport width (number)
                viewportHeight: 1334.// Viewport height (number)
                unitPrecision: 3.// Set reserved decimal place (number)
                viewportUnit: 'vw'.// Set the unit (string) to convert
                selectorBlackList: ['.ignore'.'.hairlines'].// Class names (arrays) that do not need to be converted
                minPixelValue: 1.// Set the minimum pixel value (number) to replace
                mediaQuery: false// Allow conversion of px (true/false) in media queries}})]Copy the code

3 with VW and REM

  • You can dynamically change the size of the root element by setting vw units that vary with viewport.
  • Limits the maximum and minimum font size of the root element, along with the body plus the maximum and minimum width.
// REM unit conversion: 75px is set as a convenient calculation, 750px-75px, 640-64px, 1080px-108px, and so on
 $vm_fontsize: 75; // The base size of the root element of the iPhone 6 size
 @function rem($px) {
    @return ($px / $vm_fontsize ) * 1rem;
 }
 // Use vw units for the root element size
 $vm_design: 750;
 html {
    font-size: ($vm_fontsize / ($vm_design / 2)) * 100vw; // I can just write 20vw (1rem == 20vw)
    // At the same time, use the Media Queries to limit the maximum and minimum values of the root element
    @media screen and (max-width: 320px) {
        font-size: 64px;
    }
    @media screen and (min-width: 540px) {
        font-size: 108px; }}// The body also has the maximum and minimum width limits, so that the default 100% width block element is not too large or too small
body {
    max-width: 540px;
    min-width: 320px;
}
Copy the code

4 px adaptation

As mentioned in the beginning, it is not necessary to use relative length units on mobile terminals. Traditional responsive layout is still a good choice. Especially in scenes with more readable content such as news and community, direct use of PX units can create a better experience. The PX solution allows the large-screen phone to display more content, which is more in line with people’s reading habits.

Research on adaptation of Big Internet factories

1 rem adaptation example

1.1 Fixed 1 vieport

Note: The mapping between REM and px described below is for 375px device independent pixels (iphone6/7/8).

Ppdai M website homepage (M.ppdai.com/)

  • 1rem = 20px

  • The maximum reference value is 40px

  • Limit the page width to 750px

The little red book (www.xiaohongshu.com/).

  • 1rem = 50px

  • The maximum base value is 60px

  • Both fonts and pages are scaled

  • With media Query, limit the maximum width of body

@media screen and (min-width: 768px)
body {
    width: 450PX!important;
}
Copy the code

Weibo,M. eibo. Cn /)

  • Both fonts and pages are scaled
  • The reference value is based onmedia queryThe generated

1.2 Scalable ViePort

The mapping between REM and px described below is for a device with 375px (iphone6/7/8) independent pixel and viewport scale of 0.5

Meituan (I.meituan.com/)

  • 1rem = 100px

Main Station B (M.bilibili.com/index.html)

  • 1 rem = 46.875 px

Sohu (M.sohu.com/)

  • 1rem = 75px

2 vw adaptor example

Paipai Loan Page (Ld.ppdai.com/loan/mobile…

  • Do not limit the page width
  • Incompatible handling, not recommended

3 vw+ REM adaptation example

Jingdong (M.jd.com/)

  • fixedvieportElement layoutremunit
  • htmlThe elementThe font sizemakeVw + px fallbackIn the form of
  • When the page exceeds a certain width, according tomedia querySet up thefont-sizeforpx, has a higher priority thanvw.
  • Limit the page width to1080px

Netease (3 g.163.com/touch/)

  • fixedviewportElement layoutremunit
  • htmlElements of thefont-sizeusevw + px fallbackIn the form of
  • usemedia querySetting the root elementfont-sizeIn thepxThe value of the
  • When the page exceeds a certain width,pxThe priority of the unit is higher thanvw
  • Limit the layout width to768px

Hungry? (H5. Ele. / me/msite)

  • rightviewportIt’s scaled
  • htmlElements of thefont-sizeStill bypxThe specified
  • For the layout of specific elementsvw + rem fallbakIn the form of
  • There is no limit to the layout width
  • cssThe build process requires plug-in support, which is available here:pandaGao/stylus-px-to-relative-unit

Example 4px scheme

Ctrip (M.ctrip.com/html5/)

  • fixed1timesvieport
  • Layout scheme:Px + flex + percentage
  • Set up thebodyThe maximum width of ismax-width: 540px;

Dianping (M.dianping.com/)

  • Rich elements, usingpx+flexThe layout, the adaptation effect is very good

Zhihu (www.zhihu.com/).

  • Pursue the reading experience of the scene, usingpxLayout.

Tencent (Xw.qq.com/)

  • The main content of the home page is news, in order to better reading experience, usepxLayout.

Lu Jin (M.lu.com/)

  • : root {the font - size: 10 px; },There are no different Settings based on screen sizefont-size
  • Problem: Layout page set to1remIn chrome12pxIs not10px
  • It’s used in the layoutremUnits, but it’s still an absolute unit plan
  • You might want to see more content on a larger phone

conclusion

  • News, community and other readable scenes:Px + flex + percentage
  • Mobile terminal pages with a large variety of visual components and strong dependence of visual design on the relative relationship of element positions:vw + rem

The above is just my humble opinion and some exploration about mobile terminal adaptation in the past year or two. If there are any mistakes, please correct them.