1. Px and viewport

1)

  • There are two types of pixels: physical pixels and CSS pixels and we’re using CSS pixels
  • So is the px we use fixed?
  • We tried using the default font size: 16px to see how it looked on PC and mobile
  • pc

  • The mobile terminal

2) Two important concepts

  • Equipment pixel1 DPR = Physical pixels/resolution
  • Without scaling, one CSS pixel corresponds to one DPR, that is, in no scaling
  • 1 CSS pixel = Physical pixel/resolution
<meta id="viewport" name="viewport" content="width=device-width; Initial - scale = 1.0; maximum-scale=1; user-scalable=no;" >Copy the code

3) The point px that needs attention can be self-adaptive

2. Media query @media

@media screen and (max-width: 960px){ body{ background-color:#FF6699 } } @media screen and (max-width: 780px){ body{ background-color:#00FF66; } } @media screen and (max-width: 550px){ body{ background-color:#6633FF; } } @media screen and (max-width: 350px){ body{ background-color:#FFFF00; }}Copy the code

Defines several styles, using max-width to set the maximum resolution for the styles to take effect. The above code sets different background colors for screens with resolutions from 0 to 350px, 350px to 550px, 550px to 780px, and 780px to 960px respectively

  • The problem is thatThe span is large, and different content needs to be configured for different scenarios

3. Percentage

  • The percentage of the child element is completely relative to the immediate parent element, the height percentage is relative to height, and the width percentage is relative to width… Box model element

Rem + Px2REM

  • Small problem: In a responsive layout, you must passJs to dynamically control the size of the root element font size

1)

  • Font-size layout relative to the root element
  • By default,Font size for HTML elements is 16px, so: 1 rem = 16px
  • And for the sake of calculation, it usually doesFont-size: 62.5% HTML {font-size: 62.5%}
  • After setting 1 rem = 10px

2)

  • The following one is very common and importantWrite a regular PX to the page and convert it to REM
  • The principle of PX2REM is also very simple. The focus is on preprocessing CSS files in px units and converting all px units into REM units
  • Two common ways

Method one:

1) NPM install px2REM-loader

2) In the webpack configuration file:

module.exports = {
  // ...
  module: {
    rules: [{
      test: /\.css$/,
      use: [{
        loader: 'style-loader'
      }, {
        loader: 'css-loader'
      }, {
        loader: 'px2rem-loader',
        // options here
        options: {
          remUni: 75,
          remPrecision: 8
        }
      }]
    }]
  }
Copy the code

Postcss plugin: NPM install postCSs-loader

var px2rem = require('postcss-px2rem'); module.exports = { module: { loaders: [ { test: /\.css$/, loader: "style-loader!css-loader!postcss-loader" } ] }, postcss: function() { return [px2rem({remUnit: 75})]; }}Copy the code

5, vw vh

1)

  • Page viewport width
  • The height of the viewport excluding the header and footer navigation bars

2)

  • Unit conversion

To convert PX into VW units, just determine the window size of the view (layout viewport). If we set the layout viewport to a resolution size, such as iPhone 6/7 with 375*667 resolution, PX can be converted to VW as follows: 1px = (1/375) *100 VW

Postcss-px-to-viewport automatically converts PX to VW. Postcss-px-to-viewport automatically converts PX to VW. The default parameter postcss-px-to-viewport is:

var defaults = {
  viewportWidth: 320,
  viewportHeight: 568, 
  unitPrecision: 5,
  viewportUnit: 'vw',
  selectorBlackList: [],
  minPixelValue: 1,
  mediaQuery: false
};
Copy the code

Px can be converted to VW by specifying the width and height of the window, as well as the conversion accuracy.