Responsive design Code (TIPS)

1. Media queries, including examples that will help you quickly start your own multi-screen site development.

2. The top 5 functions (width, height, device-width, device-height, and orientation) are the most useful.

3. Provide different designs for mobile phones, tablets and desktop computers

4. Adding a viewport label with these settings <meta> will ensure that your smartphone and tablet comply with the width setting in your media query. In addition, setting the initial value to 1 also ensure that the iphone, ipad, and pod touch apply width settings correctly across the landscape.

5, omit height allows you to reduce the image on a smaller screen without distortion.

6. When designing for mobile devices, a percentage is recommended for font size.

Responsive design Code (TIPS)