Question

我在为聊天定位文本框时遇到了麻烦。我只能让它看起来很适合一个特定的分辨率。在其他屏幕尺寸上它看起来很糟糕。如何调整所有分辨率（> 1360px）的文本框位置以适合底部的小暗灰色区域。当我尝试将其调整为一个分辨率时，其他分辨率看起来不会很好。

https://jsfiddle.net/4pvfwz11/1/

<div class="chatdiv hidden-xs hidden-sm  col-lg-2 col-md-3 pull-right" data-spy="affix">
<div class="scrollbar" id="style-2">
    <div class="force-overflow"></div>
    <ol class="chat">
        <div id="fullchat">
            <li class="bot"><div class="avatar"><img src="'+msg.avatar+'" draggable="false"/></div><div class="msg"><div class="name">Username</div><p>The chat text should come here..........</p><time><i class="fa fa-clock-o" aria-hidden="true"></i>19:00</time></div></li>
        </div>
        <div class="chat_error"></div>
    </ol>
</div>
<div class="toggle-sound"></div>
    <input class="textarea" id="chat_textbox" type="text" placeholder="Enter message here"/>

<style type="text/css">

div.chat_error {
    color: #e20f0f;
    padding-left: 10px;
    padding-top: 1rem;
}

.chatdiv
{
    position: fixed;
    left: 40px;
    background-color: #101010;
    height: 90vh;
}

.chatdiv .name{
    top: 3px;
    left: 110px;
    font-size: 10px;
    font-weight: bold;
    color: rgba(256,256,256,0.80);
    cursor: default;
}

/* M E S S A G E S */

.chat {
    list-style: none;
    background: none;
    margin: 0;
    padding: 0 0 50px 0;
    margin-top: 60px;
    margin-bottom: 10px;
}
.chat li {
    padding: 0.5rem;
    overflow: hidden;
    display: flex;
}

.chat .avatar img {
    margin-top: 15px;
    width: 40px;
    height: 40px;
    border-radius: 100%;
    -webkit-border-radius: 100%;
    -moz-border-radius: 100%;
    -ms-border-radius: 100%;
    background-color: rgba(255,255,255,0.9);
    -webkit-touch-callout: none;
    -webkit-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
}

.other .msg {
    order: 1;
    border-top-left-radius: 0px;
    box-shadow: -1px 2px 0px #187006;
    margin-left: 10px;
    background-color: #27af0c;
}

.self {
    justify-content: flex-end;
    align-items: flex-end;
}
.self .msg {
    order: 1;
    border-bottom-right-radius: 0px;
    background-color: #0a95db;
    box-shadow: 1px 2px 0px #055f8c;
    margin-left: 10px;
}

.bot .msg {
    order: 1;
    border-bottom-right-radius: 0px;
    background-color: #a50808;
    box-shadow: 1px 2px 0px #6b0606;
    margin-left: 10px;
}

.msg {
    background: white;
    min-width: 50px;
    padding: 10px;
    border-radius: 2px;
    box-shadow: 0px 2px 0px rgba(0, 0, 0, 0.07);
}
.msg p {
    font-size: 15px;
    margin: 0 0 0.2rem 0;
    color: white;
}

.msg time {
    font-size: 10px;
    color: #ccc;
    margin-top: 3px;
    float: right;
    cursor: default;
    -webkit-touch-callout: none;
    -webkit-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
}

/* T Y P E */

input.textarea {
    position: absolute;
    width: 89%;
    height: 50px;
    left: 15px;
    bottom: 3vh;
    background: white;
    border: none;
    outline: none;
    padding-left: 10px;
    padding-right: 10px;
    color: #666;
    font-weight: 400;
}

div.toggle-sound {
    position: fixed;
    bottom: 13vh;
    left: 65px;
    font-weight: bold;
    font-size: 20px;
}

.scrollbar
{
    float: left;
    height: 80vh;
    background-color: #232323;
    overflow-y: scroll;
    margin-bottom: 25px;
    width: 100%;
}

.force-overflow
{
    min-height: 90vh;
}

#style-2::-webkit-scrollbar-track
{
    -webkit-box-shadow: inset 0 0 6px rgba(0,0,0,0.3);
    border-radius: 10px;
    background-color: #232323;
}

#style-2::-webkit-scrollbar
{
    width: 12px;
    background-color: #232323;
}

#style-2::-webkit-scrollbar-thumb
{
    border-radius: 10px;
    -webkit-box-shadow: inset 0 0 6px rgba(0,0,0,.3);
    background-color: #E20F0F;
}
</style>

Answer 1

如果您想为不同的屏幕尺寸使用不同的CSS，您可以使用称为媒体查询的内容。我不知道你想为不同的屏幕尺寸改变哪些规则，但让我们做一个简单的例子。假设您希望在屏幕上将文本框的背景颜色设置为红色，宽度小于或等于900px。这可以通过以下媒体查询来完成：

@media (max-width: 900px) {
  input.textarea {
    background-color: red;
  }
}

所以你可以做的只是弄清楚你想在不同的屏幕尺寸上做什么改变，然后对所有这些进行媒体查询。您可以阅读有关媒体查询的更多信息here。

css调整固定元素的垂直定位

1 个答案: