The use of rem to achieve adaptive layout should be regarded as a major trend in the current mobile front-end. Some people are still a little confused about this. They do not understand how rem realizes adaptive layout, and how to adjust the value of rem according to the design draft? How to use Sprite background image in rem layout? Does rem have to load js? What is the appropriate setting for the root html font-size of rem? Check out this article, maybe it can help you.
These questions are compiled from previously published articles. Attentive readers can also look up the previous content to find the answers. This article will give a unified reply. If it is useful to you, please like it, thank you !
rem adaptive principle
rem is changed according to the font-size size of html. Based on this, we can set the corresponding html font size according to the width of the device under each device, thus realizing an adaptive layout. For more introduction, please see this article: How rem implements adaptive layout .
value of rem
At present, there are two kinds, one is to adjust the font size of html according to js, and the other is to adjust the font size through media query.
use js
;(function(designWidth, maxWidth) {
var doc = document,
win = window;
var docEl = doc.documentElement;
was time;
var rootItem,rootStyle;
function refreshRem() {
var width = docEl.getBoundingClientRect().width;
if (!maxWidth) {
maxWidth = 540;
};
if (width > maxWidth) {
width = maxWidth;
}
//Different from Taobao's practice, directly use the simple rem conversion method 1rem=100px
var rem = width * 100 / designWidth;
//Compatible with UC start
rootStyle="html{font-size:"+rem+'px !important}';
rootItem = document.getElementById('rootsize') || document.createElement("style");
if(!document.getElementById('rootsize')){
document.getElementsByTagName("head")[0].appendChild(rootItem);
rootItem.id = 'rootsize';
}
if(rootItem.styleSheet){
rootItem.styleSheet.disabled||(rootItem.styleSheet.cssText=rootStyle)
}else{
try{rootItem.innerHTML=rootStyle}catch(f){rootItem.innerText=rootStyle}
}
//Compatible with UC end
docEl.style.fontSize = rem + "px";
};
refreshRem();
win.addEventListener("resize", function() {
clearTimeout(tid); //Prevent execution twice
tid = setTimeout(refreshRem, 300);
}, false);
win.addEventListener("pageshow", function(e) {
if (e.persisted) { // recalculate when the browser goes back
clearTimeout(tid);
tid = setTimeout(refreshRem, 300);
}
}, false);
if (doc.readyState === "complete") {
doc.body.style.fontSize = "16px";
} else {
doc.addEventListener("DOMContentLoaded", function(e) {
doc.body.style.fontSize = "16px";
}, false);
}
})(640, 640);
You can embed the above code into the head of html, and the conversion ratio is 1rem=100px. For the convenience of calculation, you can download the complete structure and a compressed js in one of my github projects.
The key code in the above code is:
//code from http://caibaojian.com/rem-responsive-2.html var width = docEl.getBoundingClientRect().width; var rem = width * 100 / designWidth; docEl.style.fontSize = rem + "px";
- The first line of code gets the width of the mobile device, the second line, the value of rem is equal to (the width of the device) x100/(the width of the design draft), and the third line, sets the font size of html to the value of the second line.
- Some people may notice that the second line of code is different from the Taobao one. The difference lies in the conversion ratio of rem. Here you can change it to the actual situation. For example, if someone likes to use 20px, then you can change the above 100 Change it to 20, and the conversion ratio is changed to 1rem=20px. For the above code, you can see the previous article: Rem Lite realizes self-adaptation .
- Some people want to go back to the Taobao one, then the second line of code can be changed to var rem = width/10; the conversion ratio is changed to be adjusted according to the width of the design draft, assuming that our design draft is 640 wide, Then the font size of html is set to 64px. It is equivalent to 1rem=64px. For specific implementation, please see the previous article: rem adaptive layout-flexible .
Use media queries
After all, isn't the above js code just adjusting the corresponding html font size according to different devices, so we can add the corresponding font size according to the actual device, right?
We know that the default font size of html is 16px, then the corresponding device can be set to have a consistent scaling ratio by setting the corresponding font-size.
html {
font-size: 62.5%
}
@media only screen and (min-width: 481px) {
html {
font-size:94%!important
}
}
@media only screen and (min-width: 561px) {
html {
font-size:109%!important
}
}
@media only screen and (min-width: 641px) {
html {
font-size:125%!important
}
body {
max-width: 640px
}
}
The above code is converted by 1rem=20px, where do you see it? Starting from the largest value of 640, if your design draft is 750, then you need to design more media queries, and the conversion ratio should be consistent. What if I want to convert the ratio to 1rem=100? According to the above rules, the maximum value is: html:font-size:100/16*100%, others are proportional, such as 480px, then 480/640*(100/16*100%).
Use Sprite
Many people in China advocate the use of font icons or SVG to achieve this, but these are obviously a bit impractical in small projects. I usually use the following two methods.
- The first method is to cut the background image into one, and then convert it to base64., or use the sass method to convert, but the disadvantage is that the style file will increase, depending on personal measurement.
- The second is accurate positioning by the percentage of the background image. For details, see this article: CSS3 Background Image Percentage and Application .
- Or for the accuracy is not too high, in fact, it is also possible to use rem positioning, that is, to separate adjacent pictures.
Source: Front-End Development Blog