最近做官網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