Mobile-side adaptation

Contact Mobile page has been a long time, has been hoping to find a good chance to summarize the following, but has been relatively lazy, so just dragged to today.

Before I wrote an article on mobile-side layouts, here. This article describes most of the basic points of knowledge, there is a need to refer to.

We know that the common layout options are:

1. Percent layout, highly fixed

The first layout is not available on the mobile side, especially when the retina screen appears. Some people say that I highly not fixed, but the use of height from the content to prop up, so the same can not solve the embarrassment of the content is squashed, the reason is naturally iphone6, iphone 6 Plus, etc., the appearance of DPR, so the elements will be squashed, simple test can draw relevant conclusions.

2. Fixed width, using viewport zoom

This approach is also undesirable, resulting in the loss of pixels, text wrapping and other problems.

3.rem layout

This is the best way to layout.

　　

The REM layout, which is based on the font-size size of the root element

But using the REM layout has the following several aspects that we need to be concerned about.

　　

First: How to understand Dpr,width, device-width, and other basic concepts

We first introduce flexible.js, then open in Chrome, and then we can find Iphone6 (750*1334) above the width of 375, this is actually device-width, and we are based on 750px design to restore, The 750px here is our CSS pixel width, which we can actually learn by learning the media query, and we can see that in the META tag, Scale is 0.5 because we do 750px pages that need to be forcibly scaled down by half into Ipone6, so that, compared to other DPR 1 phones, it is not difficult to know that Iphone6 's phone has more pixels on the same screen size, so there is no doubt that the display is more clear. Similarly, with the iphone 6 Plus you can see that the DPR is 3 and scale is 0.33333, and from these two examples we can find the reciprocal relationship between DPR and scale. And the font-size we see in the HTML element is actually 1/10 of the width.

Second: Do you use PX or REM for text paragraph font settings?

Choose whichever of them, this depends on the actual project needs. First of all, we must not only use PX to set, but through the DPR to set the font size of the paragraphs under different DPR, if not, it is not difficult to imagine, in iphone5 and above, the font will suddenly become smaller, resulting in a very poor user experience.

If using PX with DPR, I think this is the best way, the advantage of this way is: 1.  Under the Retina screen, the text does not become very small, but it is displayed normally.   2. Even if the screen of the phone is larger, the font will not be displayed very large, this can make the user experience better, imagine, even if we take a larger mobile phone, mostly used to watch video or play games and so on, and then the text displayed on your phone is particularly large, is not very wonderful? 3. Another benefit of doing this is not to use REM to cause your fonts to appear some of the more exotic sizes.

However, it is not said that the use of DPR combined with PX is no harm, for example, we need a product, the last son of the line must be me, the next line must be love, the last line must be you, at this time, if you use PX to set the font is obviously not done, because the font will be at any moment with the screen and the , but this is not the case with REM layouts, because REM layouts are scaled up or down, so the REM layout will do well to meet this need.

　

Mobile-side adaptation