During the development of front-end mobile terminal, we will definitely face the problem of page display of different types of mobile phones. Today, we will introduce another method to adapt to different mobile terminals, using VW and VH units.
What are the sizes of vw and VH units?
Vw and VH are determined according to the width and height of the equipment. The width of the equipment is 100VW, and the height of the equipment is 100Vh. The 50VW you set is 50% of the width of the equipment, and the 100Vh you set is 100% of the height of the equipment. Remember: don’t confuse VW with VH, if you set the element width to 100vh, it will basically scroll off the X-axis of your screen. If you set the element height to 100VW, it will not satisfy your desire to spread the element across the entire device height. In general, the author width, font size, left and right margins are all in VW units, while height, line height, top and bottom margins are all in VH units.
Try the following example:
Under iPhone5/SE:
The effect does not change as the device becomes larger or smaller, so it is highly recommended!
The author here made a simple VW, VH converter with HTML, to share with you. The code is as follows:
<! DOCTYPEhtml>
<html>
<head>
<meta charset="utf-8">
<title>converter</title>
</head>
<body>
<div>Viewable area width:<input type="text" id="gao-width" value="1920">px<br>Visibility height:<input type="text" id="gao-height" value="1080">px<br>
<hr>
<hr>Measured width:<input type="text" id="width" value="1">px<br>Measured height:<input type="text" id="height" value="1">px<br>
<button id="button">conversion</button><br>Result width:<span class="result-w"></span> vw
<br>Result height:<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>
Copy the codeThe style of the calculator I did not go to adjust, have style clean friends have to change their own change, sorry ~ calculator style is as follows:
Due to the previous fans of the design draft width and height misunderstanding. Please e forgive me for not changing the width and height of the visible area. Please post a comment if you have a problem
The general mobile layout can be divided into three parts, head -> body ->tabbar feet. So we can set the outer layer of the project like this:
.body {
width: 100%;
height: 100%;
display: flex;
flex-direction: column;
}
/* The header */
header {
height: 10vh; /* Fixed height, adjust according to your design */
}
/* 主体部分 */
main {
flex: 1; /* occupy the rest of the page */
}
/* Tabbar foot */
footer {
height: 10vh; /* Fixed height, adjust according to your design */
}
Copy the codeMake the font size in the project adaptive:
html {
font-size: 16px;
}
@media screen and (min-width: 375px) {
html {
/* iPhone6 375px as 16px benchmark, 414px exactly 18px, 600 20px */
font-size: calc(100% + 2 * (100vw - 375px) / 39);
font-size: calc(16px + 2 * (100vw - 375px) / 39); }}@media screen and (min-width: 414px) {
html {
/* 414px-1000px Add 1px(18px-22px) */ for every 100 pixels wide
font-size: calc(112.5% + 4 * (100vw - 414px) / 586);
font-size: calc(18px + 4 * (100vw - 414px) / 586); }}@media screen and (min-width: 600px) {
html {
/* 600px-1000px add 1px(20px-24px) */ for every 100 pixels wide
font-size: calc(125% + 4 * (100vw - 600px) / 400);
font-size: calc(20px + 4 * (100vw - 600px) / 400); }}@media screen and (min-width: 1000px) {
html {
/* 1000px increments 0.5 pixels per 100 pixels */
font-size: calc(137.5% + 6 * (100vw - 1000px) / 1000);
font-size: calc(22px + 6 * (100vw - 1000px) / 1000); }}Copy the codeOr use another method:
Link: www.npmjs.com/package/px2…
www.npmjs.com/package/px2…
Github.com/geeknull/re…
Github.com/amfe/lib-fl…
I wish you a happy ~ if you feel that you can also use or the author wrote a good trouble to pay attention to! Xiaobian will continue to work hard!