H5移動端適配px轉vw工具
阿新 • • 發佈：2020-07-23
最近做官網H5的開發，開發之前首先想到的是移動端的適配問題。目前比較流行的有rem和vw，我選擇了vw，但是設計稿的單位是px，轉化成vw，要有很多的計算，不方便，所以就想著先按設計稿把介面寫出來，然後一次性把單位換算過來。首先想到的是用webpack外掛處理，但是自己需要配置環境，所以就想著自己製作這樣一個類似的外掛了。先看一下效果吧
先設定好設計稿的寬，然後直接把用px寫的css檔案內容全選複製，貼上過來，按回車或者點選轉換即可全部轉換成vw，再回去貼上覆蓋原來的程式碼就可以了。使用起來真的是方便。
再附上原始碼，複製過去直接用吧
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width,height=device-height,inital-scale=1.0,maximum-scale=1.0,user-scalable=no;"> <meta http-equiv="X-UA-Compatible" content="ie=edge"> <title>程式碼計算器</title> <style> </style> </head> <body> <form> <fieldset> <legend>設計稿設定</legend> <label>寬：<input type="text" value="375" id="width" /></label><br /> <label>高：<input type="text"value="667" id="height" /></label><br /> <button id="setUI">確定</button> </fieldset> <fieldset> <legend>原始碼</legend> <textarea autofocus name="origin_code" id="origin_code" cols="100" rows="10"></textarea><br /> <button id="trans">轉換</button> <label><input type="checkbox" checked id="autoCopy" />自動複製</label> </fieldset> <fieldset> <legend>轉換後代碼</legend> <textarea name="code" id="code" cols="100" rows="10"></textarea><br /> <button id="copy">複製</button> <button id="reset">清空</button> </fieldset> </form> <script> function getId(id){ return document.getElementById(id); } function getName(name){ return document.getElementsByName(name)[0]; } var widthIpt = getId("width"); var heightIpt = getId("height"); var setUIBtn = getId("setUI"); var origin_code_input = getName("origin_code"); var transBtn = getId("trans"); var autoCopyInput = getId("autoCopy"); var code_input = getName("code"); var copyBtn = getId("copy"); var reset = getId("reset"); var width,height; function setUI(){ width = +widthIpt.value; height = +heightIpt.value; } setUI(); setUIBtn.onclick = function(e){ e.preventDefault(); setUI(); } function copy(text) { var textareaEl = document.createElement('textarea'); textareaEl.setAttribute('readonly', 'readonly'); // 防止手機上彈出軟鍵盤 // input.setAttribute('value', text); textareaEl.value = text; document.body.appendChild(textareaEl); // input.setSelectionRange(0, 9999); textareaEl.select(); var res = document.execCommand('copy'); document.body.removeChild(textareaEl); console.log("複製成功"); return res; } function trans(originCode){ console.log(originCode); var code; var reg = /(\d+(\.\d+)?)px/gi; code = originCode.replace(reg, function(px,num){ // 100vw = width px -> 1px = 100vw/width // console.log(px, num); return (num * 100 / width).toFixed(3) + "vw"; }); return code; } transBtn.onclick = function(e){ e.preventDefault(); var res = trans(origin_code_input.value); code_input.value = res; if(autoCopy){ copyAndReset(res); } } origin_code_input.onkeypress = function (e){ if(e.keyCode == 13){ var res = trans(origin_code_input.value); code_input.value = res; console.log(autoCopy); if(autoCopy){ copyAndReset(res); } } } var autoCopy = autoCopyInput.checked; autoCopyInput.onchange = function (e){ autoCopy = autoCopyInput.checked; } function copyAndReset(code){ copy(code); origin_code_input.value = ""; } copyBtn.onclick = function(e){ e.preventDefault(); copyAndReset(code_input.value); } reset.onclick = function (e){ e.preventDefault(); code_input.value = ""; origin_code_input.value = ""; } </script> </body> </html>
下面分析一下轉化思路
首先要知道 螢幕的寬度是100vw，設計稿的寬度假設是width， 即：100vw = width px; 根據數學中的比例推匯出 1px = 100vw / width; 那麼n px = n * 100 vw / width;
然後全部替換的思路是用字串的替換，全域性找出px，然後將n px替換成 m vw；
為了提高操作效率，我這裡加入了自動複製，即點選複製（或者按Enter鍵）之後，自動將轉換後的程式碼放到貼上板中。為了方便下次貼上，有將原始碼清空了，下次還是直接貼上，回車，再粘回去。
js實現複製內容不懂的可以參考一下這篇部落格https://www.cnblogs.com/zhaodesheng/p/11464934.html