This is the 17th day of my participation in the August Challenge

One, the introduction

There are two reasons for users to choose a large screen. Some people want bigger fonts and bigger pictures. Some people want more content and don’t want a bigger icon; Some people want a mirror… .

With a full understanding of various devices, we will know that screens of different sizes have their own positioning. Compared with iphone5, a large-screen device like iPad should have a larger field of view, rather than allowing users to feel the experience of the old phone.

However, due to the shortage of design and development resources, only one design draft can be applied to multi-size equipment at this stage. Therefore, we need to consider how to make the presentation more reasonable while maintaining one design draft.

2. Basic units

For mobile development, in order to achieve the effect of page hd, visual draft specifications tend to follow the following two points:

  1. First, take a phone’s screen width and height as a benchmark (it used to be 320×480 on the iphone4, now it’s more like 375×667 on the iphone6).
  2. For retina display (e.g. DPR =2), the canvas size of the artwork will be twice the base size for hd, i.e. the number of pixels will be four times as large (for iphone6, 375×667 will be 750×1334).

Physical Pixel

A physical pixel is the smallest physical display unit on the display (phone screen), and each device pixel has its own color value and brightness value under the scheduling of the operating system.

Density independent Pixel

A device-independent pixel (also known as a density-independent pixel) can be thought of as a point in a computer coordinate system that represents a virtual pixel (such as a CSS pixel) that can be used by a program and then converted into a physical pixel by the relevant system.

So, there is a correspondence between physical pixels and device-independent pixels, which is the device pixel ratio.

DPR Device Pixel Ratio

Device pixel ratio = physical pixel/device independent pixel; // In a certain direction, x direction or y direction can get the DPR of the current device in JS window.devicepixelRatio

Three, common layout types

Rem layout

Principle: Dynamically modify HTML reference values according to the screen size and DPR of the mobile phone (font size)

Formula: rem = document. DocumentElement. ClientWidth * DPR / 100

Note: Multiply by DPR because it is possible for the page to scale by 1/ DPR in order to achieve 1px border (if not, DPR =1).

Suppose we divide the width of the screen into 100 equal parts, and the width of each part is expressed as per. Per = the width of the screen divided by 100. If per is used as a unit, the number in front of per represents the percentage of screen width

p {width: 50per; }/* 50% of the screen width */
Copy the code

If we want the page element to vary equally with the screen width, we need the per unit above. If the child element is set to REM, we can change the actual size of the child element by changing the font size of the HTML element

html {font-size: 16px}
p {width: 2rem} /* 32px*/
 
html {font-size: 32px}
p {width: 2rem} /*64px*/
Copy the code

If the font size of an HTML element is equal to 1/100 of the screen width, then 1rem is equivalent to 1per

html{fons-size: element width /100}
p {width: 50rem} /* 50rem = 50per = 50% of the screen width */
Copy the code

The practical application

When REM is applied to non-root elements, the font size relative to the root element; Rem applies to the font size of the root element, relative to its initial font size

It can be seen that the REM value is divided into two cases, which are set at the root element and non-root element. For example:

/* Applies to the root element, relative to the original size (16px), so the HTML font size is 32px*/
html {font-size: 2rem}
 
/* applies to non-root elements, relative to the root element font size, so 64px */
p {font-size: 2rem}
Copy the code

Here’s an example:

Width of draft Design the width of the element
320px 50px
480px 75px
640px 100px

Proportion of elements in design draft: 100/640 = 75/480 = 50/320 = 15.625

The table below shows the calculated values of elements at different screen widths

The page width HTML font size (1rem) P element width
320px 320/100 = 3.2 px 15.625 * 3.2 = 50 px
480px 480/100 = 4.8 px 15.625 * 4.8 = 75 px
640px 640/100 = 6.4 px 15.625 * 6.4 = 100 px

Px was used for development, and the project converted px to REM before CSS took effect.

vw

Vw/vh is based on the Viewport window length unit window. The innerWidth/window. The innerHeight CSS Values and Units in the Module Level 3 and Viewport has four related Units, Vw, VH, vmin and vmax, respectively.

  • Vw: short for Viewport’s width. 1vw is equal to 1% of window.innerWidth
  • Vh: similar to vw, short for Viewport’s height. 1vh equals 1% of window. InnerHeihgt
  • Vmin: The value of vmin is the smaller value of the current VW and VH
  • Vmax: The value of vmax is the current larger value of VW and VH

It can be seen that VW actually achieves 1VW = 1per, which is undoubtedly more convenient than REM, which needs to calculate the reference value of HTML.

/* REM */
html {fons-size: width / 100}
p {width: 15.625 rem}
 
/* vw solution */
p {width: 15.625 vw}
Copy the code

Q: Is vw so convenient that it’s better than REM, that it can completely replace REM?

A: Of course not.

Vw also has disadvantages.

  • Vw conversion is sometimes not accurate, and smaller pixels are not suitable. For example, we can use a smaller value to accurately represent a larger value, but if a larger value is used to represent a smaller value, there may be problems such as digital conversion and so on.
  • Vw is not as compatible as REM
  • Vw cannot limit the maximum width when using an elastic layout. Rem can limit the maximum width by controlling HTML reference values.

Q: Is REM so perfect?

A: REM is not A panacea

  • Rem is more expensive to produce and requires additional plug-ins to implement.
  • Font cannot use REM, font size and font width are not linear relationship, all font size can not use REM, because the font size of the root element is set, will affect all elements that do not have a font, so it is necessary to set all elements that need font control.
  • From the perspective of user experience, the comfort of text reading is independent of the size of the media.

Four, adaptation scheme

Plan 1: REM/VW

Applicable scenarios:

  • The mobile page with a large variety of visual components and strong dependence of visual design on the relative relation of element position is vw/ REM

Example:

  • H5.ele. Me /msite/
  • The viewPort is scaled
  • Font size for HTML elements is still specified by px
  • Vw + REM Fallbak is used for the layout of specific elements
  • There is no limit to the layout width
  • The CSS build process requires plug-in support

Plan 2: Flex + PX + percentage

Applicable scenarios:

  • Scenes that pursue the reading experience, such as list pages.

Example:

  • Zhihu (www.zhihu.com/)
  • For the reading experience of the scene, use PX layout.
  • Tencent
  • The main content of the home page is news. For better reading experience, PX layout is used.

Praise support, hand left lingering fragrance, with rongyan, move your rich little hands yo, thank you big guy can leave your footprints.

Past wonderful recommendation

Front-end performance optimization for actual combat

Talk about annoying regular expressions

Obtain file BLOB stream address to achieve the download function

Git Git

Easy to understand Git introduction

Git implements automatic push

How do I use Git in my work

Interview Recommendations

Front ten thousand literal classics – the foundation

Front swastika area – advanced section

More exciting details: personal homepage