What rem that?
rem (font size of the root element) refers to a root element with respect to the font size of the unit. It is a relatively simple units. We will remember seeing rem em units, em (font size of the element) is a unit relative to the font size of the parent element. In fact, very similar between them, but a rule is dependent on the root element of the calculation is dependent on a parent element calculations.
Calculation principles:
A screen width clientWidth (px). Draft design width of 750 (px), assuming n = clientWidth (px) / 750 (px); Simplification Unit ===> = n-the clientWidth / 750;
2 of the html-size font: n-(PX);
. 3 then the there are n (px) = 1 (rem ), since the root node 1rem (html node) font size doubled;
4 assume a div, the width of the draft design was measured ruleW (PX);
. 5 is required to write width width: set w (temporarily determining unit)
6 has w / clientWidth (px) = ruleW (px) / 750 (px) Simplification unit ===> W / the clientWidth (PX) = ruleW / 750
. 7 of Brief w = (clientWidth / 750) * ruleW (px) Simplification ==> w = n * ruleW ( px) = ruleW conversion * n-W (PX)
. 8 conclusion that w = ruleW * 1 (rem) = ruleW ( rem);
Conclusion: when we set the font-szie as html (screen width / design draft width) px
when the unit value px us on design draft measured directly writes the value changed to the code inside the unit rem i.e. can, rpx unit of this micro letter applet adaptation similar problem: the above is derived in full accordance with math problems projections, overlooked an important issue, that is, there is a minimum font browser, not less than 12px, when we set the font-size: n (px); divided by the width of the screen 750 may have Small, this proportion has not appropriate, so we put it to enlarge a hundred times zoom ratio calculation rules are as follows:
1. n = clientWidth (px) / 750 (px); n2 = clientWidth (px) /7.50 (px); n * 100 = n2; n2 is the ratio of the enlarged n
2. html the font-size: n2 ( px); n2 is the ratio of the amplified
3. there are N2 (PX) =. 1 (REM), n-(PX) * 100 = (REM). 1, n-(PX) = 1/100 (REM);
. 4 Consider a div, the width of the draft design was measured ruleW (px);
width width 5 is required to write: set w (temporarily determining unit)
6 has w / clientWidth (px) = ruleW (px) / 750 ( PX), Note here is divided by 750 , the unit simplification ===> W / the clientWidth (PX) = ruleW / 750
. 7 Simplification w = (clientWidth / 750) * ruleW (px) Simplification ==> w = n * ruleW (px) = ruleW conversion * n-W (PX)
. 8 conclusion that w = ruleW * 1/100 (rem) = (ruleW / 100) (rem)
Conclusion: when we set the font-szie as html (screen 100 * width / design draft width) px px unit value when we design draft measured directly changed to 100 divided by the unit rem to write code inside
Several adaptation scheme is given below:
All examples of the use, to a div, measured at 750 design draft PX width 750, height 80px, pink background
1, js fitting, add the following code in the head tag html page: (recommended)
<script type="text/javascript">
//手机端的适配
document.addEventListener("DOMContentLoaded",function(){
document.getElementsByTagName("html")[0].style.fontSize=(document.documentElement.clientWidth/750)*100+"px";
});
window.onresize = function(){
document.getElementsByTagName("html")[0].style.fontSize=(document.documentElement.clientWidth/750)*100+"px";
}
</script>
use
div{
height: .8rem;
width: 7.5rem;
background: pink;
}
2, css adaptation of calc (recommended)
html{
font-size: calc(100vw / 7.5);
}
use
div{
height: .8rem;
width: 7.5rem;
background: pink;
}
3, less fit (and not very standard)
.re(@width) {
@xs: 100px/(750px/@width);
@media (max-width:(@width + 1px)) {
html {
font-size: @xs;
}
}
}
.re(1600px);
.re(1440px);
.re(1280px);
.re(1024px);
.re(960px);
.re(950px);
.re(900px);
.re(800px);
.re(773px);
.re(768px);
.re(736px);
.re(732px);
.re(731px);
.re(667px);
.re(640px);
.re(600px);
.re(568px);
.re(533px);
.re(435px);
.re(414px);
.re(411px);
.re(384px);
.re(375px);
.re(360px);
.re(320px);
use:
div{
height: .8rem;
width: 7.5rem;
background: pink;
}
4, scss adaptation
// Calculation rem reference font
$ rem-Base-font-size: 25px;
// resolution width of the UI design
$-Resolution the UI-width: 750px;
// adapter required screen width
$ device-widths: 240px , 320px, 360px, 375px, 390px, 414px, 480px, 540px, 640px by, 720px, 768px, 1080px, 1024px;
@mixin HTML-font-size () {
@each $ $ Device in Current-width-WIDTHS {
@media only and screen (min-width: Current-width $) {
HTML {
$ X: the UI-Resolution-width $ / $ Current-width; // calculate the screen several times
font-size: $ rem-base -font-size / $ X;
}
}
}
}
@include HTML-font-size ();
@function pxToRem ($ PX) {
@return PX $ / $ REM-Base-font-size * 1 rem;
}
use:
div{
height: .8rem;
width: 7.5rem;
background: pink;
}
or:
div{
height: pxToRem(80px);
width: pxToRem(750px);
background: pink;
}
Summary: generally use the first, second or more