Hello everyone，you definitely don't know me,my name is Larry，A front-end engineer from China。
Recently, I made an adaptive plugin that only has a 3kb size JavaScript file, but it can adapt to any resolution below the design draft. Let's take a look at how it is implemented。
Why do I need to make it
The adaptation of large visual screens is a clich é d topic, and now there are actually some big bang open-source adaptive plugins and tools. But why do I have to repeatedly build wheels? Because currently none of the adaptation tools on the market can achieve perfect results and produce similar products, the final implementation effect cannot escape the palm of the white edge. The solutions to the white edge problem are either too complex or will affect the dom structure.
Three common methods
Vw/vh scheme
Overview: Convert px proportionally to vw and vh based on the size of the design draft
Advantages: It can dynamically calculate the width, height, font, etc. of charts, with high flexibility. When the screen ratio is inconsistent with the UI draft, there will be no white space on both sides
Disadvantage: Each chart requires separate adaptation of font, spacing, and displacement, which is quite troublesome
Scale scheme
Overview: It is also the most effective solution currently available
Advantages: Low code size, simple adaptation, and no need to adapt separately in various charts after a single processing
Disadvantage: Left blank, there is an event hot zone offset
Rem+vw vh scheme
Overview: This name can be troublesome to hear. The specific method is to obtain the reference value of rem, dynamically calculate the font size of the HTML root element, and dynamically calculate font, spacing, displacement, etc. in the chart through vw and vh
Advantages: Less adaptive code for layout and simple adaptation
Disadvantage: Left blank, sometimes charts need to be individually adapted to the font
Based on this background, I have decided to build a simple and user-friendly wheel.
My train of thought
We know that when a website is displayed on a low resolution screen, some elements will be squeezed together, and using the scale scheme to scale proportionally will leave some blank space on the right or bottom (due to screen scale issues). If this blank space problem is solved, the scale scheme will be the best solution
So, all we need to do is expand the size of the total container to match the browser. For example, if a white edge appears on the right side of the screen after scaling proportionally, we just need to add a little bit of the total container width and fill in the width of this white edge. The same applies when a white edge appears below
So there is the following code
function keepFit(designWidth, designHeight, renderDom) {
let clientHeight = document.documentElement.clientHeight;
let clientWidth = document.documentElement.clientWidth;
let scale = 1;
if (clientWidth / clientHeight < designWidth / designHeight) {
scale = (clientWidth / designWidth)
document.querySelector(renderDom).style.height = `${clientHeight / scale}px`;
} else {
scale = (clientHeight / designHeight)
document.querySelector(renderDom).style.width = `${clientWidth / scale}px`;
}
document.querySelector(renderDom).style.transform = `scale(${scale})`;
}
After the renderDom element was mounted on the page, we called this method and found that the page was perfectly adapted. Based on this principle, we can apply this code to any front-end project, whether you are using React, Vue, or even jQuery
Of course, I have packaged a plugin that not only has the most basic functions, but also helps you set the necessary styles. When you need to use it, you can directly install and use it
autofit. js was born
The above image is a logo that I have carefully designed for it (using vite's color scheme)，autofit.js has helped many front-end developers, especially some users with weak foundation,It is very popular in China，As of now, it has over 2000+ collections on the juejin forum (a China's developer forum) and ranked second on the collection list in March
autofit.js is still growing and currently supports: automatically adapting to resolutions below the design draft, setting the scaled text size separately, ignoring certain elements to not be scaled, setting the playback level of scaled elements separately, and so on
tips:
If you encounter abnormal element position caused by scaling during use, it may be due to using the built-in responsive third-party UI library，If there is an event hot zone shift phenomenon on the map, you can try the ignore parameter to ignore the container elements of the map
How to use it
- Download from NPM
npm i autofit.js
- Import
import autofit from 'autofit.js'
- start
autofit.init()
The default parameter for init is
autofit.init({
designHeight: 929,
designWidth: 1920,
renderDom:"#app",
resize: true
})
The default parameter is 1920 * 929 (i.e. 1080 without browser header), which can be called directly at project startup，If you use Vue and use a 1920 * 1080 screen, you can directly call autofit. init() without adding any parameters，If you are using any other framework or native development, You need to call autofit.init() when the renderDom element after it is mounted,
conclusion
If you like my tool, I hope to get your star or likes support. If you have any suggestions or opinions, please leave a message below the post. If you encounter any problems while using, please leave a message below the post or go to Github to submit issues. I will reply to every issue carefully. If you have used autofit.js and find it useful, don't forget to recommend it to your friends.
See you in the comments section —— Larry
Top comments (7)
Looks great! It might be easier to adapt if you had an English copy of the docs as well.
Thank you for liking my tool，this is my greatest recognition，I am planning to write an English document that may be updated to Github soon. I will remind you under this comment then
JSYK, I actually do speak a bit of Chinese, but my reading is not quite there 😅
got it，I will do it earlier
I have uploaded the English document to github readme.en.md
Nice, looks cool, will definitely remember the tool if I need something like that.
thank you very much