Today, a friend in the group uploaded a case, point into the study, found REM this unit.
Then I began to rem Baidu, found a few good articles, to share with you,
The following code is copied in a friend's case
<!doctype html>
<meta charset= "UTF-8" >
<title>Document</title>
<body>
</body>
<script>
Auto adaptation
var calculate_size = function () {
var base_font_size = 100;
var docel = document.documentelement,
ClientWidth = Docel.clientwidth;
if (!clientwidth) return;
DocEl.style.fontSize = Base_font_size * (clientwidth/320) + ' px ';
};
Abort If browser does not support AddEventListener
if (Document.addeventlistener) {
var resizeevt = ' orientationchange ' in window? ' Orientationchange ': ' Resize ';
Window.addeventlistener (Resizeevt, calculate_size, false);
Document.addeventlistener (' domcontentloaded ', calculate_size, false);
Calculate_size ();
}
</script>
About var base_font_size = 100;
explained as follows:
The value of the root element can be defined arbitrarily,
But the minimum definition of 20px is recommended,
Also have the definition of the time to consider the convenience of their own conversion,
Some people set 100px,
But don't define 10px,
Because Chrome does not support Chinese fonts less than 12px,
So it will cause when the calculation is less than 12px,
Will default to take 12px to calculate, resulting in the Chinese version of the REM calculation of chrome is inaccurate.
About ClientWidth
In Google browser phone mode test,
iphone4,5,6, shown as 980px,
ClientWidth Reference article:
Http://www.cnblogs.com/fullhouse/archive/2012/01/16/2324131.html
Http://www.cnblogs.com/kongxianghai/p/4192032.html
Supplementary about clientwidth/320
320 is no use.
Now it's usually 640, and 640 is a variable.
The design draft is generally 640px wide
If the designer gave you the design draft is 670px
Let's change 640 to 670.
Start building with 50+ products and up to 12 months usage for Elastic Compute Service
1 on 1 presale consultation
24/7 Technical Support 6 Free Tickets per Quarter Faster Response
Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.
A comprehensive suite of global cloud computing services to power your business
Payment Methods We Support
