1. Overall scaling
Overall scaling can be used in a marketing campaign page. Marketing campaigns may have to use a background image rather than a background color because of aesthetic design requirements, so you need to consider the background image to fit the screen size. Developers can use a width of 320 pixels as the base width (the height can be fixed) and then scale it by calculating the actual document width. Using integral scale layout development project in the process of loading need to monitor the resize event, the code is as follows: ‘window. The addEventListener (‘ resize, document. Body. ClientWidth / 320); Wrap {width: 320px; line-height: 20px; “> < span style =” max-width: 100%; transform-origin: 0 0 }”’
2. Media query
Another method is to use the background color fill whole, subject to use different media query size optimization, developers need to set the screen resolution of the mainstream, this example for dealing with the icon to the background of accurate positioning, so is not suitable for using media queries, media query is more suitable for some display page, this example only external layer changes, Wrap {background-color: green; } / / set the outer background color /.main-bg {background: url(.. /images/main.jpg) no-repeat; / background-size: 100%; } @media (max-width: 320px) {/ / fit the screen below 320px /. Main-bg {width: 320px; height: 470px; }} @media (min-width: 321px) and (max-width: 639px) {/ for 320px to 640px width screen /. Main-bg {width: 480px; / Height: 705px; } @media (min-width: 640px) {/ / match the screen width of 640px /. Main-bg {width: 640px; height: 940px; }} “” media query will cause a large increase in code, in the actual development, developers need to pay attention to two points, one is to set the properties do not need to change according to the screen outside the media query, reduce code redundancy, two is to set the required media query breakpoint. For more information: