Responsive design

1. Responsive Layout

   One page corresponds to multiple devices. When the device screen/pc webpage size changes, the page layout (not the element/text size) will be changed automatically.

   Therefore, there is no need to write mobile pages separately.

   
   

   make suitable choices

   1. Bad choice: Choose popular fixtures. The downside is that devices come in a variety and are updated.

   2. A good choice: do a survey on 4 types of equipment, each with a width range. The downside is that equipment can still change.

   3. The perfect choice: by visual design.

      
      

2. Responsive Development

   1. Principles of Responsive Development

      It is to use media queries to set the layout and style for devices of different widths, so as to adapt to the purpose of different devices.

      Device division	Size interval (size refers to width)	Layout container (usually) width setting
      Very Small Screen (Mobile)	<768px	100%
      Small screen devices (tablets)	>=768px ~ <992px	750px
      Moderate devices (desktop monitors)	>=992px ~ <1200px	970px
      widescreen devices (large desktop monitors)	>=1200px	1170px

      
      

   2. Responsive layout container

      Responsive requires a parent as a layout container to cooperate with child elements to achieve change effects.

      The principle is to change the size of the layout container through media queries under different screens, and then change the arrangement and size of the sub-elements inside, so as to realize different page layout and style changes under different screens.

      Common widths of layout containers are shown in the table above. The container is a little less than the screen to make the page centered and aligned with blanks on both sides, which looks better.

      You can use media query to write .container {} by yourself in four cases.

      
      

3. Media query

   Responsive design should be realized through media query.

   @media only screen and (max-width: 600px) {
      body {
        background-color: lightblue;
      }
   }

   only screen is because there is a printer, speech and screen reader. For example, when the page supports printing, you can write only printer to define what content should be displayed.

   max-width: 600px is the old design scheme, that is, laptop is preferred.

   min-width: 600px Modern design is mobile-first. Such as Tailwind, Chakra.

   In addition, there are also horizontal/flat parameters, such as orientation: landscape. These are advanced actions, for phones and tablets.