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

H5移动端适配px转vw工具

猜你喜欢