Big is rem

As we can see, the main body of the page is normal, which is divided into two parts: the upper part is the introduction page, and the lower part is the main interface, with a click button responsible for all user interaction. In order to adapt to iphone4 to 6Plus and many Android, we can have the following schemes for the structure of the whole page:

Height percentage

Height percentage scheme – the main height of the entire screen is positioned in percentage, for example, the introduction section is 30 percent of the height, and the click to grab the red envelope part is the remaining 70 percent.

Advantages – easy to understand better get started Drawback – the inline style, leading style and their father and son element has high complex wide relationship, therefore, such as the introduction of internal element must also use px, em positioning way, so not so harmonious and guaranteed, easy to overflow or small screen space. On this page, the countdown text section and the haggling section are out of control.

Flex layouts by column

Flex layout is a great way to do this: for this page, we can use PX or EM to position and layout the introductory section, flex to fill in the space below, and use absolute positioning to center the bargaining buttons horizontally and vertically, which is silk-smooth.

Pros – Silky smooth. Disadvantages – if there are any disadvantages, the bottom width of the page is not easy to control, imagine that the resulting page will be almost full of one button at the bottom of the iphone4, and there will be a lot of white space in the 6 plas.

Big is rem

We know that before REM, EM had the natural defect of locating root as parent, as in pages like this. HTML >body>div. Parent >div. Son has CSS like this:

.html{ font-size:10px; .parent{ font-size:2em; .son{ font-size:1em; }}}Copy the code

Note that the CSS notation uses Sass. HTML is also abbreviated.

And guess what px son’s font is? It’s 20, that’s right. Because its reference element is the.parent element, not the root element, who would dare to use em if there were more nesting.

Fortunately, rem space solves this problem: the rem reference is the font size of the root element, which makes it possible to set global standards for different pages. I can set large font units for large screens, and small font units for small screens. In one fell swoop, the remaining issues of percentage positioning and Flex layout were resolved.

How do you determine font units? There are two methods, the first is more elegant: media query, we can use media query to see the width and height of the browsing device, and then set a suitable font unit, the other method is more accurate, that is to use JS to calculate.

Body width document. Body. ClientWidth document. The body height body. ClientHeight document. The documentElement. ClientWidth = = > width of the visible area Document. The documentElement. ClientHeight = = > highly visible areaCopy the code

The calculation works like this, for this page:

Assume: design draft height 1500px, introduction section height 300px, countdown font size 40px, screen height 1000px.

Font-size = 100 — >10px;

Step 2: The introduction section is set to 30REM height.

Step 3: Set the font size to 4REM.

Ah ha, see his good point, yes, global scaling adaptation. This means that the same pages you can see on the 6plus will also be able to see on the iphone4 without overlapping elements or white space due to the size of the screen, which is by far my favorite expression.

Advantages: achieved a perfect fit.

Cons: Just scale-up, small font size on small screen, big font size on big screen (though from experience, the font size is not obvious because the screen is there and comfortable to look at).

Cons: I don’t think it’s possible to have a single set of designs that are perfect for both large and small screens, because you don’t know when a word should take up 20 pixels or 5 percent of the screen width. If you want to do both, you can: use multiple sets of designs + CSS media queries to create different CSS styles for different widths of the page.

For multi-screen pages.

1.

Add media queries to the reset.css page to set font units according to different widths.

2.

Big is rem

Use the same method, but above is based on height to determine the font unit, here can use the width to determine the font unit.


var html = document.getElementsByTagName("html");
html[0].style.fontSize = document.documentElement.clientWidth/10+"px";Copy the code

Let the page are perfect display is one of my internship study, through the comparison, big kill I still use the rem feel more convenient, and of course there are many method is surely worth a try, rem + flex and so on, for example, if there is wrong, also please predecessors, criticism, threw stones at me, thank elder and peer advice!

Document. Body. ClientWidth = = > body object width. The document body. ClientHeight = = > object body height document. The documentElement. ClientWidth = = > Visible region width of the document. The documentElement. ClientHeight = = > visible region height web visible region wide: document. The body. The high clientWidth page visible area: Document. Body. ClientHeight page visible region wide: the document. The body. The offsetWidth high viewing area (including line width) page: Document. Body. OffsetHeight (including high edges) page of text in full width: the document. The body. The high scrollWidth web page text full text: the document. The body. The high scrollHeight web swept to: ScreenLeft: window.screenLeft: window.screenleft: window.screenleft: window.screenleft: window.screenleft: window.screenleft: window.screenleft: window.screenleft: window.screenleft: window.screenleft: window.screenleft: window.screenleft: window.screenleft: window.screenleft: window.screenleft: window.screenleft: window.screenleft Window. The screen. The height of screen resolution: wide window. The screen. The available workspace height: width screen. The window screen. AvailHeight screen available workspace width: AvailWidth $(window).height() $(document).height( OuterHeight (true) $(document.body).outerheight (true) $(document.body).outerheight (true Padding margin $(window).width() // the width of the viewable area $(document).width( $(document.body).width() $(document.body).outerWidth(true) $(document.body).outerWidth(true HTML precise positioning: scrollLeft scrollWidth, clientWidth, offsetWidth scrollHeight: get rolling height of objects. ScrollLeft: sets or gets the distance between the left edge of the object and the leftmost part of the currently visible content in the window scrollTop: sets or gets the distance between the top part of the object and the top part of the currently visible content in the window scrollWidth: gets the scrollWidth of the object OffsetHeight: Gets the height of the object relative to the layout or the parent coordinate specified by the parent coordinate offsetLeft: Gets the computed left position of the object relative to the layout or the parent coordinate specified by the offsetParent attribute OffsetTop: Gets the top calculated position of the object relative to the layout or parent specified by the offsetTop property Event. The vertical coordinate document offsetY relative container. DocumentElement. The scrollTop value of the vertical scroll event. ClientX + document. The documentElement. ScrollTop The amount of horizontal + vertical square scrolling relative to the documentCopy the code