Mobile-side development

• Viewport

  • <meta name= "viewport" content= "Width=device-width,
    height=device-height,user-scale=no.initial-scale=1.0,
    minimun-scale=1.0,maximun-scale=1.0,target-densitydpi=device-dpi "/>

    • device-width/values (most Android phones do not support, Apple phone support)
    • Height may not be set and will be automatically scaled according to the width.
    • Dpi//ios not supported, most Android support.
  • Media Enquiry
    • @media
      • All media type
      • and () Link function
      • Only specific devices
      • Not exclude device
    • Media features
      • (max-width:500px)
      • (min-width:300px)
      • (orientation:portrait) Vertical screen
      • (orientation:landscape) Horizontal screen
      • (-webkit-min-device-pixel-ratio:2) pixel ratio
• Mobile-side adaptation scheme
  • Page Set Fixed width 320px,margin Center, left and right left white with background fill
  • Use media to set different styles according to different resolutions
  • Proportional scaling by means of, percentage, Flex, or REM
  • Rem
    • Em relative to the font size FONT-SIZE=16PX 1em=16px;
    • ren relative to root node HTML font size HTML font size is 16px 1rem=16px;
  • The head and the bottom of the fixed can not be fixed positioning, there will be compatibility problems, with absolute positioning.

Mobile-side development