Mobile side display the same effect solution by Fungleo on different size phones

Mobile to show the same effect solution on different size phones by Fungleo preface, rethink

In the previous project, I set in the CSS, that is html{font-size: 62.5%;} set to 10px , and then the whole station based on this grounding, to set rem the style of the unit. This solves a lot of problems. But in the face of different width of the phone, still need to adapt to set a lot of content. Of course, Because of the different resolution of the phone, we are free to set the page in 320(iphone5s)-414(iphone6plus) such a range is still very suitable. But, the wonderful mobile phone every year, Huawei Meta8 This kind of flower mobile phone scale incredibly is 2.5 times times, that is, its width incredibly is 432 , so, The content on my self-adapting page is a little bit small.

Moreover, the designers to my implementation of the page is still a lot of criticism, because, only on the ordinary Android phone display is the most normal, 5S a bit crowded, 6p and a bit too wide.

So, in the end there is no one way, can perfect the design of the design draft? That is, no matter how large your phone screen, screen resolution, you can completely restore the design on the page.

That is, the requirement is that the big phone, looking at each element, including the text is bigger. And on the small mobile phone, look smaller. All overall scaling?

In addition, why should I give html{font-size: 62.5%;} , why not write directly 10px ? My thinking is to give the option to the user. The question is, does the user really know? Perhaps, 10,000 users, it is rare to have a few to adjust the browser's default font size. White blind me a great pains.

So, why don't I go to the point of reducing the design draft?

I want to solve this problem.

The idea of realization

First of all, all units are REM, all based on REM, and that's for sure. So the key to the problem is to give the html settings font-size . The idea is a bigger cell phone, set a little bit bigger, smaller cell phone.

The idea is right. How to do it? First of all, I think of media queries.

But I soon gave up.

Looking at some of the cases using media queries, first of all, it can not switch seamlessly, but only according to the size of different mobile phones to adapt to adjust. And there's no problem. Even though most browsers are scaled, they do not exclude certain pages from being nested inside the app, which is not scaled, resulting in a particularly small, or particularly large. I've been crazy about this particular little or very big problem for two days.

The media query was discarded. I turned my gaze JS , although I have not liked to use JS in this presentation layer, because I do not want to do DOM operation because JS greatly reduce the performance of the Web page. However, I use JS to set something html that font-size doesn't seem to lose too much performance.

decided to use JS to achieve. It needs to be considered.

Computational logic

A project, to be divided into two situations, one is not yet developed, one has been developed. What I have now is that the front-end part of the project has been developed. I just want me to solve a problem. So, my algorithm below is based on the code I have written.

If a project has not yet been developed and is in the planning stage, a more appropriate value can be chosen. But the rationale is the same. I'll talk about my situation here.

I previously followed html{font-size: 62.5%;} , that is, 10px the basic setup, the entire station was developed in REM. That is, I am following the 360 entire front-end interface made for the width of the design manuscript.

The calculation of our HTML font-size should be as follows:

设备宽度/设计稿宽度*比率

And my calculation of this project should be published as follows:

设备宽度/360*10

The device width is automatically obtained from the browser via JS. Take iphone5s For example, the values are as follows:

320/360*10 = 8.88888

Of course, I'm making adjustments based on my original code. When we enable a new project, we can do it more freely, for example, we can do the actual calculation according to the width of our standard design, such as 720 or 640 or 1080来.

Of course, the ratio is a problem. For example, we use a ratio of 10, and we calculate the width of the design by 720, we get the following

320/720*10 = 4.44444

This is a numeric value. This is not a problem on the mobile side, but we have a problem with debugging on the PC, because the chorme smallest pixel in the browser 6px will cause us trouble. So, if so, I suggest that the ratio can be set to 100, which is the following:

320/720*100 = 44.44444

Determination of REM values

Because my project was OK before. For example, I need to write a 12px text, I will write 1.2rem, the calculation is very clear. Basically, it doesn't have to be calculated. But if we are based on the 720 design width of the above, the ratio is 100, then obviously, The REM value of the entire station must be adjusted.

This calculation is publicized as follows:

数值/比率=需要的rem值

Thinking back, what is this REM value?

This REM value is a width on the design, such as the design draft width is 720. Corresponds to how many REM values should be converted into the code.

The algorithm is simple enough to take the desired value/ratio to get the corresponding REM value. For example, the design width is 720 and the ratio is 100. So, the width of the parts on our design is 240px, and we need to write about 240/100=2.4rem, We need to write a 14px text, then 0.14rem.

SCSS Code

Why do you have SCSS code?

In response to the above problem of calculating the REM value, if the design manuscript width is 720, the ratio is 100, that is true without the brain to calculate. But the standards of each company are different. So maybe your company's standards make this value very difficult to calculate, such as a ratio of 50, or 75.

Therefore, we construct a sass function to solve this problem.

@function rem($px){    @return100 + rem;}

And where it needs to be called, write it directly:

width: rem(240);

This 240 is what the designer gave you on the design draft of the px value.

There should be similar functionality in less. But no, so it's not very clear. If you are using the students of the little, please do your own research.

Summarize

Every day, it is the experience of overthrowing the day before. Each and every one of these days is spent in surprise and repentance.

This article is original by Fungleo, allow reprint. But reprint must be signed by the author, and keep the article starting link. Otherwise, legal liability will be investigated.

Starting Address: http://blog.csdn.net/FungLeo/article/details/51177863

Mobile side display the same effect solution by Fungleo on different size phones