css列表滑动防止被底部遮住和适配屏幕长一点的机型处理

针对“css列表滑动防止被底部遮住和适配屏幕长一点的机型处理”，我为您提供以下完整攻略：

1. 让列表滑动不被底部遮住

当列表在移动端中央时，如果连续滑动到底部，可能会出现列表底部被底部导航栏遮挡的情况，为了解决这个问题，我们需要使用CSS中的position属性和bottom属性。

具体步骤如下：

1. 给列表容器添加position: relative;属性，使其成为相对定位
2. 给底部导航栏添加position: fixed; bottom: 0;属性，将其固定在底部
3. 修改列表容器的bottom属性为底部导航栏高度，使列表在滑动时不被底部导航栏所遮挡

代码示例：

.list-container {
  position: relative;
  /* 列表底部距离底部导航栏高度 */
  bottom: 56px;
}
.bottom-nav {
  position: fixed;
  bottom: 0;
  /* 底部导航栏高度 */
  height: 56px;
}

2. 适配屏幕长一点的机型

在移动端，不同机型的屏幕分辨率大小和长宽比会不同，如果不进行适配，可能导致页面在某些机型上出现错乱甚至无法正常显示的情况。

为了解决这个问题，我们可以使用CSS媒体查询和vw单位实现适配。

具体步骤如下：

1. 使用@media查询，根据不同屏幕分辨率范围设置不同的样式
2. 将设计稿分为相应比例的网格，使用vw单位设置元素的尺寸和间距

代码示例：

/* 针对屏幕宽度在360px以下的手机 */
@media screen and (max-width: 360px) {
  .list-item {
    width: 100%;
    height: 72vw;
    margin-bottom: 8px;
  }
}

/* 针对屏幕宽度在百分之五十到百分之九十之间的手机 */
@media screen and (min-width: 360px) and (max-width: 720px) {
  .list-item {
    width: 48vw;
    height: 32vw;
    margin-right: 4vw;
  }
}

以上就是完整的攻略，希望对您有所帮助。