How to use vw+rem for mobile layout

Are you still using rem flexible layout? Does it make you feel uncomfortable to put a large section of compressed js code in the header of the HTML file? Let's learn about vw, which can make your code purer

Briefly introduce the REM layout scheme

rem is a unit of length in CSS, 1rem = font-size value of the root element html. When all elements on the page use rem units, you only need to change the root element font-size value, and all elements will be enlarged or reduced proportionally. Therefore, we only need to write a small piece of js code to change the font-size value of html according to the screen width to achieve flexible layout. This method is indeed convenient and has good compatibility. It is currently a very mainstream elastic layout solution. However, this solution has disadvantages (disadvantage 1: it is strongly coupled with the font-size value of the root element, which will cause layout disorder when the system font is enlarged or reduced; disadvantage 2: a piece of js code needs to be inserted into the header of the html file). This article will introduce a better and purer solution.

vw unit realizes flexible layout

Let's first look at the official explanation of the vw vh units w3c vw: 1% of viewport's width vh: 1% of viewport's height

Viewport is the size of the browser's visible area. We can understand it like this: 100vw = window.innerwidth, 100vh = window.innerheight. On mobile devices, we can generally assume that 100vw is the screen width. If you use vw layout, you don't need to dynamically set the font-size of the root element in js like rem. You only need to use this function to convert it in sass.

//Take the iPhone 7 size @2x 750 pixels wide visual draft as an example @function vw($px) {
    @return ($px / 750) * 100vw;
}

//Assume that a div element is in the visual draft, with a width of 120px and a font size of 12px
div {
    width: vw(120);
    font-size: vw(12);
}

Comparison between vw unit and percentage % unit

So what is the difference between 100vw and the width:100% we usually use?

1. The percentage % is calculated based on the width or height of the parent element, while vw vh is fixedly calculated according to the viewport and will not be affected by the width and height of the parent element.

2.100vw includes the width of the page scroll bar (the page scroll bar belongs to the viewport range, 100vw of course includes the width of the page scroll bar). However, when body or html is set to width:100%, the width of the page scroll bar is not included. That is to say, 100vw will be wider than 100% when there is a vertical scroll bar. This will lead to a problem: when using vw units on the PC side, if the page content exceeds the length of one screen and a vertical scroll bar appears, and there is an element width:100vw, a horizontal scroll bar will appear because the element (100vw + scroll bar width) exceeds the viewport width. (The scroll bar on the mobile terminal does not take up space, so this problem will not occur.) However, the PC terminal generally does not require elastic layout, so it is safer to use width:100% as much as possible.

• According to the CSS3 specification, viewport units mainly include the following 4:
  
• vw : 1vw is equal to 1% of the viewport width
• vh : 1vh is equal to 1% of the viewport height
• vmin: select the smallest of vw and vh
• vmax: select the largest one between vw and vh

Measured in viewport units, the viewport width is 100vw and the height is 100vh (the left side is vertical screen, the right side is horizontal screen)

For example, if the browser viewport size on the desktop is 650px, then 1vw = 650 * 1% = 6.5px (this is a theoretical calculation. If the browser does not support 0.5px, the actual rendering result may be 7px).

compatibility

Use appropriate units to adapt the page

For mobile terminal development, the most important point is how to adapt the page to achieve compatibility with multiple terminals. Different adaptation methods have their own advantages and disadvantages.

As for the mainstream responsive layout and elastic layout, the layout implemented through Media Queries requires the configuration of multiple responsive breakpoints, and the experience brought is also very user-unfriendly: the resolution of the layout within the responsive breakpoint range is maintained, and at the moment of switching the responsive breakpoint, the layout brings a discontinuous switching change, just like a cassette player "clicking" again and again.

For a flexible layout that uses dynamic calculations of rem units, it is necessary to embed a script in the header to monitor changes in resolution and dynamically change the root element font size, coupling CSS and JS together.

Is there any way to solve this problem?

The answer is yes. By using appropriate units to implement adaptive pages, we can solve both the responsiveness fault problem and the script dependency problem.

Usage is based on iPhone 6 (750)

The first step is generally to set the meta tag for the mobile terminal.

<meta name="viewport" content="width=device-width, initial-scale=2.0, maximum-scale=2.0, minimum-scale=2.0, user-scalable=no">

Because the DPR of iPhone 6 and most other devices is 2, we need to convert it for the convenience of the second step.

The second step is to set the font-size of body and html

html {
    font-size: 13.3333333333333vw // 100px
}

13.How did 33333333333333vw come from?

• The optimal resolution is 100vw, based on iPhone 6 750px
• IKEA/iPhone6
  • 100vw / 750 = 0.133333333333333vw
• If we take 100px as the acceptable size, then
• 100px / 750 = 0.133333333333333px
• That is 1px = 0.1333333333333333vw
• Then the entire image is equal to 0.1333333333333333 * 10013.33333333333333vw = 100px
• Finally, we get 100px = 1rem

By converting in this way, we use vw to convert rem to 100px as the base

Then it can be used well in the project

div {
 
     // width: 100px;
     width: 1rem; 
}
 
span {
   // height: 12px
    height: .12rem
}

This is the end of this article on how to use vw+rem for mobile layout. For more relevant vw+rem mobile layout content, please search 123WORDPRESS.COM’s previous articles or continue to browse the following related articles. I hope everyone will support 123WORDPRESS.COM in the future!