SOURCE

<h3> ☞ 前端开发辅助工具</h3>
<hr/>
<div id="app">
    <form id="form1" v-on:submit.prevent="submit">
        <div>
            <label>页宽：</label><input type="number" v-bind:placeholder="'默认' + sceenW + 'px'" name="sceen_w" value="" min="1" v-model="sceen_w" />
            &nbsp;&nbsp;
            <label>页内宽：</label><input type="number" v-bind:placeholder="'默认' + sceenW + 'px'" name="w" value="" min="1" v-bind:max="sceen_w" v-model="w" />
            &nbsp;&nbsp;
            <label>字体大小：</label><input type="number" name="font" value="" min="1" v-bind:max="font_size_max" v-model="font_size_def" />
            &nbsp;&nbsp;
            <label>页内字体大小：</label><input type="number" name="font" value="" min="1" v-bind:max="font_size_max" v-model="font_size" />
            <input type="submit" />
            <a href="tencent://message/?uin=328595716&Site=&Menu=yes" title="328595716">联系作者QQ</a> 
        </div>
        <div>
            
        </div>
        <div>
            
        </div>
    </form>
    <div>
        <div class="box" v-bind:style="{ width: sceen_w + 'px' }">
            <div class="cursor" v-bind:style="{ width: w + 'px', fontSize: font_size + 'px' }" id="pre">{{w}}px</div>
            <div v-bind:style="{ fontSize: font_size_def + 'px' }">{{sceen_w}}px</div>
        </div>
        <div class="box" style="width: 100%;margin-top: 20px;">
            <div class="cursor" v-bind:style="{ width: vw + 'vw', fontSize: font_size_vw + 'vw' }" id="show">
                <div v-bind:style="vwStyle">{{w}}px ~= {{vw}}vw <br/> {{font_size}}/{{font_size_def}} px ~= {{vwStyle.fontSize}}</div>
            </div>
            <div v-bind:style="{ fontSize: font_size_def + 'px' }">100vw</div>
        </div>
    </div>
</div>
<script>
var app = new Vue({
    el: '#app'
    , data: {
        sceenW: 750
        , sceen_w: 750
        , vw: 100
        , w: 750
        , font_size_max: 100
        , font_size: 24
        , font_size_def: 24
        , font_size_vw: 3.20
        , vwStyle: {
            fontSize: '1em'
        }
    }
    , methods: {
        submit: function () {
            let sceenW = this.sceen_w;
            let a = this.w;
            if (a) { a = parseInt(a); } else { a = sceenW; }

            let vw = (100 * a / sceenW).toFixed(2);
            let fontS = (this.font_size * 1 / this.font_size_def).toFixed(2);
            this.w = a;
            this.vw = vw;
            this.vwStyle.fontSize = fontS + 'em';
            this.font_size_vw = (this.font_size_def / this.sceen_w * 100).toFixed(2);
        }
    }
    , watch: {
        sceen_w: function (val) {
            if (val) { } else {
                val = this.sceenW;
                this.sceen_w = val;
            }
            if (val < this.w) this.w = val;
            this.submit();
        }
        ,w: function (val) {
            if (val) { } else {
                val = this.sceen_w;
                this.w = val;
            }
            this.submit();
        }
        , font_size: function (val) {
            this.submit();
        }
        , font_size_def: function (val) {
            this.submit();
        }
    }
});
</script>

html, body {
    margin: 0;
}
.box, .box .cursor {
    box-sizing: border-box;
}
.box {
    border: 1px dotted black;
    min-height: 300px;
    background-color: gray;
    color: white;
    text-align: center;
}
.box .cursor {
    border: 1px solid orange;
    min-height: 150px;
    vertical-align: middle;
    background-color: white;
    color: black;
}
.box #show.cursor {
    border-color: blue;
    background-color: dodgerblue;
    opacity: 0.6;
    color: white;
    font-size: 1.3rem;
    padding-top: 10px;
}
input[type=number] {
    width: 100px;
}
form>div {
    padding: 10px;
}