How to use rem+scss for adaptation on the mobile phone-H5 Tutorial-php.cn

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

php中世界最好的语言

Release： 2018-01-30 09:38:28

Original

2988 people have browsed it

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;
}

Copy after login

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>

Copy after login

Set the scss file px to rem

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

Copy after login

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);
}

Copy after login

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);
}

Copy after login

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!