(Small buried size change town building)

On the mobile end of the web adaptation scheme, you can use the media query, EM, REM, VW/VH, viewport and other technology processing, as long as you have contacted the mobile end of the web development, more or less will understand. But today’s topic is not mobile, but PC adaptation.

As a large-screen web scene, the screen size gap on PC is far more complex than that on mobile. First, the screen width gap can span from more than 1000 pixels (portrait screen) to more than 2000 pixels, can be a large-screen desktop, can also be a laptop/tablet; Unlike mobile, which is relatively fixed, Windows can be maximized, or arbitrarily wide…

When you need to scale a web page on the PC, it can be a headache. Or tell product operation, this can not be done, do not support ┑(￣ dare￣)┍; Or die some brain cells and see how it works.

So here we go, conventional thinking. Let’s get this straight

First of all, IE8 do not come out, I do not want to see it, also do not intend to be compatible with it ~

Web adaptation, in fact, is to adjust the size of page elements/text according to the screen size, as complete as possible display content.

So, whether PC or mobile terminal, the idea is the same, you can use the media query progressive adjustment, you can use CSS unit control such as font size, but also use the overall scaling, the following in turn comb.

Let’s start with player Number one [media enquiries].

I won’t explain what it is. The classic representative of PC adaptation through media query is Bootstrap grid system, which was really a sharp knife in the past, from the background to the website, it is everywhere, even today, many of us still benefit from it.

Although the thought is very good, but the reality is not very beautiful.

First of all, its existence will affect the art to free themselves. Forcing an artist to understand why pages should be divided into equal-width grids, where sections need to be adjusted, is itself impractical. Some of the art doesn’t even have the same size spacing for a set of buttons, let alone several sets of designs for different screen sizes.

This scheme is difficult to achieve smoothly, now are basically used in the background, and there are a few other places to use [media query] to adjust.

Then came contestant Number two.

Leaving out vw/ VH and all that, I know it’s nice to change the size according to the width of the screen, but the reality is that mobile is not always compatible, and PC is dead dead. Let’s focus on REM, which is easier to use

Rem itself is interpreted as “font size of the root element”, which is the unit that changes relative to the font size of the root element. I will not mention the benefits, the specific implementation can baidu ~

Generally speaking, it is used on the mobile terminal, but in recent years the development of the browser is also quite fast, PC terminal direct use problem is not big, we kang kang its compatibility.

The picture above is green, with automatic conversion tools, standard and feasible solutions, it is wonderful ~

Once again ridicule, art drawing is not standard, the development of tears two lines…

The scheme needs to be based on art. We received the design of more than 10 pixel size text is not uncommon, and unrepentant people catch a lot of, to know that mobile terminal text can only go to the minimum 10 pixels, PC terminal can only go to 12 pixels. Mobile end according to the draft can be used to transform zoom individual text barely achieve, but PC end on ~~

And finally contestant Number three [Zoom].

Just like on mobile, as long as the whole thing is scaled to the appropriate size of the view, it should be pretty much what we want, no problem.

But when it came to implementing it, it was a bit of a long story.

Because there is no perfect implementation…. _ _ (´ ཀ ` “<)

Internet can be turned over to get the plan, I basically to confirm, roughly explain the battle process.

  1. The viewport. This is a fake solution. I actually knew it was unlikely. OK is used on mobile, but I don’t think it works on PC. This time again practice, the conclusion is to give up. Don’t ask why, ask is not supported, the truth can go to check the document, increase the knowledge reserve ~

  2. CSS Zoom properties. This is really fried chicken, a zoom set, the whole page according to the scale of the display, no additional adjustment, truly achieve one-step ~

    Unfortunately, there is a called Firefox silly not to die from, has not followed the public pace, the whole line of red…

  3. CSS transform scale. This is arguably the most compatible solution. As an almost all-green beauty, the Transform property is widely used to rotate, scale, move, tilt, shift, and almost all interactive changes, allowing mobile and PC to do whatever they want.



    It also seems to work well in our requirements scenario, where a single zoom can easily fit the entire page

    Before you jump the bandwagon, remember that transform doesn’t take elements out of the standard stream. Perhaps for performance reasons, to avoid backflow, no matter how the element transforms, it still occupies the original space.

    This means that if you want to scale a regular layout, you need to crop out any extra white space created by scaling, or make up for any missing space.

    In addition, after the transform, if the inner element has a child element with fixed position, the child element will no longer be positioned relative to the root element, and become the parent element, which is similar to absolute. テ _ デ

Perfection is not possible, there is no perfect in this world, I can only comfort myself, I can not have both have and…

To sum up, make a summary.

  • If the art is strong, or the site is a functional site, it can be more rigid, media queries can complete the requirements.

  • If the art is strong, the design is normative, the font problem can be controlled, and REM is embraced, everything will be harmonious.

  • Without the “if” above, the choice becomes small, and you can only find your way through imperfections.

Finally, let’s talk about my practical transform scheme.

As you can see from the above, the Transform scaling scheme is not suitable for scaling individual elements (such as buttons), nor for scaling root elements. It should apply to a block, a section, and avoid using it on children with fixed positions.

This may sound harsh, but it covers the vast majority of usage scenarios, not just niche ones. Basic web pages are partitioned by layout, and the navigation and sidebars that hover over the page are separate blocks that can be scaled independently.

Directions:

Sets a shell element for clipping/expanding. Get the actual size of the block element to be scaled (the size of the element will not change even if the transform is scaled), calculate the size of the block element by the scale, and get the size of the block element.

Then there’s the problem of automatic scaling:

Listen for the resize event (throttable optimization), and when the scaling is calculated, a new style calculation is triggered. The operation of setting the style can be consolidated into several small functions for easy invocation, avoiding code duplication.

I will not send the code, this said it is actually a few minutes to code out a small function, no show value.

This article concludes, if there are other good ideas, please browse the discussion oh ~~