I remember I wrote a blog a few days ago about interviewing a guy who was talking about using REM for mobile phone adaptation. In fact, within the department, REM for mobile phone adaptation also has a large number of followers. I am a pure engineer, so I don’t like this project very much. “Pure” means THAT I don’t like to use hack to achieve some goals or effects. Hack is to take advantage of something that “was intended to implement A, but implements B in A way that looks clever.” Not because, in my experience, the hack way always requires more code to compensate for the hack side effect, destroying the beauty of “simplicity” and “directness.”

Of course, IF some functionality is not provided, I have no objection to hack. But when it comes to screen adaptation, is REM really still the only way?

I convened a meeting of REM layout supporters to discuss this issue, and the only conclusion I could come to from them that I couldn’t argue with was that rem layout is the one used by Both Taobao and netease, so it is the right one… Here please give me a big “cover your eyes and cry” emoji…

Well, it looks like INSTEAD of a few young front-end engineers, I’m facing Taobao and netease, which is really going to put pressure on my old driver… However, the old driver is not by Taobao, netease bluff into the old driver, first to see what rem layout scheme principle is.

Friend said n multimode, later I also surf the Internet to check the related information (actually English information search very hard, I have a little wonder if I didn’t write my English water product from keywords to, but this is China’s own “the possibility of soil method” I think the bigger, because I don’t know why the Chinese engineers prefer hacks). The principle seems to be the same: although netease and Taobao have different methods, rem is regarded as 1/N of the screen width of a mobile device, and the most common one is that one REM is equal to 1/100 of the screen width of a mobile phone. Uh huh… That sounds familiar, but isn’t that the definition of vw? !

vw unit Equal to 1% of the width of the initial containing block.

Vw = 1% window width. “Initial containing block” refers to the screen width of the device in context.

So with this unit, there is no need to do different REM width Settings for different widths of devices, and no need to use JS to figure out how many pixels the 1% device screen width is and set it to REM. Also use JS to calculate, I am surprised, if the client is the user anyway, spend more resources and time to re-render the page does not matter is it.

Even with VW, there are still people who insist on using REM layout, although I can’t give a specific reason. They just stick to those articles on REM layout written many years ago (of course, these old articles are still meaningful in my opinion. At that time, VW was not as popular as it is now. And none of these people think that REM — and the affected EM — are likely to be used in their original way?) . I found that engineers, supposedly the most rational group of people, were superstitious, but only about authority, sometimes so much so that authority itself had changed without them knowing it.

Recently I saw a new article on the Internet. In addition to repromoting rem layout in the new era, I also introduced and discussed in detail my “invention” of using VW units to set the length of REM instead of JS… The young… What an amazing mind you have…

As for the compatibility of VW that you are concerned about, since I mentioned the “new era”, it means that the spring of VW has arrived. If you really care about compatibility, you’ll probably try out all the browsers on iOS and Android yourself, including wechat and the built-in browser that you call when you scan taobao… What you have tried is the most true.

After this article was shared, many people were surprised to see it, and many people were surprised that VW should not do backward compatibility. Some people said that VW was wildly criticized in those days. Crying and laughing, want to know that year is which year? I have already stated my conclusion in the above paragraph about compatibility, but I feel a little disappointed in the reply. There are so many engineers discussing the problem in such a rude way, and no one has provided data, even Caniuse… By comparison, I really cherish the reply in this blog… Well, there’s something to talk about in the next blog post.

And then the rest of the response said, what if you don’t use REM? This…… I mentioned vw so many times… Just let you use a VW instead of rem…

I don’t know if you set REM to a width that is easy to calculate, so it is easier to slice, but VW is actually 1% screen width, as mentioned in the first reply to this article, which is not easy to calculate. Indeed, I think this is a VW bad place. But, as an up-to-date front-end engineer, did you know that CSS3 has a function called calc? One could argue that CalC’s current support is a bit of a problem. You know SASS or LESS? You know they can do sums, right? You know they can say function, right?

          

           

            @function
             
            pxToVw
            (
            $px
            .
             
            $screen-width
            :
             
            750
            )
             
            {
             
           
           

              
            @return
             
            (
            $px
             
            /
             
            $screen-width
            )
             
            *
             
            100vw
            ;
           
           

            }
           
          

Stop using REM for phone adaptations by Chrisyue’s Blog is licensed under a Creative Commons Attribution-NonCommercial-NoDerivatives 4.0 International License.

《Stop using REM for phone adaptations“Has 10 comments

1. anonymous October 17, 2017 11:58 am

   Vm is the big trend ah, now is to see the compatibility requirements.

   reply
   left
   1. Chris Yue The authorsOctober 17, 2017 12:29 PM

      Boss, it’s a VW. In addition compatibility you try not to know.
2. The small white October 17, 2017 11:42 am

   Even if the design uses VW, what about the height, VH?

   reply
   left
   1. Chris Yue The authorsOctober 17, 2017 12:11 PM

      What do you mean by vH?
3. Your younger sister ah 10:30 am, October 17, 2017

   It was written purely for the sake of argument, but it was ambiguous enough.

   reply
   left
   1. Chris Yue The authorsOctober 17, 2017 10:58 am

      Hello, sister. Who do you think I’m ripping at?
4. whidy October 17, 2017 9:03 am

   I think it’s a good idea to raise the question. But I think it’s a little extreme. Ideal is very skinny reality is very cruel. Rem seems to me to be the best solution, at least in the present circumstances.

   reply
   left
   1. Chris Yue The authorsOctober 17, 2017 9:43 am

      In fact, the current environment is lazy in independent thinking and practice, blind worship of “authority”, is a common phenomenon, that is called “collective” extreme, I want to “no more……” A series of articles questioned some of the “golden rules” that no longer apply, to cool collective paranoia.

      As for your reason that REM is still the best in the current environment? I don’t know if you mean compatibility problem. If it is, I don’t know if you have any data to support it. At least I asked all mobile phones in the testing department to have close to 100% VW support, and that was a test conducted several months ago.
5. x October 16, 2017 4:38 PM

   Rem was invented to allow the front end to perfectly reproduce the design. Because the art is designed in pixels, the front end has to have a conversion process to fully reproduce the design on different screens. Indeed, if a designer in the percentage of time instead of the underlying pixels to figure, so directly through the vh, vw is allowed, but the actual cases, they only be marked out of pixels, if you go into a percentage, then spend a lot of time, and calculate the percentage of reduction of figure has the certain error.

   reply
   left
   1. Chris Yue The authorsOctober 16, 2017 6:20 PM

      I love it when you can give me a reason.

      Rem can be defined as much width as you feel comfortable with, but considering the pros and cons of introducing this approach, I don’t think it’s worth it.

      In two ways:

      1. Rem became the unit of layout entirely, losing the meaning of the unit that I might have used
      2. I believe that the current front-end tools can easily convert from PX to VW (using sass custom functions) or calc functions, although the support remains to be seen