Talk about mobile terminal adaptation

This is my participation 8 The fourth of the yuegengwen challenge 17 God , Check out the activity details :8 Yuegengwen challenge

One 、 introduction

There are two starting points for users to choose a large screen , Some people want bigger Fonts , Bigger picture ; Some people want more content , I don't want a bigger icon ; Some people want a mirror ….

Fully understand various equipment , We will know that screens of different sizes have their own positioning , image ipad Compared with the large screen device itself iphone5 Should have a greater vision , Instead of rudely letting users feel the experience of the elderly machine .

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

Two 、 Basic unit

For mobile development , In order to achieve the effect of high-definition page , The specification of visual manuscript often follows the following two points ：

1. First , Select a phone's screen width and height as the benchmark ( It used to be iphone4 Of 320×480, Now more is iphone6 Of 375×667).
2. about retina The screen ( Such as : dpr=2), In order to achieve HD effect , The canvas size of the visual manuscript will be benchmark 2 times , That is to say, the number of pixels is original 4 times （ Yes iphone6 for ： The original 375×667, Will become 750×1334）.

Physical pixel (physical pixel)

A physical pixel is a display ( Mobile phone screen ) The smallest physical display unit , Under operating system scheduling , Each device pixel has its own color value and brightness value .

Device independent pixel (density-independent pixel)

Device independent pixel ( Also called density independent pixels ), It can be regarded as a point in the computer coordinate system , This point represents a virtual pixel that can be used by the program ( such as : css Pixels ), And then it's transformed into physical pixels by related systems .

So , There is a certain correspondence between physical pixels and device independent pixels , That's what we're going to talk about next .

DPR Device pixel ratio (device pixel ratio )

Device pixel ratio = Physical pixel / Device independent pixel ; // In a certain direction ,x Direction or y Direction Can be in JS in window.devicePixelRatio Get the... Of the current device dpr

3、 ... and 、 Common layout types

rem Layout

principle ： According to the screen size of the phone and dpr, Dynamic modification html The benchmark value of （font-size）

The formula ： rem = document.documentElement.clientWidth * dpr / 100

notes ： multiply dpr, It's because it's possible for a page to 1px border The page zooms (scale) 1/dpr times ( without ,dpr=1)

Suppose we divide the screen width into 100 Share , The width of each portion is in per Express ,per = Screen width / 100, If you will per As a unit ,per The previous value represents the percentage of screen width

p {width: 50per;} /*  Screen width 50% */
 Copy code 

If you want page elements to change proportionally with the screen width , We need the above per Company , If the child element is set rem Properties of units , By changing html Font size of element , You can change the actual size of the child element

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

If you allow html The size of the element font , Equal to the width of the screen 1/100, that 1rem and 1per It's equivalent.

html {fons-size:  Element width  / 100}
p {width: 50rem} /* 50rem = 50per =  Screen width 50% */
 Copy code 

The practical application

rem When acting on non root elements , Relative to the root element font size ;rem When applied to the root element font size , Relative to its initial font size

It can be seen that rem The values can be divided into two cases , Set on root and non root elements , for instance :

/*  Act on the root element , Relative to the original size （16px）, therefore html Of font-size by 32px*/
html {font-size: 2rem}
 
/*  Acting on non root elements , Relative to the root element font size , So for 64px */
p {font-size: 2rem}
 Copy code 

for instance ：

Design width	Element width in design
320px	50px
480px	75px
640px	100px

The proportion of elements in the design draft ：100 / 640 = 75 / 480 = 50 / 320 = 15.625

The following table shows the calculated values of elements under different screen widths

Page width	html font size (1rem)	p Element width
320px	320/100=3.2px	15.625*3.2=50px
480px	480/100=4.8px	15.625*4.8=75px
640px	640/100=6.4px	15.625*6.4=100px

Used in development px Development , The project in css Prior to entry into force px All converted to rem.

vw

vw/vh Is based on Viewport A unit of window length window.innerWidth/window.innerHeight stay CSS Values and Units Module Level 3 neutralization Viewport There are four related units , Respectively vw、vh、vmin and vmax.

• vw： yes Viewport’s width Abbreviation , 1vw be equal to window.innerWidth Of 1%
• vh： and vw similar , yes Viewport’s height Abbreviation ,1vh be equal to window.innerHeihgt Of 1%\
• vmin：vmin The value of is current vw and vh The smaller value in
• vmax：vmax The value of is current vw and vh The greater of

You can see vw In fact, it is realized 1vw = 1per, Compared with rem Need to compute html The benchmark value of ,vw Undoubtedly more convenient .

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

Q：vw So convenient , Is it better than rem Better , Can completely replace rem What about it ？

A： Of course not. .

vw There are also shortcomings. .

• vw Conversion is sometimes inaccurate , Smaller pixels don't fit well , Just as we can accurately represent a larger value with a smaller value , If a larger value is used to represent a smaller value, there may be problems such as digit conversion, which cannot be accurately expressed .
• vw The compatibility is not as good as rem
• When using elastic layout ,vw Cannot limit maximum width .rem By controlling HTML At baseline , To achieve the maximum width limit .

Q：rem Is it so perfect ？

A：rem It's not everything

• rem The production cost is greater , Additional plug-ins are needed to implement .
• Font cannot be used rem, There is no linear relationship between font size and font width , All font sizes cannot be used rem, Because the font size of the root element is set , It will affect all elements without font , Therefore, you need to set all the elements that need font control .
• In terms of user experience , The comfort of text reading has nothing to do with the size of the media .

Four 、 Adaptation scheme

Scheme 1 ： rem/vw

Applicable scenario ：

• There are many kinds of visual components , Visual design depends on the relative relationship of element position, which is a strong mobile page ：vw/rem

Example ：

• Are you hungry （h5.ele.me/msite/）
• Yes viewport Scaled
• html Elemental font-size Still by px Appoint
• Use... On the layout of specific elements vw + rem fallbak In the form of
• There is no limit to the layout width
• css The build process requires plug-in support

Option two ： flex + px + percentage

Applicable scenario ：

• The pursuit of reading experience , Such as the list page .

Example ：

• You know （www.zhihu.com/）
• The pursuit of reading experience , Use px Layout .
• tencent （xw.qq.com/）
• The main content of the home page is news , For a better reading experience , Use px Layout .

Like to support 、 Fragrance in hand 、 And glory , Use your little hand to get rich , Thank you for leaving your footprints .

Good recommendations from the past

Front end Performance Optimization Practice

Talk about troublesome regular expressions

get files blob The stream address realizes the download function

Git Related to recommend

Easy to understand Git introduction

git Realize automatic push

How do I use git Of

Interview related recommendations

The front-end ten thousand words face is —— The basic chapter

Front end 10000 word area —— Advanced

See... For more highlights ： Personal home page