Question

www.bestdealadvisors.com上的聊天窗口小部件在桌面上运行良好，但在移动设备上运行不佳。例如，在iPhone上只显示了一半的小部件，并且无法折叠。有人能告诉我在移动设备上正确显示小部件所需的css吗？

Answer 1

您应该使用媒体查询来获得最佳结果。

聊天小部件有以下元素：

<div class="chatcontainer">

具有以下CSS样式：

.chatcontainer {
    display: inline-block;
    width: 400px;
    position: fixed;
    left: 65%;
    bottom: 0;
}

此处的left属性会导致移动设备出现问题。使用媒体查询，您可以在某些分辨率下覆盖此属性：例如，您可以编写媒体查询来更改它，如下所示：768px：

.chatcontainer {
    display: inline-block;
    width: 400px;
    position: fixed;
    left: 65%;
    bottom: 0;
    @media (max-width: 768px) {
        left: 10%;
        right: 10%;
    }   
}

Bootstrap的主要概念是，虽然可以在网络平台上的一行中放置一些小部件，但每个小部件在移动设备上占据一整行。因此，聊天窗口小部件应占据整行，而不会将其浮动到右侧。

为了获得更好的用户体验，首先应隐藏聊天窗口小部件，您可以在右下方放置一个扁平的圆形按钮来打开窗口小部件。

Answer 2

您可以使用bootstrap。它提供自动形状。你只需指定费率。它将字段分为12个。例如.col-sm-4的意思是div具有4/12比率的根标记＆s / field＆＃39; s。

手机上的Bootstrap聊天小部件

2 个答案: