ヤッハロー、Kaiqisanすうう、一つふつうの学生プログラマである,学过响应式布局的一定知道页面的响应式设计都是通过css来实现的,但是在vue中,是否还可以通过编写css代码来实现呢?
回答: 可以,而且非常简单和方便
直接举例
配置
<meta name="viewport" content="width=device-width,initial-scale=1.0>
记得找html文件,检查一下有没有这句话(一般来说vue-cli打包之后这句话自然就生成了)
写入
<template>
<div class="main">
<button class="btn">点击发起请求</button>
<button class="btn">点击取消请求</button>
</div>
</template>
<script>
......(略)
</script>
<style lang="less" scoped>
.btn {
font-size: 20px;
padding: 12px 30px;
margin-top: 200px;
}
.main {
width: 100vw;
height: 100vh;
background-color: #dca8ff;
}
@media screen and (max-width: 1000px) {
.main {
width: 100vw;
height: 100vh;
background-color: #ff9769;
}
}
</style>
显示效果
总结
框架不会为难我们,大胆创作把!