H5's rem replaces px for interface self-adaptation, which is simple and powerful, and some of my experiences, px

H5's rem replaces px for interface self-adaptation, which is simple and powerful, and some of my experiences, px

In the past two days, we will make the client applications of the company's previous touch screen devices into h5 web applications, and there are different statuses for different devices and the same device (windows vertical screen, horizontal screen and android tablet ), there are also different design standards designed by designers for them, including the font size and the size of different ui components. Although it was discussed at the time, the company's old staff suggested to follow this standard, you don't have to worry about self-adaptation, because there are only a few devices, but I have never been reconciled. I always want to adapt it to different device resolutions, so I want to study this problem.

Some modules in previous projects of the company have referred to other products and found useful rem and em. Then they came to the Internet to study and learn about these relative units. Here we found this article: Workshop. This article summarizes the benefits of rem compared to several other design methods, and the disadvantages of other methods. Please take a good look at the specific disadvantages of this article.

The reason why I didn't study rem before, including not studying other new technologies, such as es6, front-end mvvm framework, modular development, automatic project building and packaging tools. The reason is that in the previous company, the company has a full range of tasks and tasks to be done every day. At that time, the old technology was used, and html, css, jq, js, and easyui were used for development, although a little tired, the code written is relatively low, but it is better that this aspect of business logic is more interesting, coupled with my own strong sense of responsibility, so at that time it was still enriched every day. As a result, I am working on tasks every day. I usually go home from work at every night, eat, wash my hair, and have other things. It's almost 9 o'clock, after, I often learned other new technologies when I got tired for a day. I just wanted to take a rest and relax. At that time, I worked overtime frequently for six weeks, and then I only had Sunday, however, because I want to sleep late, wash clothes, and play games on week 6, the learning time also decreases, which means that the learning time decreases, but at that time, I mainly went to js learning, mainly es5). Of course, I was lazy, but I still wrote some blog drafts, however, the logic release is not organized for this reason .....

However, during that time, I had a very valuable experience and exercised my programming logic thinking (I was a background, so I still had a bit of programming thinking and object-oriented concepts, learning js is not that hard. I studied C # in school for a year #. NET, and then the first job you applied for was. net, but the company's framework is mature and has a high front-end demand. I made a front-end and fell in love with the front-end, but I wrote some simple and commonly used small interfaces of the company, although I used Baidu for some reference, I still had my own things. For example, I expanded the parsing and saving of the image base64 in the file-only upload interface. At that time, it was definitely not a different copy. At present, due to the company's needs, I am occasionally responsible for backend development. For example, the company's small cms, I am independently developed, completely independent development, from database to c #. net data layer, middle layer, and business layer (the backend uses a three-layer architecture, without mvc). Common Data interfaces and commonly used interfaces are self-written and do not use a third-party framework. Of course, my C #. NET is just a fur, and database design is relatively simple. Table creation and views are written by myself. The stored procedure is slightly changed with another ready-made one. Of course, I like the front-end, in the future, I will continue to develop towards the front-end. I only need to understand the background and the concept of backend is OK .). Because the business logic is complex and fun, and there are many tasks, when the business logic is too large, I think my code is spam and unsightly. At that time, there was no good way to solve these pain points. Now I deeply understand the pleasure and pleasure brought by these new technologies to solve these pain points. I deeply understand that the mvvm design mode is very suitable for the web Front-end (I highly recommend vue here, compared with other frameworks, it performs modular development. It is relatively simple to develop large-scale applications, and the environment is also easy to build. There is an official scaffold tool vue-cli ).

At present, a company has not had so many tasks and enough time, so I will study how to make my code more concise and readable in my free time, more abstract and efficient implementation of functional business needs, allowing project modules to be scalable, reusable, changeable, highly cohesive, and low coupling. Then, hey ~, With continuous in-depth understanding at one level, more and more surprises are found. In fact, these technologies are not as difficult as you think, and they are very simple.

Back to the topic, I used to do the streaming layout (mainly using bootstrap raster layout) mentioned in the previous article. The width-to-height ratio is fixed and the height is fixed (my height is also a percentage at the beginning, obviously not.) the disadvantage of this method is that the compatibility is not very good and it is not easy to maintain. Next I will introduce what I think is good rem.

　　

Below is a reference to zhihu user's answer: https://www.zhihu.com/question/21504656

/*************** START *********************** **************/

The mobile end can adapt to different mobile phone resolutions. If the overall scaling is maintained, the 'Media query' is not required if there is no Design difference'

Assume that the designer's visual draft is designed based on the iPhone 6 width, that is, 375px (if it is a high-definition visual draft 750/2 = 375)
Then, we can assign a value to the element style based on the size of the visual draft. For example, if the size of the visual draft is 80 PX, we can directly define the width: 80 Px in css; all the sizes on the page are set in this way.

After all the page styles of all websites are set.

We need to do two things:
1. Set the page's rem size
'''Css

html {font-size: calc(100vw/3.75);}

'''
3.75 VW is the width of the device. divide it by so that the 1rem size is equal to PX under iPhone 6.

2. Replace the unit on the page, replace all px units with rem, divided by 100, for example, the first 80 px is 0.8rem.
In this way, the size of all elements in iPhone 6 is the same as that in the visual draft. In iPhone 5, the device width decreases, and the value of 3.75 VW/is correspondingly smaller, that is, the rem unit value will decrease, and all the sizes on the page will be scaled proportionally.

In this way, you can maintain visual consistency for devices of any resolution.
Finally, the previous vw unit is used, but the earlier version of the device may not support it, so we need JavaScript to handle it:
'''Javascript

document.documentElement.style.fontSize = window.innerWidth/3.75 + 'px'

'''

The reason for making 1rem equal to 100px, rather than 1rem equal to 1px is that the smallest Chinese font in chrome is 12px.


Of course, this step is done for the current situation to change rem. If rem is used at the beginning, you can directly write the rem unit when writing css, divided by the visual draft by 100, in fact, there is no computing process. You can also use a pre-processor to write a 'px2rem 'function. You can simply change this function. /************* END ************************* *****/ My final conclusion: I think the best way is to make 1rem equal to 100px under the standard size given by the designer. If 14px is used, replace it with 0.14rem directly, then, JavaScript dynamically calculates the font-size of html based on the bandwidth of different devices. If the width of the page designed by the designer is 1080, The js will write as follows:

Document.doc umentElement. style. fontSize = window. innerWidth/10.80 + 'px '. The font-size of html on the 1080 device is 100px, and 0.14rem is 14px;
This method is compatible with the resolutions of different devices. For example, if the font-size of html is calculated as 50px at the resolution of a 540px device, 0.14rem = 0.14rem * 50 = 7px.