preface

  • Px pixel

  • Em the width of one M

  • Rem (root EM) Font size of the root element (HTML)

  • Vh (viewport height) viewport height 100vh == viewport height

  • Vw (viewport width) Viewport width 100vw == viewport width

    Description of REM by MDN

The 12-pixel rule

  • The default font size for web pages is 16px
  • The default Chrome font size is 12px, so Chrome has set the minimum font size to 12px. Even if you set the font size to 6px, it will still be 12px, >= 12px

Difference between REM and EM

<body> <p>H power </p> Hello </body>Copy the code
body {
  font-size: 20px;
}
p {
  font-size: 2rem;
}
Copy the code

Q: what is the font size of P? A: 32 pixels according to? => Rem => rem => rem A: 20 px \

p {
  border: 1px solid  red;
  height: 2em;
}
Copy the code

Q: What is the height? A: 32px means 1em == the size of the element \

Features of mobile terminal solutions

  • The CSS ranges from 0 to 320
  • 320 to 375 Another CSS
  • 375 to 414 Third set of CSS

responsive

  1. Percentage layout (width and height cannot match because width is uncertain)
  2. Overall scaling (I don’t know what the scale is, so REM scheme is introduced)

All units are based on width to ensure perfect restoration. The units of PX and EM REM are not used, because they are independent of the width of the screen. Since any unit doesn’t matter how wide the screen is (vw does), what should we do? So the next best thing is REM

Dynamic rem

Font-size == page width To do this using JS, set JS to font size == page width. Since REM is dependent on font size, this will indirectly depend on the width

var pageWidth = window.innerWidth
document.write('<style>html{font-size:' + pageWidth + 'px; } }')
Copy the code

Rem == HTML font-size == 1 page width

To optimize the

  1. The use of meta viewport
<meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no,viewport-fit=cover">
Copy the code
  1. Find out from pageWidth

font-size = pageWidth/100

var pageWidth = window.innerWidth
document.write('<style>html{font-size:' + pageWidth/100 + 'px; } }')
Copy the code

Font size = pageWidth/10 but this can be a <10 value (320/100), which can be problematic in Chrome (minimum 12px) so optimize font size = pageWidth/10 again

var pageWidth = window.innerWidth
document.write('<style>html{font-size:' + pageWidth/10 + 'px; } }')
Copy the code

But this creates a 1px problem suppose the screen is 640px wide, 1px => (1/640) * 10 = 0.015rem, and it’s calculated to be smaller than 1px so how do you solve that? Font-size: 16px; rem and PX can be mixed

Px automatically changes to REM

Using SCSS Here is my basic tutorial on SCSS

How do I deploy SCSS from the command line

  • npm config set registry registry.npm.taobao.org/
  • touch ~/.bashrc
  • Echo ‘export SASS_BINARY_SITE = “npm.taobao.org/mirrors/nod… >> ~/.bashrc
  • source ~/.bashrc
  • npm i -g node-sass
  • mkdir ~/Desktop/scss-demo
  • cd ~/Desktop/scss-demo
  • mkdir scss css
  • touch scss/style.scss
  • start scss/style.scss
  • node-sass -wr scss -o css

Editing the SCSS file automatically yields the CSS file

How do I add SCSS

Add to SCSS file

@function px( $px) {@return $px/$designWidth*10 + rem;
}

$designWidth : 640; // 640 is the width of the design

.child {
  width: px(320);
  height: px(160);
  margin: px(40) px(40);
  border: 1px solid red;
  float: left;
  font-size: px(16);
}
Copy the code