How to use rem+scss for adaptation on the mobile phone

This time I will show you how to use rem+scss for adaptation on the mobile phone. What are the precautions for adapting rem+scss on the mobile phone? The following is a practical case, let’s take a look.

rem introduction

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

html element).

Assume that the font size of the root element is 10px, then 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 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 gaps between the content on the large screen are larger than those on the small screen. So the disadvantage of this is that the page does not display well on devices of certain sizes.

If you 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

html header)

<script type="text/javascript">
    var bodyElement = document.documentElement || document.body,
        RC = {
            w: 750,
            h: 1206
        }, //默认设计稿宽高
        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, // 默认16是因为html默认字号是16px
            html = document.getElementsByTagName("html")[0];
        
            if(rightSize > currentSize){  // 长屏
                lastHTMLSize = 16;
            }else if(rightSize < currentSize){  //宽屏
                lastHTMLSize = (RC.h / GC.h * GC.w) / RC.w * 16;
            }
            html.style.fontSize = GC.w / lastHTMLSize + &#39;px&#39;;
        
    }
 
    setFontSize();
</script>

Set the scss file px to rem

// 默认16是html默认字号
// 默认750是设计稿默认宽度
// $n是量取设计稿的距离
 
@charset "UTF-8";
@function rem($n) {
    @return $n / (750 / 16)+rem;
}

Edit functions that are easy to call:

@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) { //左右居中 上变
    position: absolute;
    left: 50%;
    top: rem($top);
    margin: 0 0 0 getLeft($left);
}
 
@mixin centerlt($left, $top) { //上下，左右居中
    position: absolute;
    left: 50%;
    top: 50%;
    margin: getTop($top) 0 0 getLeft($left);
}
@mixin centerrt($right, $top) { //上下，左右居中
    position: absolute;
    right: 50%;
    top: 50%;
    margin: getTop($top) getRight($right) 0 0;
}
@mixin middlert($right, $top) { //上下居中 右变
    position: absolute;
    right: rem($right);
    top: 50%;
    margin: getTop($top) 0 0 0;
}
 
@mixin centerb($left, $bottom) { //左右居中 下变
    position: absolute;
    left: 50%;
    bottom: rem($bottom);
    margin: 0 0 0 getLeft($left);
}
 
@mixin leftTop($left, $top) { //左变 上变
    position: absolute;
    left: rem($left);
    top: rem($top);
}
@mixin rightTop($right, $top) { //右变 上变
    position: absolute;
    right: rem($right);
    top: rem($top);
}
@mixin leftBottom($left, $bottom) { //右变 上变
    position: absolute;
    left: rem($left);
    bottom: rem($bottom);
}

Call the above function (width and height distances 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);
}

I believe you have mastered the methods after reading these cases. For more exciting information, please pay attention to other related articles on the php Chinese website!

Related reading:

html5 How to create a circle animation effect of pictures

How to use H5’s WebGL in the same The interface makes json and echarts charts

How to use the new semantic tag features of H5

The above is the detailed content of How to use rem+scss for adaptation on the mobile phone. For more information, please follow other related articles on the PHP Chinese website!