Responsive layout

Response type
    Let a website adapt to multiple devices or screens , It can make the layout and functions of the website change with the user's use environment .
       <meta name="viewport" content="width=device-width, initial-scale=1.0">
     @media Media query ： Set different types of media query criteria , Call the appropriate style for the eligible media ,IE8 The following is not supported
      for example ：meidia all and (max-width:400px){}    [ Note blank space ]
      Media type ：all： All devices
              screen： Computer screen , Flat , mobile phone
              print： The printer   
    Device resolution
        The computer ：1000-1200
        Flat ：768-992  992-1200
             meidia all and (min-width:992px){}
        mobile phone ：768
             meidia all and (max-width:768px){}
      for example ：@media all and (max-width:992px){  // Flat side
            .box{background-color: blue;}
        }
        @media all and (max-width:768px){    // Mobile terminal
            .box{background-color: green;}
        }
    Device keywords
       all All devices  screen Display device  handled Portable devices （ Desktop computers are not included ）  aural Auditory equipment  braille Braille tactile device
       pro jecttion Projection equipment  tty typewriter / terminal    embossed Braille device  【all The position of can be filled with 】
      Be careful ：
           【and There must be a space before and after the connection 】
      Import the file as a response
          <link rel="stylesheet" href="../media.css" media="all and (max-width:992px)">
      Device responsive labels
          <meta name="viewport" content="width=device-width, initial-scale=1.0">
          name="viewport"   Equipment mobile terminal equipment
          width=device-width Adaptive devices
          initial-scale=1.0 Initial scaling
          minimum-scale=0.5 Minimum zoom value
          maximum-scale=1.5 Maximum zoom value
          user-scalable=yes/no Allow zoom or not

Responsive considerations
    1. Must write device response labels , Otherwise, the mobile terminal will not recognize the response type
    2.media The document says 992 and 768 Pixels are OK
    3. Most layouts use percentages to set width and height No need to zoom in or out to set fixed pixels
    4. Spacing value , The up and down distances can be fixed pixels , The left and right distance should be set as a percentage
    5. Use css3 Instead of floating elements
    6. In addition to the menu at the head , To reduce the use of fixed positioning （ Positioning causes serialization ） Relative sets in pages are absolutely allowed
    7. Text zooms in and out using em and rem
    8. Pictures or div For zooming in and out zoom and transform
    9. The picture adapts to the resolution img{width：100%;height：auto }