Use vw+rem to implement mobile web adaptation layout

Use vw+rem to implement mobile web adaptation layout

basic concepts

1. Unit

Px(CSS pixels)

  • Pixel (px) is an absolute unit, because no matter how other related settings change, the value specified by the pixel will not change
  • In fact, relative to a certain device, the value specified by different devices is different.

em

  • 1em is the same as the font size of the current element (more specifically, the width of a capital letter M). Before the CSS style is applied, the default basic font size set by the browser for the web page is 16 pixels, which means that the calculated value of 1em for an element is 16 pixels by default. But be careful-the em unit will inherit the font size of the parent element, so if you set a different font size on the parent element, the pixel value of em will become complicated. Don't worry too much about this problem now, we will introduce inheritance and font size settings in more detail in later articles and modules. em is the most commonly used relative unit in web development.

ex, ch

  • They are the height of the lowercase x and the width of the number 0. These are not as commonly used or well supported like em.

rem

  • REM (root em) and em work in the same way, but it is always equal to the size of the default base font size; the inherited font size will not work, so this sounds like a better choice than em, although in the old The version of IE is not supported. Check out the cross-browser support for Debugging CSS .)

vw,vh

  • They are 1/100 of the viewport width and 1/100 of the viewport height. Secondly, it is not as widely supported as rem. There are also vmin, vmax...

percentage

2. Compatibility comparison between rem and vw

  • rem

  • vw

3. About window.devicePixelRatio

mdn

  • This property returns the ratio of the physical pixel resolution of the current display device to the CSS pixel resolution. This value can also be interpreted as a ratio of pixel size: the ratio of the size of a CSS pixel to the size of a physical pixel.

So what are the physical pixels of the device?

  • Physical pixel: The smallest unit that the device can control the display. Device-independent pixel (DIP, device-independent pixel, density-independent pixel): a device-independent unit for logically measuring pixels

  • For the front end, it can be understood as the minimum value that can be set on the device. For example, in dpr = 1?? The minimum value is 1px; dpr = 2 The minimum value is 0.5px

PPI (pixel per inch)

  • How many pixels per inch (device pixels), the higher the PPI, the better the picture quality.

formula

//w:  pixel
//h:  pixel
//inch:  
PPI = Math.sqrt(w * w + h * h)/inch

console.log(Math.ceil(Math.sqrt(1920 * 1920 + 1080 * 1080)/5.5))
//     w * h/inch  
 

retina? display

An LCD screen with a high enough pixel density that the human eye cannot distinguish individual pixels

3. Points to note for mobile adaptation

  1. Adaptation problems with different screen sizes

    • This can be solved perfectly with the help of vw
  2. Picture blur problem

    • 3.times the picture can be used to ensure clarity, it is recommended to use two times the picture + webp format to develop and display the result of a compromise
  3. 1px display problem

    • Many ways
  4. Compatibility issues not supported by api

    • Compatibility not supported by vw
  5. HD display

    • Does it affect rendering performance? ? To be verified
    • Can zooming make web pages more high-definition?

  1. Compatibility issues with third-party component libraries
  2. Rich text display problem
  3. Inconsistent front-end code migration units

Adaptation scheme

1. The classic flexble.js solution

There is a problem

  • 1. The iframe problem
  • 2. Rich text issues
//vue 
//1.  dpr 2   dpr
Vue.directive('richtext', (el, binding) => {
    Vue.nextTick(() => {
        let dpr = document.querySelector('html').getAttribute('data-dpr')
        let f = (dom) => {
            let fontPx = dom.style && dom.style.fontSize
            if (fontPx) {
                fontPx = fontPx.substr(0, fontPx.length - 2) * parseInt(dpr)
                dom.style.fontSize = fontPx + 'px'
            }
            if (dom.childNodes.length > 0) {
                for (let i = 0; i < dom.childNodes.length; i++) {
                    f(dom.childNodes[i])
                }
            }
        }
        f(el)
    })
})
//  
.richtext(v-html="content" v-richtext='')
 

3. The misunderstanding of the HD solution is that the higher the dpr, the clearer it is due to the fact that the device itself has little relationship with zoom, or when the dpr is 1, the resolution is enough, and there is no need to zoom to make the web page display clearer (practice summary, Data support was not found) 4. Compatibility issues juejin.im/post/684490...

2. vw scheme

reference

3. rem + vw (recommended solution)

?Set the value of html root font-size//design draft 750 * 1334

html {
  height: 100%;
  font-size: 50px;//   vw   font-size
  font-size: 13.33333333vw;//7.5rem === 100vw
  margin: 0 auto;
}


@media (min-width: 560px) {//pc 
  html,body {
    font-size: 54px;
    max-width: 540px;
  }
}

@media (max-width: 1024px) {//ipad ipad 1024px
  html,body {
    max-width: 1024px;
  }
}
 

1px display problem physical pixel dpr>=2 take 2 times

.border-bottom {
  position: relative;
  &::after {
    content: '';
    position: absolute;
    z-index: 1;
    pointer-events: none;
    background-color: red;
    height: 1px;
    left: 0;
    right: 0;
    bottom: 0;
    @media only screen and (min-resolution: 2dppx) {// 
      -webkit-transform: scaleY(0.5);
      -webkit-transform-origin: 50% 0%;
    }
  }
}
//only 
//-webkit-device-pixel-ratio  CSS  
//resolution  .
 

What do you want from the unit?

Method 1: postcss-px2rem(vue-cli3)

It is not recommended here because px2rem: you need to add/*no*/when writing px, which feels more troublesome

const px2rem = require('postcss-px2rem')
const postcssPx2rem = new px2rem({
  remUnit: 50// 
})
css: {
    loaderOptions: {
      postcss: {
        plugins: [postcssPx2rem]
      },
    }
  },
 

Method 2: The current plan is to directly write the 7.5rem=100vw design draft and divide by 100

Method 3: px2rem's editor plugin such as vscode's cssrem

Inexhaustible problems (calc) involve compatibility issues

Summarize the benefits of vw + rem

  • Simple to implement
    • Does not rely on plugins and third-party libraries
    • A few lines of css code can be achieved
  • Easy to develop
    • 100vw === design draft/100 rem for easy conversion
    • Does not affect the use of px, perfectly compatible with third-party component libraries
    • There are no compatibility issues such as rich text and iframe