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=1
Keeps 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