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实现复制内容不懂的可以参考一下这篇博客