"Mobile web front end efficient development practice" Note the static layout on the mobile side of the adaptive

1. Overall zoom

Overall scaling can be used on campaign pages, and campaigns may have to use a background image rather than a background color because of the design aesthetic requirements, so you need to consider the background map 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 by calculating the actual document width.

Projects developed using the overall scale layout need to listen for the resize event during the loading process, with the following code:

Window.addeventlistener (' resize ', document.body.clientwidth/320);

In addition, the developer needs to add the Transform-origin attribute on the scaled node to ensure that the zoom starts from the origin, and if the non-origin scale causes the page to not fully display, the CSS code is as follows:

. Wrap {width:320px;transform-origin:0 0}

2. Media Enquiry

Another method is to use the background color of the overall population, the main body using different media queries for size optimization, the developer needs to set the mainstream screen resolution, this example because to handle the icon to the background map of the precise positioning, so it is not suitable for media queries, media query more suitable for some display page, This example only modifies the external layer, assuming a green background, the code is as follows:

Media queries will increase the amount of code, in the actual development, developers need to pay attention to two points, one will not need to be based on the screen changes in the properties of the media query settings, reduce code redundancy, the second is to set up the required media query breakpoints.

. wrap {Background-color:green;} /* Set the outer background color */.MAIN-BG {background:url (.. /images/main.jpg) no-repeat;/* background picture */background-size:100%;/* background picture full container */} @media (max-width:320px) {/* Fit 320px width below screen */ . MAIN-BG {width:320px;height:470px;}}  @media (min-width:321px) and (MAX-WIDTH:639PX) {/* fit 320px to 640px width screen */. MAIN-BG {width:480px;/* with 480px adaptation change interval */height: 705px;/* Adjust height position picture stretch */}} @media (min-width:640px) {/* to fit 640px or more width screen */. MAIN-BG {width:640px;height:940px;}}

　　

More information about:

"Mobile web front end efficient development practice" Note the static layout on the mobile side of the adaptive