Responsive Web Design basics

http://wf.uisdc.com/cn/getting-started/your-first-multi-screen-site/responsive.html Add a window: The window configuration will only appear in the head tag, And it only needs to be declared once.<meta name= "viewport" content= "Width=device-width, initial-scale=1.0" >Using meta viewport valuesWidth=device-widthThe control page adapts to the screen width at different resolutions. 　  Whether it's a small screen or a desktop display on a mobile phone, the page will re-typeset the content based on different screen sizes. Some browsers simply keep the width of the page constant and scale the content of the page rather than re-typesetting the contents of the screen when the user rotates to navigate horizontally. Add attribute initial-scale=1Keeps the CSS pixel proportional to the screen pixel at 1:1 regardless of the situation and allows the page to take precedence over the full-size screen width.

　　The Initial-scale property controls the zoom level when the page is initially loaded. The maximum-scale,Minimum-scale , and user-scalable attribute controls allow the user to zoom in or out of the page in any way.

Related article: https://www.w3schools.com/css/css_rwd_viewport.asp

Https://developer.mozilla.org/zh-CN/docs/Mobile/Viewport_meta_tag

  Background-size:cover; //Causes the element to stretch freely at the persisted proportions. Set BreakpointsDevice Query Technology (Media Queries) @media (min-width:600px) {}

In our product page, it looks like we need to do:

• Limit the maximum width.
• Modifies the inner margin of an element and shrinks the loadline.
• Aligns the table with the title content.
• Keeps the video floating around the content.
• Reduce the size of the pictures and let them appear in a better pattern.

This container will contain a simple div in the table below: <div class= "Container" >...</div>.container {margin:auto;  max-width:800px; }

Responsive Web Design basics