Use rem to achieve adaptive Advantages and Disadvantages Analysis and rem adaptive advantages and disadvantages

Use rem to achieve adaptive Advantages and Disadvantages Analysis and rem adaptive advantages and disadvantages

There are still a lot of discussions about implementing the screen Adaptive Layout of rem. I also saw the use of rem to implement the adaptive web app, so I also came to the discussion.

Speaking of rem, we will inevitably contact em and px. Here we will briefly introduce their definitions and features.

1. px: Pixel (Pixel), unit of relative length. Pixel px is relative to the screen resolution of the monitor. In fact, the length of 100px on the mobile phone is different from that on the computer. You can see it with the naked eye. You can use a ruler to measure the accuracy, this is because their resolutions are different. A considerable number of people think that px is an absolute unit. Here we will tell you not to be human or cloud.

2. em: the font size of the text in the current object inherits the font size of the parent class. That is to say, 1em = 1 * font-size of the parent element. Obviously, using em in a multi-layer nested structure is too messy to determine the final size due to hierarchy inheritance.

3. rem: relative to the font size of the html root element text, it is irrelevant to the font size of the middle layer. That is to say, 1rem = 1 * font-size of the html element. Rem is equivalent to a global scaling factor. If you change it, you can scale all the elements in its unit. As long as you associate it with the screen resolution, you can achieve adaptive display of the screen.

For more information about rem implementation self-adaptation, see the isux group's article: Attention. In the question area, if Javascript is used for dynamic calculation at the bottom of the page, the page element size will flash when it is changed. We recommend that you first initialize the html font-size in css based on @ media on the screen, and then use js computing. Someone in the question area asked the js Code. The bloggers are not interested in answering such questions. I will post a copy.

1 <script> 2 (function (doc, win) {3 var docEl = doc.doc umentElement, 4 resizeEvt = 'orientationchange' in window? 'Orientationchang': 'resize', 5 recalc = function () {6 var clientWidth = docEl. clientWidth; 7 if (! ClientWidth) return; 8 docEl. style. fontSize = 20 * (clientWidth/320) + 'px '; 9}; 10 11 if (! Doc. addEventListener) return; 12 win. addEventListener (resizeEvt, recalc, false); 13 doc. addEventListener ('domainloaded', recalc, false); 14}) (document, window); 15 </script>View Code

Benefits of rem

The advantage of using rem is very obvious, especially in the current era of screen resolution, as long as the rem is associated with the screen resolution, the overall page scaling can be realized, so the display on the device is unified. In addition, the browser supports rem, And the compatibility is also very good. In the above question area, some people said, "The QQX5 kernel browser does not support rem units and does not work on most android pages, think more and verify.

Rem disadvantage

In fact, the advantage of rem is also his weakness,Rem's screen adaptation is inconsistent with the design philosophy of the current two platforms!In terms of user experience,The comfort of text reading is irrelevant to the size of media.. Simply put, you would have liked the braised pork that is as big as mahjong, but the waiter changed a big dish and brought you a whole piece of meat that is as big as a casserole. Because the dishes are too big, the meat needs to be scaled up in proportion ~~

VS

Regardless of the size of the plate, you want to eat that piece of meat with one bite. The same is true for text reading. The font scales according to the media because when the screen is too small, in order to present more content, because the user experience of frequent page turning is also poor. In addition,The image and video size should not be scaled at willIf the width and height of the image and video are associated with rem, although this is proportional scaling, sometimes we do not want to enlarge the image. You see, right.

VS

In addition, when the image pixels are low, the enlargement from the small screen to the large screen will blur the image, which is not as good as looking at the small size.

For more information about the advantages and disadvantages, see the discussion above. I also quoted the views of the great gods and pointed out the source. Http://www.zhihu.com/question/21504656?

In general, the advantage of using rem is far greater than the disadvantage. For the problem mentioned above, using px + rem can still provide a good user experience. In general, rem is used for dimensions that need to follow screen changes (isn't that nonsense ?), Px is used for font size, fine border, and other elements that should not change with the screen. In web apps, the use of rem will become more and more common. Let's explore it slowly. Or that sentence,This is front-end thinking.

PS: some minor questions about rem

1) if the font-size of html is set to below 12 PX, it will still be calculated according to 12px = 1rem. In this way, the size of all the rem units used is incorrect. Reason 2 ). In other words, it is not good to set it to 100px directly? Is it okay to set the font size to be used for the body?

2) In the results from Baidu Google, there are a lot of settings for html {font-size: 62.5%}. This method is not recommended. The default browser font size is 16 PX and 16*62.5 = 10px. Why not set it to 10px directly? It's silly to do that. However, it is not good to set it to 10px. It is useless to inherit the font size of 10px from child elements, because the default minimum font of chrome browser is 12px. Of course you have 10 thousand ways to change the default settings. You can set the font size to 1 px. Looking at the reading experience mentioned above, are you sure you want to set the font so small that all your users will be squashed in the eye?

 

Here is the conclusion. I heard that some beautiful pictures can cover up the problem of low text quality.