Wechat applet development reserve knowledge

Catalog

One 、Flex Layout

Two 、 Mobile terminal related knowledge

（1） Physical pixel

（2） Device independent pixel &css Pixels

（3）dpr Than &DPI&PPI

 （4） Mobile adaptation scheme

---

One 、Flex Layout

（1） brief introduction

1) Flex yes Flexible Box Abbreviation , Meaning for ” Elastic layout ”, To provide maximum flexibility for box models .

2) Any container can be specified as Flex Layout , Inline elements can also be used Flex Layout .

3) Be careful , Set to Flex After the layout , The child element float、clear and vertical-align Property will fail .

4) use Flex Elements of layout , be called Flex Containers （flex container）, abbreviation ” Containers ”. All its child elements automatically become container members , be called Flex project （flex item）, abbreviation ” project ”

The container has two axes by default ： Horizontal spindle （main axis） And the vertical cross axis （cross axis）.

Starting position of spindle （ The intersection with the border ） be called main start, The ending position is called main end.

The starting position of the cross axis is called cross start, The ending position is called cross end, Items are arranged along the main axis by default .

The spindle space occupied by a single project is called main size, The cross axis space occupied is called cross size.

（2） attribute

flex-direction

flex-wrap

flex-flow

justify-content

align-items

align-content

Flex Layout Specific Learning Websites ：Flex Layout grammar tutorial | Novice tutorial

Two 、 Mobile terminal related knowledge

（1） Physical pixel

The resolution of the screen , The smallest unit that the device can control the display , Physical pixels can be regarded as corresponding pixels

（2） Device independent pixel &css Pixels

Device independent pixel ( Also called density independent pixels ), It can be considered as a point in the computer coordinate system , This point generation

Table a virtual pixel that can be used and controlled by a program ( such as ：CSS Pixels , It's just android In flight CSS Pixel on

Don't cry ”CSS Pixels ” Instead of calling ” Device independent pixel ”), And then it's transformed into physical pixels by related systems .

（3）dpr Than &DPI&PPI

1) dpr: Device pixel ratio , Physical pixel / Device independent pixel = dpr, General with Iphon6 Of dpr Subject to dpr = 2

2) PPI: Number of pixels on one inch display

3) DPI： At first, it refers to the number of ink points printed by the printer per unit area , The more ink dots, the clearer

 （4） Mobile adaptation scheme

1）viewport adapter

reason ：

a) When mobile phone manufacturers produce mobile phones, the default page width of most mobile phones is 980px

b) The actual viewport width of the mobile phone should be less than 980px, Such as : iphone6 by 375px

c) Development requirements ： Need to put 980 The page is completely displayed on the phone screen without scroll bars

  Implementation code ：

<meta name="viewport" content="width=device-width,initial-scale=1.0">

2）rem adapter

reason ：

a) Too many models , Different models have different screen sizes

b) demand ： The content of a set of design draft has the same effect on different models , Depending on the screen size , The content of the page changes accordingly

Implementation code ：

function remRefresh() {
let clientWidth = document.documentElement.clientWidth; //  Divide the screen equally  10  Share 
let rem = clientWidth / 10;
document.documentElement.style.fontSize = rem + 'px';
document.body.style.fontSize = '12px'; }
window.addEventListener('pageshow', () => {
remRefresh()
})
//  Function anti shake 
let timeoutId;
window.addEventListener('resize', () => {
timeoutId && clearTimeout(timeoutId);
timeoutId = setTimeout(() =>{
remRefresh()
}, 300)
})

Record the learning process of wechat applet development , Welcome to study and exchange ！