Front-end development classification

PC terminal development Mobile terminal development Mobile Web development Hybrid app wechat small program/public account developmentCopy the code

Mobile adaptation

concept

  • By default, web pages on PC are zoomed out on mobile
  • Responsive layout
  • Screen adaptation (mobile terminal and PC terminal)

Basic concept

pixel

- Resolution 1792x828 pixel resolution: The higher the resolution of 1792 horizontal physical pixels, the clearer the image (the higher the resolution of a device of the same size, the smaller the size of a physical pixel) - Physical pixels are also called DEVICE pixels (DP: Device Pixel). The size of physical pixels is determined by the manufacturer during production. Each physical pixel is made up of red, green and blue electronic display dots -- CSS pixels, also known as logical pixels, Also called dip: Device indendent Pixel (independent of device pixels) Actual development pixel-device pixel ratio DPR: Device Pixel ratio DPR = number of device pixels/number of CSS pixels (if scaling ratio is 1) (The screen is large and small, DevicePixelRatio - Zoom <meta name='viewport' Content ='initial-scale=1'> // zoom Changes the size of the CSS pixel (1 CSS pixel is represented by more physical pixels). Zoom in, one CSS pixel can show more content!! Generally, the default viewport for mobile phones is 980px. PC web pages are displayed in the viewport of 980px during mobile phone display. <meta name='viewport' <meta name='viewport' Content ='width=device-width,initial-scale=1,maximum-scale=1,minimum-scale=1,user-scalable=no'> Equivalent to width=device-width) (user-scalable=no disallows user scaling, equivalent to maxinmum-scale=1,minimum-scale=1) // Some browsers user-scalable=no are ineffective, So compatible with write access to the viewport width document. The documentElement. ClientWidth document. The documentElement. GetBoundingClientRect (). The width window.innerWidthCopy the code

Development infrastructure

  • box-sizing
  • Icon Font (Alibaba Vector)
  • Flex layout
# flex container display: flex | inline - flex # flex project (flex containers all child elements automatically become a member, is called the flex project) # main shaft, cross shaftCopy the code