- it
- H5中的HTML引入VANT框架开发
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<title>Title
</title>
<link
rel="stylesheet"
href="https://cdn.suoluomei.com/common/js2.0/npm/vant@2.2/lib/index.css"
/>
<script src="https://cdn.suoluomei.com/common/js/jquery-2.1.4.min.js"></script>
<script src="https://cdn.suoluomei.com/common/js2.0/vue/v2.5.16/vue.js"></script>
<script src="https://cdn.suoluomei.com/common/js2.0/npm/vant@2.2/lib/vant.min.js"></script>
<meta
name="viewport"
content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no"
/>
</head>
<style>
.xaaccvv {
width: 7.5rem;
height: 1rem;
background-color: red;
}
</style>
<body>
<div id="Vue">
<div>
<van-tabs v-model="active">
<van-tab title="标签 1">
<div class="xaaccvv"></div>
</van-tab>
<van-tab title="标签 2">内容 2
</van-tab>
<van-tab title="标签 3">内容 3
</van-tab>
<van-tab title="标签 4">内容 4
</van-tab>
</van-tabs>
</div>
</div>
</body>
<script>
new Vue({
el: "#Vue",
data: {
active: 0,
},
methods: {},
created() {
(function (win, doc) {
if (!win.addEventListener) return;
var html = document.documentElement;
function setFont() {
var cliWidth = html.clientWidth;
if (cliWidth > 750) {
cliWidth = 750;
}
html.style.fontSize = 100 * (cliWidth / 750) + "px";
}
win.addEventListener("resize", setFont, false);
doc.addEventListener("DOMContentLoaded", setFont, false);
})(window, document);
},
});
</script>
</html>
