Detailed explanation of using rem+scss for adaptation on the mobile phone

rem (font size of the root element) refers to the unit of font size relative to the root element (i.e. html element).

Assuming that the font size of the root element is 10px, the size of 5rem is 5*10=50px, for example

 html{ font-size: 10px;}p{ width: 2rem; /* 2*10 = 20px;*/ margin: 1rem;}

In the past, we often used this page: set the viewport width to device-width, and then select the minimum width of the device we need to be compatible with (usually 320px). Create pages based on this minimum width. The units use px and percentage. On devices with different widths, the font size and content size of the page are the same. The difference is that the gap between the content on the large screen is larger than that on the small screen. So the disadvantage of this is that the page does not display well on devices of certain sizes.

If we use rem to create the page, we will set different font sizes on the root element according to different device widths. The wider the width, the larger the font size. Then use rem to replace the original px. This way, the font size, content size, pair gets larger as the screen width gets larger.

First, js sets the default font size of html (written in the head of html)

 <script type=text/javascript> var bodyElement = document.documentElement || document.body, RC = { w: 750, h: 1206 }, //Default design draft width and height GC = { w: document.documentElement.clientWidth | | window.innerWidth || screen.width, h: document.documentElement.clientHeight || window.innerHeight || screen.height }; function setFontSize(){ var rightSize = parseFloat((RC.w / RC.h).toFixed(1)), currentSize = parseFloat((GC.w / GC.h).toFixed(1)) , lastHTMLSize = 16, // The default 16 is because the default font size of html is 16px html = document.getElementsByTagName(html)[0]; if(rightSize > currentSize){ // Long screen lastHTMLSize = 16; }else if(rightSize < currentSize){ // Wide screen lastHTMLSize = (RC.h / GC.h * GC. w) / RC.w * 16; } html.style.fontSize = GC.w / lastHTMLSize + 'px'; } setFontSize();</script>

Set scss file px to rem

 // The default 16 is the default font size of HTML // The default 750 is the default width of the design draft // $n is the distance measured from the design draft @charset UTF-8; @function rem($n) { @return $n / (750 / 16)+rem;}

Edit functions for easy calling:

 @function getTop($n) { @return ($n - 1206 / 2) / (750 / 16)+rem;} @function getLeft($n) { @return ($n - 750 / 2) / (750 / 16)+rem;}@function getRight($n) { @return (($n - 750) / 2) / (750 / 16)+rem;}@mixin center($left, $top) { //Change position: absolute; left: 50%; top: rem($top); margin: 0 0 0 getLeft($left) ;}@mixin centerlt($left, $top) { //Up and down, left and right center position: absolute; left: 50%; top: 50%; margin: getTop($top) 0 0 getLeft($left);}@mixin centerrt($right, $top) { //Up and down, left and right center position: absolute; right: 50%; top: 50%; margin: getTop($top) getRight($right) 0 0;}@mixin middlert($right, $top) { //Change up, down, center, right position: absolute; right: rem($right); top: 50%; margin: getTop($top) 0 0 0;}@mixin centerb($left, $bottom) { //Change position: absolute; left: 50%; bottom: rem($bottom); margin: 0 0 0 getLeft($left); }@mixin leftTop($left, $top) { //Change left to top position: absolute; left: rem($left); top: rem($top);}@mixin rightTop($right, $top) { //Change right to position: absolute; right: rem($right); top: rem($top);}@mixin leftBottom($left, $bottom) { //Change right to position: absolute; left: rem($left); bottom: rem($bottom);}

Call the above function (the width and height distance can be measured in ps to measure the actual distance. The default design draft width is 750):

 .page1-img1{ width: rem(473); height: rem(173); @include centerlt(139, 767);}

The above is the entire content of this article. I hope it will be helpful to everyone’s study. I also hope everyone will support VeVb Wulin Network.