An efficient method for mobile adaptive layout. Criticisms or corrections are welcome_html/css_WEB-ITnose

is my personal preference. The advantage is that it can save a lot of adaptation time and energy.

1. The general approach is to first use a little JS to determine the device width, and then give The root element html sets font-size to fit the entire page.

2. In CSS, whether it is font size or width and height, if em or rem units are used (1px can be ignored), it is ultimately determined by the font-size of the root element html. For example, if the design drawing is 640px wide, I usually set the font-size of the HTML to 20px. Assuming that the body width (or available width, depending on the situation) of a mobile terminal is clientWidth, then the design drawing must be restored on this terminal. , you need to change the font-size value of the adapted HTML to clientWidth/(640/(20*2)) (the mobile font size generally needs to be divided by 2), and then render the entire DOM. The JS is as follows:

function adaptFun(designPercent){
var mainWidth = document.body.clientWidth;
var fontSize = mainWidth/designPercent 'px';
document.documentElement.style.fontSize = fontSize;
//When the window changes, it needs to be adapted again. In this case, the actual value is not very great! The most important thing is just the first adaptation
window.onresize = function(){
var mainWidth = document.body.clientWidth;
var fontSize = mainWidth/designPercent 'px';
document.documentElement. style.fontSize = fontSize;
}
}

adaptFun(640/40);

I put the above code in a separate file (adapt.js);

3. How to place and execute adapt.js on the page

It is best to place adapt.js as high as possible and as close as possible after the body (as shown below), because it is not loaded at this time. How many things, but it is already possible to determine document.body.clientWidth, so that the font-size value of the original html can be changed.

< ;script type="text/javascript" src="js/adapt.js">

In this way, the page will display the original design on most terminals For image effects, even if you have a device with Device-pixel-ratio 1.5 or 3, since the relative position will not change, you can only write a media query (unless it is a particularly complex page, media query is not required).

4. Advantages and Overview

If you rely on media query for adaptation, you will have to write a lot of code, which is a headache. If you want to learn from similar projects in the future, you may even need to re-adapt. Spend a lot of time.

I personally think that as long as you write a version with a design width (such as writing a 640 or 320 wide version), the other automatic adaptation is not much different from writing a PC page.

Test address: http://game.feiliu.com/zk/ysg/main/index.html