On rem mobile adaptation

On rem adaptation

  • Adaptation is a headache for me. I found that the way I used in the project is not convenient to calculate and a little inaccurate. (maybe it's not used correctly) friends of God recommended other ways to test it together...

The following methods were tested

  • Method 1: set root font size + media query
  • Mode 2: JS calculation (convenient)
  • Mode 3: use flexible.js

Method 1: set root font size + media query

*First, set html according to number (custom)
*Define media query: calculate font size according to different sizes
Initialization
// 1. 12px is the root font size here
// 2. How is 13.5 of 360 width calculated?
    [360Current screen / 320Minimum screen * 12Root size] and so on

html {
    font-size: 12px;
}

@media only screen and (min-width: 320px) {
     html{
        font-size: 12px;
      }
}

@media only screen and (min-width: 360px) {
    html {
        font-size: 13.5px !important;
    }
}

@media only screen and (min-width: 375px) {
    html {
        font-size: 14.0625px !important;
    }
}

@media only screen and (min-width: 400px) {
   html {
        font-size: 15px !important;
    }
}

@media only screen and (min-width: 412px) {
    html {
        font-size: 15.45px !important;
    }
}

@media only screen and (min-width: 414px) {
    html {
        font-size: 15.525px !important;
    }
}

@media only screen and (min-width: 640px) {
   html {
        font-size: 24px !important;
    }
}
Use
1. PS: measuring height of an element is 90px
 2. Calculation: 90 / 2 (2 times of design draft) / 12 font sizes
 //In addition to 2, according to the design draft, 
    [in my 750 design draft of this project, the calculation is not accurate, maybe it has something to do with the division of 2 times the figure]

Mode 2: JS calculation (convenient)

<script>
    window.onload = function () {
        window.onresize = function () {
            getRem(750, 100)
        }

        function getRem(pwidth, prem) {
            var html = document.getElementsByTagName("html")[0];
            var oWidth = document.body.clientWidth || document.documentElement.clientWidth;
            console.log(oWidth)
            html.style.fontSize = oWidth / pwidth * prem + "px";
            console.log(html.style.fontSize = oWidth / pwidth * prem + "px")
        }
        /*720 It represents the width of the design draft given by the designer, and you can write as much as you want; 100 represents the conversion ratio, and here 100 is
    For future calculation, for example, if you measure a width of 100px, it can be written as 1rem, and 1px=0.01rem, etc*/
        getRem(750, 100)
    }
</script>

Mode 3: use flexible.js

  • Download flexible.js
  • According to the design draft, define the variable rem value
  • Using: element values / defining variables
@r: 75rem;

 // Measured value / set rem variable
.wrap {
    height: 100 / @r;
}
Demo diagram

|ps: I prefer the second way. The first way was used in the actual project. The other two wrote test Demo. Thank you for your guidance. I hope you can teach me a better way...

Posted on Thu, 02 Apr 2020 15:33:23 -0700 by Bullit