當前位置：首頁 > 编程资源 > 编程问答 >内容正文

编程问答

一种移动端自适应屏幕的方法

發布時間：2023/12/2 编程问答 19 豆豆

生活随笔收集整理的這篇文章主要介紹了一种移动端自适应屏幕的方法小編覺得挺不錯的,現在分享給大家,幫大家做個參考.

前端移動端開發的時候肯定是會面對不同型號的手機的頁面展示問題的，今天給大家推出另外一種自適應不同移動端的方法，使用vw，vh單位。

vw和vh單位的大小是多少？

vw和vh是根據設備的寬度和高度來決定的，設備的寬就是100vw，設備的高就是100vh，
你設置的50vw就是相當于設備寬度的50%，你設置的100vh就是相當于設備高度的100%。
切記：不要把vw和vh弄混淆了，如果你給元素寬度設置100vh，那么基本上(設備的寬小于高的情況)就會超出你的屏幕X軸出現滾動條。如果你給元素高度設置100vw，那么就滿足不了你想要把這個元素鋪滿整個設備高度的愿望了。
一般情況下筆者寬度，和字體大小，左右邊距間距等都是用vw單位，
高度，行高，上下邊距間距等都是用vh單位。

試例如下：

在iPhone5/SE下的樣子：

在iPhone6/7/8plus下的效果：

效果并不會因為設備變大或者變小而導致樣式變亂，所以極力推薦大家使用！

筆者這里用html做了一個簡單的vw，vh換算器，分享給大家。
代碼如下：

<!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>

計算器的樣式筆者沒有去調，有樣式潔癖的朋友就只好自己改一改了，對不住了~
計算器樣式如下：

由于之前有粉絲對設計稿寬度和高度有誤解。。現改為可視區寬度和高度，下圖未改請原諒。。遇到問題請下發評論

使用方法：
1. 將設計圖放到PS里面，查看整個圖片的寬度和高度，分別放在設計稿寬度和設計稿高度當中。（注意是px單位哦）
2. 然后量出你想要量的地方，將寬度和高度分別放置到量出的寬度和量出的高度當中。（注意還是px單位哦）
3. 然后點擊換算按鈕，就可以將換算出來的寬度和高度大小放置到你的代碼當中了哦。（注意是vw和vh單位哦）
注意：
如果你只是要寬度或者高度單位可以不用管另外一個哦，但是千萬別弄串了就行哦~

一般移動端的布局可分為三個部分，頭部->主體->tabbar的腳部。
所以我們可以把項目的外層這樣設置一下：

.body {width: 100%;height: 100%;display: flex;flex-direction: column; } /* 頭部部分 */ header {height: 10vh; /* 固定的高度，根據你的設計圖調整 */ } /* 主體部分 */ main {flex: 1; /* 占據頁面剩余所有部分 */ } /* tabbar腳部部分 */ footer {height: 10vh; /* 固定的高度，根據你的設計圖調整 */ }

使項目中的字體大小自適應：

html {font-size: 16px; }@media screen and (min-width: 375px) {html {/* iPhone6的375px尺寸作為16px基準，414px正好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每100像素寬字體增加1px(18px-22px) */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每100像素寬字體增加1px(20px-24px) */font-size: calc(125% + 4 * (100vw - 600px) / 400);font-size: calc(20px + 4 * (100vw - 600px) / 400);} } @media screen and (min-width: 1000px) {html {/* 1000px往后是每100像素0.5px增加 */font-size: calc(137.5% + 6 * (100vw - 1000px) / 1000);font-size: calc(22px + 6 * (100vw - 1000px) / 1000);} }

或者使用其他的方法：

鏈接：
https://www.npmjs.com/package/px2rem

https://www.npmjs.com/package/px2rem-loader

https://github.com/geeknull/rem-moka

https://github.com/amfe/lib-flexible

祝君用的愉快~如果感覺用的還可以或者筆者寫的還不錯麻煩關注一下！小編還會繼續努力下去的！

原文：https://blog.csdn.net/weixin_43606158/article/details/89300534

這種方式確實比我用媒體查詢好點。

總結

以上是生活随笔為你收集整理的一种移动端自适应屏幕的方法的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。