CSS媒介查询：超小型设备（电话，600px 及以下）

最新推荐文章于 2024-05-03 22:21:39 发布

南下狩猎的小花猫

最新推荐文章于 2024-05-03 22:21:39 发布

阅读量43

点赞数

文章标签： css 前端 media

本文链接：https://blog.csdn.net/hsj0170/article/details/134879692

版权

/* CSS媒介查询：超小型设备（电话，600px 及以下） */
@media only screen and (min-width:0px) and (max-width: 300px) {
 .chattitle{
      width: 88vw !important;
      position: fixed !important;
      top: 0 !important; 
      left: 4% !important; 
      margin-top: 10px !important; 
  }
 /deep/ .chatPage{width: 93vw !important;
    position: fixed !important;
    height: 87vh !important; 
    left: 4% !important; 
    top: 50px !important;  }
 /deep/ .chatPage .taleBox .wrapper{
    width: 93vw !important;
  }
}

@media only screen  and (min-width:300.1px) and (max-width: 400px) {
 .chattitle{
      width: 88vw !important;
      position: fixed !important;
      top: 0 !important; 
      left: 3% !important; 
      margin-top: 10px !important; 
  }
 /deep/ .chatPage{width: 93vw !important;
    position: fixed !important;
    height: 87vh !important; 
    left: 3% !important; 
    top: 50px !important;  }
 /deep/ .chatPage .taleBox .wrapper{
    width: 93vw !important;
  }
}

@media only screen and (min-width:400.1px) and (max-width: 500px) {
 .chattitle{
      width: 88vw !important;
      position: fixed !important;
      top: 0 !important; 
      left: 2% !important; 
      margin-top: 10px !important; 
  }
 /deep/ .chatPage{width: 93vw !important;
    position: fixed !important;
    height: 87vh !important; 
    left: 2% !important; 
    top: 50px !important;  }
 /deep/ .chatPage .taleBox .wrapper{
    width: 93vw !important;
  }
}

@media only screen and (min-width:500.1px) and (max-width: 599px) {
 .chattitle{
      width: 88vw !important;
      position: fixed !important;
      top: 0 !important; 
      left: 1% !important; 
      margin-top: 10px !important; 
  }
 /deep/ .chatPage{width: 93vw !important;
    position: fixed !important;
    height: 87vh !important; 
    left: 1% !important; 
    top: 50px !important;  }
 /deep/ .chatPage .taleBox .wrapper{
    width: 93vw !important;
  }
}