H5移动端适配之px转vw（附工具）
最近做官网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
