Detailed explanation of mobile terminal using rem+scss

Time:2019-10-8

REM introduction

REM (font size of the root element) is a unit of font size relative to the root element (that is, 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;
}

REM for adaptation

In the past, we used to do this: set the viewport width to device-width, and then select the minimum width (generally 320px) that we need compatible devices. Make pages according to the minimum width. Units use PX and percentages. On devices with different widths, the font size and content size of the page are the same, but the gap between the contents of the large screen is larger than that of the small screen. So the disadvantage of this method is that the effect of the page on some size devices is not good.

If we use REM to page, we will set different font sizes on the root element according to different device widths. The wider the width, the larger the font. Then rem is used to replace where PX was originally used. In this way, the font size and content size will increase with the increase of screen width.

First, JS sets the default font size of HTML (written in the HTML header)

<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, // default 16 because HTML default number is 16px
            html = document.getElementsByTagName("html")[0];
       
            If (rightSize > current Size) {// long screen
                lastHTMLSize = 16;
            } Other if (right Size < current Size) {// wide screen
                lastHTMLSize = (RC.h / GC.h * GC.w) / RC.w * 16;
            }
            html.style.fontSize = GC.w / lastHTMLSize + 'px';
       
    }

    setFontSize();
</script>

Setting up the SCSS file PX to REM

// default 16 is HTML default number
// Default 750 is the default width of the design draft
// n is the distance from which the design manuscript is measured

@charset "UTF-8";
@function rem($n) {
    @return $n / (750 / 16)+rem;
}

Edit easy-to-call functions:

@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) {/// left-right-center-up change
    position: absolute;
    left: 50%;
    top: rem($top);
    margin: 0 0 0 getLeft($left);
}

@ mixin centerlt ($left, $top) {// up and down, left and right in the middle 
    position: absolute;
    left: 50%;
    top: 50%;
    margin: getTop($top) 0 0 getLeft($left);
}
@ mixin centrert ($right, $top) {// up and down, left and right in the middle 
    position: absolute;
    right: 50%;
    top: 50%;
    margin: getTop($top) getRight($right) 0 0;
}
@ Mixed in middlert ($right, $top) {// Upper and Lower Middle Right Variation
    position: absolute;
    right: rem($right);
    top: 50%;
    margin: getTop($top) 0 0 0;
}

@ mixin center B ($left, $bottom) {// left-right downward
    position: absolute;
    left: 50%;
    bottom: rem($bottom);
    margin: 0 0 0 getLeft($left);
}

@ Mix in leftTop ($left, $top) {// left upgrade
    position: absolute;
    left: rem($left);
    top: rem($top);
}
@ Mix in rightTop ($right, $top) {// Right Upward Variation
    position: absolute;
    right: rem($right);
    top: rem($top);
}
@ Mix in leftBottom ($left, $bottom) {// Right Upward Variation
    position: absolute;
    left: rem($left);
    bottom: rem($bottom);
}

Call the above function (wide and high distance can be measured by PS actual distance, default design draft width 750):


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

The above is the whole content of this article. I hope it will be helpful to everyone’s study, and I hope you will support developpaer more.