根据不同电脑比例调节页面样式

最新推荐文章于 2024-04-27 10:16:11 发布

大毛裤儿

最新推荐文章于 2024-04-27 10:16:11 发布

阅读量165

点赞数

文章标签： vue.js ui javascript

本文链接：https://blog.youkuaiyun.com/m0_60206780/article/details/123915785

版权

这篇博客讨论了如何根据屏幕尺寸使用CSS媒体查询调整.contentbox的样式，以适应不同分辨率的设备。同时，介绍了通过JavaScript监听时间选择器(timeValue)的变化，动态改变选择器宽度，确保在不同屏幕宽度下提供良好的用户体验。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

css样式

// 大于1537
  @media screen and (min-width:1537px){
    /deep/.contentbox{
      margin-top: 15px;
      width:100%;
      height: 600px;
      max-height:calc(100% - 150px);
      overflow-y: auto;
      white-space:normal;
      word-break:break-all;
      word-wrap:break-word;
    }
  }
  // 大于1366小于1536
  @media screen and (min-width:1367px) and (max-width: 1536px){
    /deep/.contentbox{
      margin-top: 15px;
      width:100%;
      height: 450px;
      max-height:calc(100% - 150px);
      overflow-y: auto;
      white-space:normal;
      word-break:break-all;
      word-wrap:break-word;
    }
  }
  // 小于1366
  @media screen and (max-width:1366px){
    /deep/.contentbox{
      margin-top: 15px;
      width:100%;
      height: 300px;
      max-height:calc(100% - 150px);
      overflow-y: auto;
      white-space:normal;
      word-break:break-all;
      word-wrap:break-word;
    }
  }

根据页面某个值变化改变样式
html内容

<el-row>
  <el-col :span="24">
    <el-form-item label="发布时间" label-width="100px">
      <el-date-picker
        v-model="timeValue"
        type="daterange"
        range-separator="~"
        start-placeholder="开始日期"
        value-format="yyyy-MM-dd"
        end-placeholder="结束日期"
        :class="is_width?'pickerclass1':'pickerclass2'"
        @change="handleDateChange">
      </el-date-picker>
    </el-form-item>
  </el-col>
</el-row>

js内容

watch: {
//监听时间是否有值
timeValue(item, index) {
  },
},
mounted () {
  //时间值变化样式
  if(this.timeValue == ''){
    this.is_width = false
  }else{
    this.is_width = true
  }
},

css内容

// 大于1537
@media screen and (min-width:1537px){
  /deep/.content .el-form-item__content .pickerclass2{
    width: 51%;
  }
}
// 大于1537
@media screen and (min-width:1537px){
  /deep/.content .el-form-item__content .pickerclass1{
    width: 60%;
  }
}
// 大于1366小于1536
@media screen and (min-width:1367px) and (max-width: 1536px){
  /deep/.content .el-form-item__content .pickerclass2{
    width: 50%;
  }
}
@media screen and (min-width:1367px) and (max-width: 1536px){
  /deep/.content .el-form-item__content .pickerclass1{
    width: 60%;
  }
}
// 小于1366
@media screen and (max-width:1366px){
  /deep/.content .el-form-item__content .pickerclass2{
    width: 48%;
  }
}
@media screen and (max-width:1366px){
  /deep/.content .el-form-item__content .pickerclass1{
    width: 60%;
  }
}