Mobile adaptation use a better layout solution than REM

?? Mobile side of the road, Rem/em, percentage, response to the scheme is endless, see all the partners around the use of REM and percentage of a single, but I do not love, the reason that there are so many methods, its purpose is only one screen adaptation .

?? Screen adaptation as the name implies is a design to restore the program to adapt to the current market on a variety of screen size of the terminal, to write a variety of terminal size of the screen can be proportional coordination of the display. Let's take a look at some of the many familiar scenarios to solve the screen adaptation.

1. rem/em: rem root element font size unit, EM element font size unit. When using REM, we need to set the Font-size property for the HTML element in the CSS, which is the unit of the entire page unit, what is the size to set? This depends on the design and screen size to decide, usually we also need to use JS to prioritize the current size of the screen, and then to dynamically change the size of the HTML font-size, and the EM this unit and percentage similar, the size of the subclass is controlled by its parent class, For example, the parent class font-size is 16px, in the subclass we write 0.5em extremely 8px, such a level of nesting write down, finally we have to do is also through the JS to determine the current to fit the size of the screen, to change the highest level of font-size.

2. percent : Em play tired, for a new play, and in the EM use, if the adapter size to determine the location of a slight discomfort, the page will appear a flash, not suitable for new players, if you are now to do a full screen mobile site, then the best option is the percentage layout. So the dimensions are divided by the total width height of the design graph given a percentage.

3. Responsive : Responsive is a one-stop solution for both PC and mobile, and CSS3 's media queries determine the current terminal's screen size to determine what to display today.

?? All of the above methods need to know in advance the size of the adapter, although the percentage layout is not required, but his advantage is more suitable for full-screen full web site, there is a solution is directly relative to the size of the screen? After all, our final goal is also the screen adaptation, the answer is this asked to recommend the CSS properties of VW and Vh--viewport width/height, the width of the viewport, refers to the interior of the browser but the width of the area, 1VW is equal to the width of the viewport 1%, It is obvious that this unit is based on the viewport, which is the size of the screen, and that we are in the position to look at their support first.

a better solution

?? Several mobile-side layouts are common on the market, as shown in Figure 3, with a maximum width limit of 2 and a full percentage, both of which are used in the VW VH, since he is based on a screen, such as a div width of 37.5px, calculated according to iphone6 width 375, 37.5/375=0.1,0.1*100 =10, that is, 10VW, so long as we have this div set to 10VW, then he occupies a variety of screen is the same proportion, is not very convenient, we may say this and the percentage layout is similar, it is not, they still have subtle differences, percent way to do full-screen mobile site more convenient, To do a 2 of the limited width of the site as a percentage of the convenience of VW, and then VW is very convenient, and we do not use it?

HTML <  style= "width:50vw;height:50px;background-color:red"></  div>

　

This div always occupies half of the screen under any screen ... 4,5, mobile Android and iOS are the mainstream and they are in the WebKit kernel VW basic in the WebKit kernel browser, why do we always forget him?

?? There is also a commonly used CSS properties we should also use the CLAC (), which is used to calculate the width of the property, such as now I want to write a page, the left fixed mobile site, right with the screen adaptation to change, then my right width can be written width:calc (100VW- Left width), it is important to note that there is a space on both sides of the operation symbol, this property can be very convenient for our calculation, if your project both use the percentage also used REM, you can directly mix these units into a piece of calculation, without worrying about so much.

Summary

?? These are the two high-frequency properties that I normally use, and I don't know why everyone mentions that there are very few VW and VH, even if the mobile developers don't mention VW and VH, actually here I would say they're really good. Use the top of any unit, the screen is suitable for the screen, and VW and VH is the size of the viewport in our screen, how beautiful units you are always missing. And basically most of the layout of the market is I mentioned above these three kinds, there are width limit, full screen percent, and limit the fixed width of certain columns drop ... They can be easily solved with VW ...

Mobile adaptation use a better layout solution than REM