前端px转vw源码分享_MQ_pxvsqto-优快云博客

本文链接：https://blog.youkuaiyun.com/weixin_42588676/article/details/121604077

本文提供了一段JavaScript源码，用于将前端CSS中的像素(px)单位转换为视口宽度单位(vw)，以实现响应式布局。通过输入设计稿的宽度和高度，源码可以自动转换CSS代码中的px值为vw值。此外，还包含了一个简单的用户界面，允许用户输入源代码并进行转换，转换后的代码可以复制和清空。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

前端px转vw源码分享_MQ

1、源码

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>px转vw</title>
    <style>
        .container {
            text-align: center;
            color: #4c413c;
        }
        p{
            font-size: 18px;
            font-weight: 600;
        }

        button {
            width: 100px;
            font-size: 14px;
            padding: 3px;
            background-color: #68217A;
            color: #fff;
            font-weight: 800;
            margin: 10px;
        }
        #width,#height{
            width: 60px;
            line-height: 20px;
            border: 1px solid #999;
        }
    </style>
</head>

<body>
    <div class="container">
        <form>
            <div>
                <p>设计稿设置</p>
                <label>宽：<input type="text" value="375" id="width" />px</label>
                &nbsp;
                &nbsp;
                <label>高：<input type="text" value="667" id="height" />px</label><br>
                <button id="setUI">确&nbsp;定</button>
            </div>
            <div>
                <p>转换前源代码</p>
                <textarea autofocus name="origin_code" id="origin_code" cols="120" rows="20"></textarea><br />
                <button id="trans">转&nbsp;换</button>
                <button id="reset">清&nbsp;空</button>
                <br>
                <textarea name="code" id="code" cols="120" rows="20"></textarea><br />
                <button id="copy">复&nbsp;制</button>                
            </div>
        </form>
    </div>

    <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 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;
        }
        origin_code_input.onkeypress = function (e) {
            if (e.keyCode == 13) {
                var res = trans(origin_code_input.value);
                code_input.value = res;
            }
        }


        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>