个⼈技术博客——vue的响应式布局
技术描述
这个技术⽤来⼲嘛？
响应式布局⽤于使页⾯在不同的设备上都能有⼀个正常的样式显⽰，⽀持⽤户不同显⽰规格的设备上访问页⾯且仍有良好体验。
为什么要学这个？
随着移动端的普及，现在的页⾯最基础也需要达到PC端和⼿机端的样式能够让⼈在接受的程度。如果⽤户⼿机打开页⾯整个样式崩溃
了，那他也没有理由继续选⽤你的应⽤了。
技术难点在哪？
页⾯的CSS不能再写死了，要使⽤百分⽐，或者直接使⽤flex弹性布局（我⾃⼰采⽤了这种⽅式）
要多写好多类的样式，搞清楚类的包含关系，这⾥我推荐可以简单学⼀下CSS的预处理语⾔包括.less和.
sass，这样写CSS的嵌套关系、参数关系都会更加清楚
技术详述
背景以及环境html的flex布局
当前使⽤⽅法仅限于vue项⽬开发时使⽤（由于vue要求使⽤webpack所以下⾯不再赘述）
当前⽅法是vueCLI4.0版本下使⽤，vue没有保证完全向前兼容，但是基础的⽅法应该不会改变。
当前⽅法写CSS的时候使⽤了.less的预处理语⾔，如果查看代码有困难画3-5分钟熟悉⼀下预处理语⾔即可看懂。
当前⽅法使⽤vuex本地化保存窗⼝⼤⼩，如果你想使⽤localstorage保存原理是类似的。
当前⽅法使⽤了v-bind的绑定样式逻辑编写，如果还有其他实现⽅法欢迎讨论。
流程图
1.基础类的CSS样式
<div>
<div :class="personInfoClass">
<div class="Avatar">
<el-avatar
:size="180"
:src="avatarUrl">
</el-avatar>
</div>
……………………
这⾥只展⽰⼀个基础的div。此处将外围DIV的class通过v-bind 动态绑定了⼀个personInfoClass的类名。此处建议将personInforClass作为computed属性配置，否则每次都重新判断会导致页⾯效率降低。
computed:{
personInfoClass(){
if(this.windowWidth > 500) {
return "PersonInfo"
} else {
return "mobile_person_info_content"
}
},
}
这⾥可以看到配置的personInfoClass的类会返回两种情况，⼀种是在窗⼝⼤于500px的时候返回PersonInfo类，⼀种是在窗⼝⼩于500px的时候调⽤我们移动端的类。那么显然的，在⼀般情况下都会调⽤PersonInfo类，所以我们在vue对应组件内使⽤局部性CSS写好这部分基础类的样式
<style lang="less" scoped>
@import "~@/CSS/Common.less";
.PersonInfo {
.setSize(925px, 230px);
padding: 20px 20px;
background-color: white;
display: flex;
justify-content: right;
.Avatar {
display: flex;
flex-direction: column;
justify-content: center;
}
.UserName {
display: flex;
font-size: 32px;
}
}
}
这样项⽬就保证了这个div在窗⼝>500px的时候使⽤该类的样式。
2.编写其他情况的CSS样式
那么另⼀个移动端的CSS样式写在哪⾥呢？
我们新建⼀个CSS⽂件下存放我们的mobile状态的CSS，命名为mobile.less（我这⾥还有⼩窗的样式，所以还有smallWIndow.less)
我们刚才命名的⼩窗下的类名为mobile_person_info_content，所以我们这⾥直接写⼀个对应的类样式
.mobile_person_info_content {
width: calc(100% - 20px);
margin: 20px auto;
background-color: white;
display: flex;
flex-direction: column;
justify-content: center;
.Avatar{
display: flex;
justify-content: center;
flex-direction: row;
}
.UserName {
display: flex;
justify-content: center;
flex-direction: row;
font-size: 32px;
}
}
在你的需要引⽤的地⽅引⼊这个.less⽂件即可，我这⾥由于整个程序都需要适应配置，所以全局引⼊在了最顶端的根组件CSS内。当然既然是全局引⼊，这⾥不需要加scoped限定范围。
<style lang="less">
@import "~@/CSS/mobile.less";
@import "~@/CSS/smallWindow.less";
#app {
font-family: Avenir, Helvetica, Arial, sans-serif;
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
text-align: center;
}
}
这样在全局范围内的vue就可以使⽤我们在这两个⽂件内写的类样式了。
3.监控窗⼝⼤⼩
当我们完成了类的配置之后，我们需要监控窗⼝⼤⼩，让computed属性中的类可以进⾏切换，来使得div的绑定类切换，进⽽通过改变类的样式实现不同情况下的样式显⽰。
⾸先在vuex中增加窗⼝⼤⼩的state。（关于vuex的引⼊和属性的操作不做说明了）
const state = {
screenWidth:document.documentElement.clientWidth, //屏幕宽度
screenHeight:document.documentElement.clientHeight, //屏幕⾼度
}
与上⾯类似的，如果需要局部引⼊则在对应的组件内使⽤下述⽅法即可，如果要全局引⼊，按部就班就⾏。
在最顶层的根组件下使⽤mounted⽣命周期函数，⽤dom原⽣的size监听窗⼝的⼤⼩变化。（为什么全局只在根组件引⼊呢？因为整个程序周期中只允许⼀个size监听，此外多余的都是没有反应的，所以如果你在多个组件重复引⼊size是没有作⽤的，只能通过根⽬录的监听使得整个项⽬都能监听到窗⼝⼤⼩）
mounted() {
let that = this;
that.$store.state.screenWidth = document.documentElement.clientWidth; //窗⼝宽度
that.$store.state.screenHeight = document.documentElement.clientHeight; //窗⼝⾼度
}
}
随后的，就需要监听这个vuex⾥的窗⼝⼤⼩参数了，在需要的组件内使⽤watch函数监听参数，⽐如我这⾥就是刚才的div组件中。这⾥的windowWidth已经定义在data中，这⾥不做演⽰了
watch: {
'$store.state.screenWidth': function (val) { //监听屏幕宽度变化
this.windowWidth = val;
}
},
可能会遇到的问题
1. 窗⼝⼀打开样式不正确
可能是因为你在data中的windowWidth没有赋初值，需要在窗⼝建⽴的时候就让它获得初始的窗⼝⼤⼩数值，否则⽆法进⼊判断循环。
data() {
return {
windowWidth:document.documentElement.clientWidth
}
}
2. 切换时只有⼀部分样式切换了，另⼀部分样式没有切换
要注意你的样式的嵌套，有可能切换的时候只有被嵌套包含的部分完成了切换，⽽在嵌套外的没有完成。
.mobile_person_info_content {
width: calc(100% - 20px);
margin: 20px auto;
background-color: white;
display: flex;
flex-direction: column;
justify-content: center;
.Avatar{
display: flex;
justify-content: center;
flex-direction: row;
}
}
.UserName {
display: flex;
justify-content: center;
flex-direction: row;
font-size: 32px;
}
⽐如上⽂的样式如果写成这样。则.UserName的类的样式是不会改变的，因为优先级的原因，vue会优先使⽤局部的同名CSS样式。类似的，如果你还有其他的全局.CSS样式，你也需要保证把所有要修改样式的类都嵌套进去。否则全局的样式也会被局部的同名CSS样式覆盖。
3.样式完全没有改变
不要⽤严格的属性⽐如px来限定窗⼝，使⽤百分⽐属性或者相对属性来进⾏样式编写。尽量使⽤flex的弹性布局，它本⾝就包含相对的布局。如果使⽤了px来进⾏限定也不要影响到相对的布局。
总结
最终响应式配置的逻辑链就形成了，根组件事实监听窗⼝⼤⼩->将窗⼝⼤⼩保存在本地->组件监听本地的窗⼝⼤⼩数据变化->赋值给组件参数->组件参数变化，进⼊切换类的判断->根据判断决定返回的类名->通过类名在CSS中到对应的样式->样式改变。
参考博客
概述：简单介绍了⼀下如何显⽰样式的理论知识。
概述：实际操作了vue中监听窗⼝⼤⼩的⽅法，包括了局部引⼊和全局引⼊
概述：实现时提供了⼀个思路，按照v-if或者v-show控制，后续经过思考采取了绑定类的⽅式进⾏切换。

版权声明：本站内容均来自互联网，仅供演示用，请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系QQ:729038198，我们将在24小时内删除。