Home > Developer > JavaScript
An Efficient Method for Adaptive Layout on mobile terminals. You are welcome to criticize or correct the layout.
It is a method that I personally prefer. The advantage is that it can save a lot of adaptation time and effort,
I. The general approach is to first use a JS to determine the device width, and then set font-size for the root element html to adapt to the entire page.
2. In CSS, whether it is the font size or width or height, if em or rem units are used (1 px can be ignored), the size of the font-size of the root element html is determined. For example, if the design drawing is 640px wide, I usually set the font-size of html to 20px. Suppose the width of the body of a mobile terminal (or the available width, depending on the situation) for clientWidth, to restore the design drawing on this terminal, you need to change the font-size value of the adapted html to clientWidth/(640/(20*2 )) (The font size of the mobile terminal is generally divided by 2), and then the entire DOM is rendered. JS:
Function adaptFun (designPercent ){
Var mainWidth = document. body. clientWidth;
Var fontSize = mainWidth/designPercent + 'px ';
Document.doc umentElement. style. fontSize = fontSize;
// You need to adapt to Windows when they change. In this case, the actual value is not great! The most important thing is the first adaptation.
Window. onresize = function (){
Var mainWidth = document. body. clientWidth;
Var fontSize = mainWidth/designPercent + 'px ';
Document.doc umentElement. 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
Adapt. js should try to put it up and keep it behind the body as much as possible (as shown below), because there is not much to load at this time, but we can already judge document. body. clientWidth, so that you can change the font-size value of the original html.
<Link rel = "stylesheet" href = "css/style.css">
</Head>
<Body>
<Script type = "text/javascript" src = "js/adapt. js"> </script>
In this way, the page will display the original design on the vast majority of terminals, even if there is a Device-pixel-ratio1.5 or 3 equipment, because the relative position will not change, you can only write a mediainfo query statement (unless it is particularly complicated, or the mediainfo query is not required ).
Iv. Advantages and feelings
If media queries are used for adaptation, many codes will be written, which is a headache. Similar projects may need to be used for reference in the future, or even re-adapted, which takes a lot of time.
I personally think that it is good to write a version with a proper design width (for example, write a version with a width of 640 or 320) and other automatic adaptation, which is not much different from writing a PC page.
Test address: http://game.feiliu.com/zk/ysg/main/index.html
Start building with 50+ products and up to 12 months usage for Elastic Compute Service
1 on 1 presale consultation
24/7 Technical Support 6 Free Tickets per Quarter Faster Response
Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.
A comprehensive suite of global cloud computing services to power your business
Payment Methods We Support
