Conversion between REM, RM, PX and VW

Time:2022-5-29

1、 What is VW PX REM em
1.vw/vh: it refers to the width or height of the relative viewport. 100vw is equal to the entire screen width and 100vh is equal to the entire screen height. 1vw = 1% * viewport width. It means that a viewport is 100vw. Length and width equal to 1/100 of the window length or width
For example: 1920×800 design draft
Conversion 1/1001920=19.2 so 1vw=19.2px; Namely: 1vw/y=100vw/1920px
Conversion 1/100
800=8 so 1vh=8px;

2.px:px is the smallest point that the screen device can physically display. Is a unit of relative length. In desktop browsers, a pixel is usually a physical pixel facing the computer screen, but on the mobile end, 1px in CSS is not equal to 1px of the device. For example, the iPhone3 has a resolution of 320 x 480. The iPhone4 became 640 x 960, but the actual screen size of the iPhone4 did not change. At this time, one CSS pixel is equal to two physical pixels.

3.rem: the length unit calculated relative to the font size of the HTML root element. It can be set. The default is 16px

4.em: in all modern browsers, the default font size is 16px. In this case, 1em = 16px. EM inherits the parent dimension and is also a relative unit.

2、 Conversion between VW PX rem
1. we assume that the design draft of PSD is based on 1920px. Then:
100vw = 1920px => 1vw = 19.2px
Assumption: 1rem = 100px
Then:
1920px=19.2rem = 100vw => 1rem = 100/19.2 =5.208vw
100px = 1rem = 5.208vw
In this case, we only need to set the root element of HTML:
Font size: 5.208vw is enough.

//If the screen width is less than 375 pixels (max device width: 375px), load tiny CSS file.
//Writing 1
 <link rel="stylesheet" type="text/css"
     media="screen and (max-device-width: 375px)"
     href="tiny.css" />
//Writing 2
@import  url("tiny.css") screen and (max-device-width: 375px);
//Writing 3
@media  screen and (max-device-width: 375px) {
    .column {}
   }

Responsive layout:
1: Usage percentage and REM
Width% height REM font size REM set the font size of the root element in HTML

html{
  font-size:16px;
}
//1 Media query
html{font-size:10px}
@media screen and (min-width:321px) and (max-width:375px){html{font-size:11px}}
@media screen and (min-width:376px) and (max-width:414px){html{font-size:12px}}
@media screen and (min-width:415px) and (max-width:639px){html{font-size:15px}}
@media screen and (min-width:640px) and (max-width:719px){html{font-size:20px}}
@media screen and (min-width:720px) and (max-width:749px){html{font-size:22.5px}}
@media screen and (min-width:750px) and (max-width:799px){html{font-size:23.5px}}
@media screen and (min-width:800px){html{font-size:25px}}
//2 With the help of SASS, less, etc

@Basefontsize: 75// Reference value based on horizontal screen size of visual manuscript font size
/*rem = document.documentElement.clientWidth * dpr / 10
Device pixel ratio = physical pixel / device independent pixel
dpr=window.devicePixelRatio
Take iphone6 as an example:
The width and height of the equipment is 375 × 667, which can be understood as device independent pixels (or CSS pixels).
DPR is 2. According to the above calculation formula, the physical pixel should × 2, 750 × 1334. Different devices, different DPRS
*/
.px2rem(@px){
    @return @px / @baseFontSize * 1rem;
}
//Use example:
.container {
    height: px2rem(240);
}
//Less translation results:
.container {
    height: 3.2rem; 
} 
//At the same time, it is also necessary to dynamically set the font size of HTML with the help of JS

let deviceWidth = document.documentElement.clientWidth;
document.documentElement.style.fontSize = deviceWidth / 7.5 + 'px';
  
window.onresize = function(){
   let deviceWidth = document.documentElement.clientWidth;
   document.documentElement.style.fontSize = deviceWidth / 7.5 + 'px';
};

3.vw viewport
//At this time, the size of the design draft is 750px, and it is easy to convert REM by /100, almost no
//With the help of other tools, you can directly divide the size of the design draft by 100, which is not troublesome, so you have been using it all the time 
html{
    font-size: calc(100vw / 7.5);
}
let deviceWidth = document.documentElement.clientWidth;
document.documentElement.style.fontSize = deviceWidth / 7.5 + 'px';
  
window.onresize = function(){
   let deviceWidth = document.documentElement.clientWidth;
   document.documentElement.style.fontSize = deviceWidth / 7.5 + 'px';
};
4. using plug-ins
Postcss pxtorem: a plug-in that converts PX to REM
Install postcss pxtorem
npm install postcss-pxtorem --save

In this way, REM in the page will display the font size according to the root element, and 2rem is 32px

2: Usage percentage vs PX
Unit setting Px, PX at the mobile end is automatically converted to REM

//Automatically calculate 1080p as VW
@function vw($px, $isFontSize: 0) {
  @if $isFontSize == 1 {
    @return $px * 1px;
  }
  @return $px / 1920 * 100vw;
}

//Automatically calculate REM for 750 screens
@function rem($px) {
  @return ($px / 32) * 1rem;
}

Recommended Today

JS generate guid method

JS generate guid method https://blog.csdn.net/Alive_tree/article/details/87942348 Globally unique identification(GUID) is an algorithm generatedBinaryCount Reg128 bitsNumber ofidentifier , GUID is mainly used in networks or systems with multiple nodes and computers. Ideally, any computational geometry computer cluster will not generate two identical guids, and the total number of guids is2^128In theory, it is difficult to make two […]