Mobile web Development Summary and web development Summary

Mobile web Development Summary and web development Summary

The previous week completed a PC-end HTML + CSS-based project. In the past few days, I have been engaged in mobile development, which is also based on HTML + CSS. Although I first came into contact with mobile development, I also followed the PC development steps during the development process. First, you can plan the overall layout and analyze which components can be used as components. In this mobile project, many components can be used as components. This improves our development efficiency. Mobile web development is mainly intended for handheld devices. Therefore, in development zones with PCs, browser compatibility is not considered, but adaptation to devices of different sizes.

1. When using Media, we need to set the following code (written in the head label ):

<Meta name = "viewport" content = "width = device-width, maximum-scale = 1, user-scalable = no"/>

Several parameters of this Code are described as follows:

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

• Initial-scale:Initial scaling ratio (1.0 by default)

• Minimum-scale:Minimum scale allowed by users (1.0 by default)

• Maximum-scale:Maximum scale allowed by users (1.0 by default)

• User-scalable:Whether the user can manually zoom in or out (the default value is no, because we do not want the user to zoom in or out the page)

2. CSS media Query

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

1. @ Media screen and (max-width: 960px ){
2. Body {
3. Background: #000;
4. }
5. }

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