Mobile web development: rem responsive design and web development rem response

Mobile web development: rem responsive design and web development rem response

I use sass to write css as follows:

1. variable. scss

Define a variable $ base_fontSize in the variable. scss file to set the basic font size (I am using the percentage, that is, multiply the percentage by the default browser font value ).

//font-size$base_fontSize:62.5%;

2. base. scss

In base. introduce the above variable file in scss (Baidu for sass syntax), and set the initial html font value to $ base_fontSize, next, you can change the value of $ base_fontSize to 1 Rem Based on the screen size of the mobile device through media query. In this way, we can be compatible with all the screens of the ultra-small cell phone to the pad. Of course, you can set the percentage of the value of $ base_fontSize each time as needed.

@import 'variable.scss';html {    font-size: $base_fontSize;}@media only screen and (min-width: 481px){    $base_fontSize:$base_fontSize*94%;    html {        font-size: 1rem!important;    }}@media only screen and (min-width: 561px){    $base_fontSize:$base_fontSize*109%;    html {        font-size: 1rem!important;    }}@media only screen and (min-width: 641px){    $base_fontSize:$base_fontSize*125%;    html {        font-size: 1rem!important;    }}

3. Reference The base.css file generated by base.scssin HTML.