Summary of mobile web development

　A week ago, I completed a PC-side project based on HTML+CSS. In the past few days, I have been exposed to mobile-side development, which was also completed on the basis of HTML+CSS. Although it was my first time to come into contact with mobile terminal development, during the development process, I also followed the development steps of the PC terminal. First cut the layout, you can also make an overall plan first and analyze which ones can be used as components. In this mobile terminal project, there are quite a few parts that can be used as components. This improves our development efficiency. The main target of mobile web development is handheld devices, so the difference from PC development is that there is no need to consider browser compatibility issues, but the adaptation issue for devices of different sizes.

　1. First of all, when using Media, we need to set the following code (written in the head tag):

　　　

　　Explanation of several parameters of this code:

• width = device-width: The width is equal to the width of the current device

• initial-scale: Initial scaling (default setting is 1.0)

• minimum-scale: The minimum ratio the user is allowed to zoom to (default setting is 1.0)

• maximum-scale: The maximum ratio the user is allowed to zoom to (default setting is 1.0)

• user-scalable: Whether the user can manually zoom (default is set to no, because we don’t want users to zoom in and out of the page)

　2. CSS media query

　　Specify style sheet rules for specified media types and query conditions. Set display content on devices of different sizes.

1. @media screen and (max-width: 960px){
2. body{
3.              background: #000;
4. }
5. }

　The above code describes the style when the screen is less than or equal to 960px. If the screen is less than or equal to 960px, the page background color will be black.