Disclaimer: This article is a blogger original article, follow the CC 4.0 BY-SA copyright agreement, reproduced, please attach the original source link and this statement.
This link: https://blog.csdn.net/weixin_43606158/article/details/89300534
The front page display problems when moving side development will certainly be faced with different types of mobile phones, today introduced another way to adaptive different mobile terminals, use vw, vh units.
vw and vh unit size is how much?
vw and vh is the height and the width of the apparatus to determine a width of the device is that 100vh, high 100vw, equipment
50vw device is equivalent to 50% of the width you set, you set the height of the apparatus is equivalent 100vh 100 %.
Remember: Do not confuse vw and vh, if you set the width to the element 100vh, then basically (the device width less than the high case) will exceed your screen X-axis scroll bar appears. If you give an element height settings 100vw, then you can not meet you want to put this element covered the entire height of the device ambition.
In general the width of the author, and size of font, spacing, margins about vw units are used,
the height, the line height, the upper and lower margins are used vh spacing units.
Test for example:
look at iPhone5 / SE of:
In iPhone6 / 7 / 8plus effect:
Effect because the device does not become large or small pattern caused by accident, it is highly recommended that you use!
I do this with a simple html vw, vh converter, for everyone to share.
code show as below:
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>换算器</title> </head> <body> <div> 设计稿宽度：<input type="text" id="gao-width" value="1920">px<br> 设计稿高度：<input type="text" id="gao-height" value="1080">px<br> <hr> <hr> 量出的宽度：<input type="text" id="width" value="1">px<br> 量出的高度：<input type="text" id="height" value="1">px<br> <button id="button">换算</button><br> 结果宽度：<span class="result-w"></span> vw <br> 结果高度：<span class="result-h"></span> vh </div> <script type="text/javascript"> let result1; let result2; let button1 = document.getElementById("button"); button1.onclick = function(){ let measureTheWidth = document.getElementById("width").value, measureTheHeight = document.getElementById("height").value, draftWidth = document.getElementById("gao-width").value, draftHeight = document.getElementById("gao-height").value; result1 = (100/Number(draftWidth)*Number(measureTheWidth)).toFixed(2); result2 = (100/Number(draftHeight)*Number(measureTheHeight)).toFixed(2); document.getElementsByClassName("result-w")[0].innerText=result1; document.getElementsByClassName ("result-h")[0].innerText=result2; console.log(result1,result2) }; </script> </body> </html>
I did not go to the calculator-style tune with the style a little older friends had to own altered, and apologies to the ~
calculator style as follows:
Usage:
1. PS design into the inside view of the entire picture width and height, respectively, issued on designing the width and height among the design draft. (Note that the unit is px oh)
2. Then measure out where you want the amount, width and height were placed to measure out the width and height measure out of them. (Note or px units oh)
3. Then click on the convert button, you can convert it to the width and height to the size of your code to place them oh. (Note that vw and vh units oh)
Note:
If you just want the width or height of the unit can not control another Oh, but do not get strung on the line, oh ~
Or use the second method:
to npmjs download px2rem to your project then conducted using