前言:
pc端兼容的方式有很多,比如%,比如vw+vh等等,这里说说vw兼容方法,
移动端适配方式也有很多,比如%,em,rem,vw,vh等,这里说说vw兼容方法,
pc端:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>自动转换</title>
</head>
<body>
<input id="user_width" type="text" placeholder="请输入"/>px
<button onclick="change()">转换</button>
<span id="vw_text"></span>
</body>
</html>
<script>
function change(){
let widthVal = Number(document.getElementById('user_width').value);
let nowVW = widthVal/(1920/100);
var reg=/^\d+[.]?\d{1,3}$/;
console.log(widthVal+'=='+nowVW+'vw');
document.getElementById('vw_text').innerText = '转换结果: '+nowVW+'vw';
}
</script>
移动端:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>自动转换</title>
</head>
<body>
<input id="user_width" type="text" placeholder="请输入"/>px
<button onclick="change()">转换</button>
<span id="vw_text"></span>
</body>
</html>
<script>
function change(){
let widthVal = Number(document.getElementById('user_width').value);
let nowVW = widthVal/(750/100);
var reg=/^\d+[.]?\d{1,3}$/;
console.log(widthVal+'=='+nowVW+'vw');
document.getElementById('vw_text').innerText = '转换结果: '+nowVW+'vw';
}
</script>