需要CSS建议在我的项目上进行响应式网页设计？

Question

我正在为我的聊天应用程序编写UI，并需要一些有关响应式网页设计部分的建议（在技术方面）。直截了当地说，我有两个观点。桌面视图和移动视图。

桌面视图：

移动视图：

基本上，我希望好友列表在移动视图中消失。有什么建议？

Answer 1

一些可能的解决方案：

1. 媒体查询：如果您定位设备support it，这是一个很好的方法。
2. Bootstrap：它是CSS和JS解决方案，是Media Query的替代方案。
3. 测量百分比：这是一个适用于您的布局组件的CSS解决方案，您可以添加一些定制的JS来显示或隐藏部件。

Answer 2

Media Query

在所有移动设备上隐藏好友列表

@media only screen and (max-width: 529px) {
  .friends-list-container{
    display: none; 
  }
}

Answer 3

我建议您找到包装好友列表的元素，并使用display：none;使用Media查询在以某个分辨率打破时删除该元素。

将您的网页划分为可识别的细分可以让您更轻松。