The basic concept

1, the unit

Px(CSS pixels)

  • A pixel is an absolute unit, because the values specified by a pixel do not change no matter what other related Settings change. Okay
  • In fact, it is relative to a device, the size of the value specified by different devices is different

em

  • 1em is the same font size as the current element (more specifically, the width of a capital M). Before CSS styles were applied, the default base font size set by browsers for web pages was 16 pixels, which meant that 1em calculated for an element was 16 pixels by default. But be careful – EM units inherit the font size of the parent element, so if you set different font sizes on the parent element, em pixel values can get complicated. Don’t worry too much about this now; we’ll cover inheritance and font size Settings in more detail in a later article and module. Em is the most commonly used relative unit in Web development.

ex, ch

  • The height of the lowercase x and the width of the number zero. These are not as commonly used or well supported as EM.

rem

  • REM (root EM) works in the same way as EM, but it always equals the size of the default base font size; Inherited font sizes will not work, so this sounds like a better choice than EM, although on older versions of IE it is not supported to view about cross-browser support for Debugging CSS.)

vw,vh

  • 1/100 of the viewport width and 1/100 of the viewport height, respectively. Secondly, it is not as widely supported as REM. And vmin, vmax…

The 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 the ratio of pixel sizes: that is, the size of a CSS pixel relative to the size of a physical pixel.

So what are the physical pixels of the device?

  • Physical pixel: The smallest unit of display that the device can control. Device-independent pixel (DIP, device-independent pixel, density-independent pixel) : device-independent units used to logically measure pixels

  • For the front end, it can be understood as the minimum value that can be set on the device. If DPR = 1, the minimum value is 1px; DPR = 2 and 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.

The formula

// w: horizontal pixel // h: vertical pixel // inch: SQRT (w * w + h * h)/inch console.log(math.ceil (math.sqrt (1920 * 1920 + 1080 * 1080) / 5.5)) // However I do not understand how to calculate so is not should be w * h/inch ？？？？？Copy the code

The retina display

A liquid crystal screen with a pixel density high enough to make individual pixels indistinguishable to the human eye

3, mobile adaptation of the point of attention

  1. Screen size adaptation problem

    • This can be solved perfectly by vw

  2. Image blur problem

    • Image with triple graph can ensure clear, recommend to use double graph + WebP format development and display effect compromise results

  3. 1px shows the problem

    • Many methods

  4. Compatibility issues not supported by the API

    • Compatible not supported by VW

  5. Hd display

    • Does it affect rendering performance? Is disputed
    • Can zooming make the page clearer?

  1. The third-party component library is incompatible
  2. Rich text display problem
  3. Inconsistent front-end code migration units

Adaptation scheme

1. Classic Flexble. Js scheme

There is a problem

  • 1. Iframe problem
  • 2. Rich text problem
2. Obtain the font size of each document object multiplied by 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 (leti = 0; i < dom.childNodes.length; I++) {f (dom).childnodes [I])}}} f (el)})}) / / usage. Richtext (v - HTML ="content" v-richtext=' ')
Copy the code

3, the error of the HD scheme the higher the clearer the DPR is from the device itself and the zoom relationship is not big, or when THE DPR is 1, the clarity is enough, there is no need to zoom to make the web page display more clear (practice summary, not found data support) 4, compatibility problems juejin.cn/post/684490…

2. Vw scheme

reference

3. Rem + VW (recommended scheme)

Set the HTML root font size to 750 * 1334

html { height: 100%; font-size: 50px; Font-size: 13.33333333vw; // 7.5rem === 100vw margin: 0 auto; } @media (min-width: 560px) {// PC,body {font-size: 54px; max-width: 540px; }} @media (max-width: 1024px) {// iPad compatibility: iPad Max 1024px HTML,body {max-width: 1024px; }}Copy the code

1px shows the problem physical pixel DPR >=2 is 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) {// Non-standard -webkit-transform: scaleY(0.5); -webkit-transform-origin: 50% 0%; }}} // The only operator is used to apply a style only if the media query matches successfully. This prevents the selected style from being applied in older browsers. Is an alternative to the standard // Resolution media type.Copy the code

How do I write the units

Postcss-px2rem (VUE-cli3)

Not recommended here because px2rem: write px with /*no*/ feels cumbersome

const px2rem = require('postcss-px2rem') const postcssPx2rem = new px2REM ({remUnit: 50 // munit) CSS: {loaderOptions: {postcss: {plugins: [postcssPx2rem] }, } },Copy the code

Method 2: The current scheme is to directly write 7.5 REM = 100VW design draft divided by 100

Method three: px2rem editor plug-in such as vscode cssrem

The endless problem (CALC) involves compatibility issues

Summarize the benefits of VW + REM

  • Implement a simple
    • Do not rely on plug-ins and third-party libraries
    • A few lines of CSS code will do
  • The development of convenient
    • 100vw === Design draft / 100 REM easy conversion
    • Does not affect the use of PX, perfectly compatible with third-party component library
    • There are no compatibility issues such as rich text and IFrame