Mobile end adaptation scheme

Mobile terminal adaptive layout

• Use rem Unit of size

Scheme 1

1. Use less To configure , introduce lib-flexible plug-in unit , Or get it yourself Equipment width calculation

Use less Self configuring

• 1. Uniform style is realized through variables
• 2. The unified common style is extracted through mixin Mixed implementation

Self configuring js file , Calculation rem Value

• stay index.html Middle configuration , Set the font size of the root element

//  Set up  minimum-scale=1,maximum-scale=1  Set initial multiple  //  Configure whether users are allowed to zoom 
<meta name="viewport" content="width=device-width,initial-scale=1.0,minimum-scale=1,maximum-scale=1,user-scaleable=no" />

//  Bind the font size of the root element to the screen 
document.documentElement.style.fontSize =
  document.documentElement.clientWidth / 10 + "px";
//  Screen changes reset root element font size 
window.addEventListener("resize", () => {
    
  document.documentElement.style.fontSize =
    document.documentElement.clientWidth / 10 + "px";
});

less To configure

• The introduction of the file index.less mixin.less variable.less Set up rem size

Option two

Use lib-flexible plug-in unit

• 1. install
  npm i lib-flexible -S
• 2. First, you need to import main.js in
  import "lib-flexible"
• 3. Use flexible All units should use rem

webpack Help us achieve px turn rem The library of ,, be called px2rem

• 1. install

npm install px2rem
npm install px2rem-loader

• 2. The plug-in configuration
  • stay vue.config.js s Middle configuration

chainWebpack: (config) => {
    
  config.module
    .rule("less") // css  The rules 
    .oneOf("vue")
    .use("px2rem-loader")
    .loader("px2rem-loader")
    .before("postcss-loader") // this makes it work.
    .options({
    
      remUnit: 37.5,   //  Design   Resolution size 
      remPrecision: 8,  // rem  Keep a few decimal places 
    }) // remUnit: 192 Representative to 1920px For the whole , If the size of the design is 750px, The value here is 75
    .end();
},

• 3. Use

  • If which style px There's no need to switch rem Words , Just add /*no*/

  .text {
        
    width: 300px;
    height: 300px; /*no*/
  }
  

contrast mixin and px2rem Realization rem Transformation

Realization principle All are px/baseSize + ‘rem’
mixin Write what you need
px2rem All conversion does not need to add their own /no/