vue项目中页面响应式布局设计方案
针对全屏页面开发,兼容 19201080,以及 1366768js设置原型属性$screen: 获取当前是什么屏幕isS: 1366定义的最小屏幕isM: 1366-1600的中间屏幕isB: 1600以上的大屏在主文件app.vue中设置:let _w = window.innerWidth,_h = window.innerHeight,isS = fals...
·
针对全屏页面开发,兼容 19201080,以及 1366768
- js设置原型属性$screen: 获取当前是什么屏幕
isS: 1366定义的最小屏幕
isM: 1366-1600的中间屏幕
isB: 1600以上的大屏
在主文件app.vue中设置:
let _w = window.innerWidth,
_h = window.innerHeight,
isS = false,
isM = false,
isB = false
if(_w <= 1366) {
isS = true
}else if(_w >1366 &&_w <=1600){
isM = true
}else{
isB = true
}
Vue.prototype.$screen = { isS, isM, isB}
在其他页面使用
this.$screen
- css media公共方法: calcmedia
参数: @type: 属性类型 对应着 height,width 的简称
@big: 1601-1920设置的值,
@mdidle: 1367-1600设置的值,如果不传或者传值为0 则取big的值
@small: 小于1366设置的值,如果不传或者传值为0 则取middle的值
less:
// 媒体查询 方法
.calcmedia(@type, @big, @mdidle:0, @small: 0) {
@media (max-width: 1366px) {
@value:if((@small<=0), @big, @small);
.setMedia(@type, @value)
}
@media (min-width: 1367px) and (max-width: 1600px) {
@value:if((@mdidle<=0), @big, @mdidle);
.setMedia(@type, @value)
}
@media (min-width: 1601px) and (max-width: 1920px) {
.setMedia(@type, @big)
}
}
.setMedia(@type, @value) when (@type="h"){
height: @value
}
.setMedia(@type, @value) when (@type="w"){
width: @value
}
.setMedia(@type, @value) when (@type="p"){
padding: @value
}
.setMedia(@type, @value) when (@type="fz"){
font-size: @value
}
.setMedia(@type, @value) when (@type="b"){
bottom: @value
}
.setMedia(@type, @value) when (@type="lh"){
line-height: @value
}
更多推荐
已为社区贡献7条内容
所有评论(0)