How to adapt the different resolution interface?

First of all, look at a picture:

This is 2.5 months Tencent Game official website resolution data, can be seen to the PC end 1024*768 accounted for 20%, 1920*1080 accounted for 14%. The display widths of these 2 resolutions are nearly one-fold.

And now the design of the designer's general output size is 1920, so designers will often worry: small resolution can see it? or do you want to make a separate version of the phone? So we need to use some tricks to make the page effects that most users see are the same.

　　One, PC end

"Example 1" is shown under http://up.qq.com/2014/life/1920*1080.

The design is very beautiful but if you do it by the original size, the small resolution player can only see the middle characters.

Often when we do a full flash station, we will see the multi-media students in order to match the multi-resolution display on the adaptive.

and refactoring in fact purely CSS can also achieve the same scaling adaptation:

This does not result in a small resolution to see only the middle of an area, or a scroll bar to affect the experience.

Realize the idea:

1: There is a zoom attribute for Ie:ie. Although often we use it to clear floating or something. But it is also very powerful on the scaling element. Eg: the element that is set to zoom:0.5 is reduced by half directly from the upper-left corner of the element, the volume of the occupied document stream is also reduced by half (IE7 and 8+ have different understanding of the margin values of the zoom elements, but it is not necessary to scale the elements simply).

Firefox, you can use the CSS3 Transform:scale (). (Additional settings are required transform-origin:0 0 is the scale origin).

In addition zoom also be webkit support, scale or zoom please choose by yourself ~

2. Next, we can cut into a huge and 1920*1000 page as per the design draft.

3. Then get the user's current window size, eg the current window is 1200 wide, then we need to scale the proportions zoom=1200/1920=0.625. Then we can reduce the parent frame of our main display by 0.625 times times (of course, for the height of the scroll bar, the size of the height should also be included in the calculation range)

Is it simple? When you encounter a large page that will affect the browsing of the content, consider using this method to do a scaling.

"Example 2" http://game.qq.com/happy/main.htm (embarrassed to take out the page for 11 years, but this idea looks very clear)

This body is fixed size, and then through JS to compute the positioning and cohesion of the background to achieve adaptive & no scroll bar. You can see that the example above does not change the size of these characters.

Calculate the idea of God horse because before sharing so no longer repeat ~ Interested students can view the code or private with me to discuss ^ ^

　Two, moving end

Mobile End Although the overall size of small + upside down to the size difference is too large, but the nature and PC-side page is no different.

The Common adaptive nature is:

1. Response, media queries with the percentage of the page content to adapt to the natural ((http://game.qq.com);

2. According to the browser size and then dynamic positioning (http://up.qq.com/2014/await/). Mobile input URL Browse or scan the next row of two-dimensional code

If you do the mobile phone side of the page, using the above method to do natural normal display is not a problem, but when the task is heavy or insufficient resources need PC and mobile phone use the same set of pages, how to adapt to the phone is a need to consider the problem.

Let's take a look at the examples first:

Http://up.qq.com/2014/user/user8.shtml

Open will find this is a normal PC side of the active page, but because from the planning to the online time is very tight do not have time for the mobile version of a separate set, so you need to consider how to adapt to mobile phone browsing.

Because this series is actually a fun show after pulling the data (in fact, positioning the picture and text on the page), so the position and width are likely to be problematic at the time the display is displayed, and the font may be wrapped when the resolution is small, and even the background and height of the page are not easy to control when adapting to a multi-resolution phone, etc. (I have a tangle of worries).

What to do?

Well, you must have thought of the smart, ah ~ with our PC end of the first example, zoom to fix!

Android & IPhone

IPhone & PC

The same set of pages, in a small operation can be turned into a mobile phone can be browsed.

(because it is the PC side of the activity so the call is the PC login & Select the large area components, so the mobile phone side operation has slot point, but in this share please ignore it first >_