<template>
<div>
<div class="header">
<ul class="header-content">
<li class="header-item">推荐</li>
<li class="header-item">新闻</li>
<li class="header-item">娱乐</li>
<li class="header-item">体育</li>
<li class="header-item">图片</li>
<li class="header-item">财经</li>
</ul>
</div>
<div class="banner-content">
<img class="banner" src="../assets/photo/shanghai.jpg">
<p class="banner-title">2017网易时尚跨界盛典</p>
</div>
</div>
</template>
<script>
// @ is an alias to /src
import HelloWorld from "@/components/HelloWorld.vue";
export default {
name: "home",
components: {
HelloWorld
},
mounted() {
//获取屏幕宽度(viewport)
let htmlWidth =
window.innerWidth ||
document.documentElement.clientWidth ||
document.body.clientWidth;
//获取html的dom
let htmlDom = document.getElementsByTagName("html")[0];
//设置html的fontsize
htmlDom.style.fontSize = htmlWidth / 10 + "px";
//屏幕变化时html字体变化
window.addEventListener("resize", e => {
let htmlWidth =
window.innerWidth ||
document.documentElement.clientWidth ||
document.body.clientWidth;
htmlDom.style.fontSize = htmlWidth / 10 + "px";
});
}
};
</script>
<style lang="scss" scoped>
@function px2rem($px) {
$rem: 37.5px;
@return ($px/$rem) + rem;
}
.header {
height: px2rem(40px);
width: 100%;
background: red;
padding-left: px2rem(23px);
.header-item {
float: left;
color: #ffcdce;
font-size: px2rem(16px);
margin-right: px2rem(20px);
line-height: px2rem(40px);
&:nth-child(2) {
color: #fff;
font-size: px2rem(17px);
}
}
}
.banner-content {
position: relative;
.banner {
display: block;
width: 100%;
height: px2rem(190px);
}
.banner-title {
position: absolute;
left: px2rem(15px);
bottom: px2rem(15px);
font-style: px2rem(19px);
color: #fff;
}
}
</style>
导航栏字体和图片根据手机屏幕大小而变化【案例】
猜你喜欢
转载自blog.csdn.net/weixin_43837268/article/details/86158414
今日推荐
周排行