Google Web Chinese development manual: 3 responsive

Https://developers.google.com/web/fundamentals/getting-started/your-first-multi-screen-site/responsive

(Translator's note: All the code according to the tutorial cannot implement the Code. After debugging, I sent all the code out. Ps: No wall flip tool is used, and the examples provided by Google cannot be accessed .)

Each device has its own unique advantages and limitations. To make this webpage accepted among many different display devices, as a Web developer, try your best to make this page support all devices.

Directory:

• Add viewport
• Simple Application Style
• Set the first breakpoint
• Design of Maximum Width limit
• Change the spacing and text size
• Adaptive Element
• Summary

In the previous tutorial, the basic content of the page has been filled. We will decorate the page and make it beautifully displayed on a series of devices with different resolutions.

In accordance with the mobile development principle, we start with narrow screens-similar to mobile phones-and first establish this concept, and then gradually expand to the large screen. We can determine the window width to achieve different design and layout.

Previously we created a set of different levels of design definition content for display. Now we need to adapt the page to different la S. We need to set the breakpoint-use and decide when to change the layout and style-based on how the content adapts to different screen resolutions.

Use viewport to start from the narrow screen and then expand step by step based on the breakpoint trigger so that the content can adapt to the resolution and create a high-level layout version based on the main breakpoint
To add a viewport, even the simplest page, you must add the viewport tag, which is the key to your experience in developing multi-device support. Without it, your website cannot have a good performance on mobile devices. The introduction of viewport will make the browser think that the page needs to be scaled to adapt to the screen. There are many configuration schemes, which are set as follows by default: (you can declare them once in <meta name="viewport" content="width=device-width, initial-scale=1.0">
Simple Application style our products and companies often need a special advertisement and support different styles. Style Guide

Style guidance can effectively give visitors a high-level understanding of the page and ensure that you are consistent in design.

Colors

#39b1a4

# Ffffff

# F5f5f5

# E9e9e9

# Dc4d38

Add decorative Image

In the previous tutorial, we added "content images", which are important for describing our products. "Image decoration" is not a must for content, but after adding it, visitors can pay more attention to our products.

For example. Titles with images can entice visitors to read