###rem adaptation
Advantages: meta tags can be used to achieve proportional scaling
Disadvantages: conversion is difficult
Core idea: Based on REM, the element unit in layout is rem, and the font size of html root element is set to screen width
rem adaptation: large design drawings and relatively many elements (750px,1080px)
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width,initial-scale=1,user-scalable=no" />
<title></title>
<style type="text/css">
*{
margin: 0;
padding: 0;
}
#box{
width: 8rem;
height: 8rem;
background: yellowgreen ;
}
</style>
<!--
//Adaptation reason: achieving equal ratio effect
-->
<!--
rem Adaptation:
1.Element units in layout rem
2.hold html Root element font size set to screen width
-->
</head>
<body>
<div id="box"></div>
</body>
<script type="text/javascript">
// / / screen width
// var width = document.documentElement.clientWidth;
// / / get html
// var htmlNode = document.querySelector('html');
// //Set html font size
// htmlNode.style.fontSize = width+'px';
//optimization
!(function(){
//Screen width
var width = document.documentElement.clientWidth;
//Create style label
var styleNode = document.createElement('style');
//Set html font size
styleNode.innerHTML = 'html{font-size: '+ width/16 +'px !important;}';
//style tag in head tag
document.head.appendChild(styleNode);
})();
// 10 20 16
</script>
</html>
###viewport adaptation
Advantages: avoid complicated calculation and directly use the standard pixel value of UI
Disadvantages: can't use meta tag; image distortion is serious
Core idea: turn the whole design drawing into the size of screen area, which is equivalent to magnification operation
viewport adaptation: smaller design (320px) percentage adaptation: (pc, mobile) fewer page elements
Media selector: (responsive layout) specific pixel value (dpr = physical pixel / css pixel)
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width,initial-scale=1,user-scalable=no" />
<title></title>
<style type="text/css">
*{
margin: 0;
padding: 0;
}
#box{
width: 160px;
height: 160px;
background: deeppink;
}
</style>
<!--
ui: 320px
320px --- 375px
viewport Adaptation:
//Change the whole design drawing to screen area size (screen real css pixel size = 320) = = layout viewport to 320
//Scheme 1: width=320 (not supported by Android)
//Scheme 2: initial scale = 375 / 320 --- amplification operation
-->
</head>
<body>
<div id="box"></div>
</body>
<script type="text/javascript">
//optimization
!(function(){
//Screen width
var width = document.documentElement.clientWidth; //375
//Target width
var targetW = 320;
//Proportion
var scale = width/targetW;
var metaNode = document.querySelector('meta[name="viewport"]')
metaNode.setAttribute('content','initial-scale='+ scale +',user-scalable=no')
})();
</script>
</html>
1px adaptation
The combination of rem adaptation and viewport adaptation.
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width,initial-scale=1,user-scalable=no" />
<title></title>
<style type="text/css">
*{
margin: 0;
padding: 0;
}
#box{
width: 8rem;
height: 8rem;
border: 1px solid #000;
}
</style>
<!--
1px Adaptation -- Physical pixels
1.Layout element units rem
2.Border units px
3.adopt dpr Let the element scale, initial-scale=0.5
4.Layout element units rem ,Reverse the scale by 2
-->
</head>
<body>
<div id="box"></div>
</body>
<script type="text/javascript">
//Get dpr
var dpr = window.devicePixelRatio; // 2
//Proportion / / 0.5
var scale = 1/dpr;
// var width = document.documentElement.clientWidth;//375
//3. Let the element scale through dpr, initial scale = 0.5
var metaNode = document.querySelector('meta[name="viewport"]');
metaNode.setAttribute('content','width=device-width,initial-scale='+ scale +',user-scalable=no')
var width = document.documentElement.clientWidth;//750
//4. Layout element unit rem, multiply the scale back by 2
var styleN = document.createElement('style');
// styleN.innerHTML = 'html{font-size: '+ width/16*dpr +'px !important;}';
// styleN.innerHTML = 'html{font-size: '+ width*dpr/16 +'px !important;}';
// styleN.innerHTML = 'html{font-size: '+ 750/16 +'px !important;}';
styleN.innerHTML = 'html{font-size: '+ width/16 +'px !important;}';
document.head.appendChild(styleN);
</script>
</html>