我如何使它响应？

Question

好的。所以，我正在创建一个聊天 site/application 并且我对 CSS.
几乎一无所知但是我一个人在开发这个东西，所以我得试试。
我在 Photoshop 中设计了该网站，然后我开始使用 HTML & CSS 实际创建它，它看起来很棒，但并非所有部分都是响应式的。
更具体地说，消息容器的事情，有人可以帮助我学习如何做响应，或者只是用勺子喂整个网站但对我有响应吗？

到目前为止，这是我的代码：
HTML（结合EJS）：

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <title>Home - <%= name %></title>
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <link rel="stylesheet" href="/global.css">
        <link rel="stylesheet" href="/index.css">
    </head>
    <body>
        <div class="content">
            <div class="nav">
                <h1 class="navTitle">Atlas Chat</h1>
                <h2 class="navUsername"><%= user ? user.username : "Not logged in" %></h2>
                <% if(user !== null) { %>
                <a class="navitem logoutbtn" href="/logout">Logout</a>
                <% } else { %>
                <a class="navitem loginbtn" href="/login">Login</a>
                <a class="navitem" href="/register">Register</a>
                <% } %>
            </div>
            <div class="main">
                <div class="roomInfo">
                    <span class="hashtag">#</span><input type="text" class="roomname" pattern="^[a-z0-9\-]{0,16}$" required placeholder="channel-name"><button class="roomnamebtn">Join</button>
                </div>
                <hr>
                <div class="room">
                    <ul class="messages">
                        <li class="message"><span class="user">Atlas</span>: <span class="msgContent">This is a message.</span></li>
                        <li class="message"><span class="user">Atlas</span>: <span class="msgContent">This is another message.</span></li>
                        <li class="message"><span class="user">Atlas</span>: <span class="msgContent">This is another message.</span></li>
                        <li class="message"><span class="user">Atlas</span>: <span class="msgContent">This is another message.</span></li>
                        <li class="message"><span class="user">Atlas</span>: <span class="msgContent">This is another message.</span></li>
                        <li class="message"><span class="user">Atlas</span>: <span class="msgContent">This is another message.</span></li>
                        <li class="message"><span class="user">Atlas</span>: <span class="msgContent">This is another message.</span></li>
                        <li class="message"><span class="user">Atlas</span>: <span class="msgContent">This is another message.</span></li>
                        <li class="message"><span class="user">Atlas</span>: <span class="msgContent">This is another message.</span></li>
                        <li class="message"><span class="user">Atlas</span>: <span class="msgContent">This is another message.</span></li>
                        <li class="message"><span class="user">Atlas</span>: <span class="msgContent">This is another message.</span></li>
                        <li class="message"><span class="user">Atlas</span>: <span class="msgContent">This is another message.</span></li>
                        <li class="message"><span class="user">Atlas</span>: <span class="msgContent">This is another message.</span></li>
                        <li class="message"><span class="user">Atlas</span>: <span class="msgContent">This is another message.</span></li>
                        <li class="message"><span class="user">Atlas</span>: <span class="msgContent">This is another message.</span></li>
                        <li class="message"><span class="user">Atlas</span>: <span class="msgContent">This is another message.</span></li>
                        <li class="message"><span class="user">Atlas</span>: <span class="msgContent">This is another message.</span></li>
                        <li class="message"><span class="user">Atlas</span>: <span class="msgContent">This is another message.</span></li>
                        <li class="message"><span class="user">Atlas</span>: <span class="msgContent">This is another message.</span></li>
                        <li class="message"><span class="user">Atlas</span>: <span class="msgContent">This is another message.</span></li>
                        <li class="message"><span class="user">Atlas</span>: <span class="msgContent">This is another message.</span></li>
                        <li class="message"><span class="user">Atlas</span>: <span class="msgContent">This is another message.</span></li>
                        <li class="message"><span class="user">Atlas</span>: <span class="msgContent">This is another message.</span></li>
                        <li class="message"><span class="user">Atlas</span>: <span class="msgContent">This is another message.</span></li>
                        <li class="message"><span class="user">Atlas</span>: <span class="msgContent">This is another message.</span></li>
                        <li class="message"><span class="user">Atlas</span>: <span class="msgContent">This is another message.</span></li>
                        <li class="message"><span class="user">Atlas</span>: <span class="msgContent">This is another message.</span></li>
                        <li class="message"><span class="user">Atlas</span>: <span class="msgContent">This is another message.</span></li>
                        <li class="message"><span class="user">Atlas</span>: <span class="msgContent">This is another message.</span></li>
                        <li class="message"><span class="user">Atlas</span>: <span class="msgContent">This is another message.</span></li>
                        <li class="message"><span class="user">Atlas</span>: <span class="msgContent">This is another message.</span></li>
                    </ul>
                    <div class="inputarea">
                        <hr class="inputhr">
                        <input type="text" class="roominput" placeholder="<%= user ? "Send a message." : "Log in to join the conversation!" %>" <%= user ? "" : "disabled" %> required><button class="roomsendbtn" <%= user ? "" : "disabled" %>>Send</button>
                    </div>
                </div>
            </div>
            <div class="users">
                <h1 class="usersTitle">Online Users</h1>
                <ul class="usersList">
                    <li class="usersUser">Atlas</li>
                    <li class="usersUser">SomeOtherGuy</li>
                    <li class="usersUser">SomeThirdGuy</li>
                </ul>
            </div>
        </div>
    </body>
</html>

CSS:

* {
    box-sizing: border-box;
    margin: 0;
    padding: 0;
}

:root {
    --bg1: #131318;
    --bg2: #1E1E26;
    --link1: #2991E9;
    --link2: #1B83DA;
    --btn1: #9638E5;
    --btn2: #8933D1;
    --text1: #ffffff;
    --text2: #626262;
    --border: #252525;
    --success: #28D328;
    --danger: #EA2828;
}

:focus {
    outline: initial;
}

html {
    font-family: "Open Sans";
    font-size: 14px;
    background-color: var(--bg1);
    color: white;
}

body {
    height: 100vh;
    width: 100vw;
}

h1 {
    font-family: "Poppins";
    font-weight: 500;
}

ul {
    list-style-type: none;
}

a {
    text-decoration: none;
    color: #35A7FF;
}

a:hover {
    color: #2887D7;
    text-decoration: underline;
}

.content {
    display: flex;
    height: 100%;
    width: 100%;
}

.nav {
    display: flex;
    flex-direction: column;
    height: 100%;
    width: 15%;
    overflow: auto;
    list-style: none;
    background-color: var(--btn1);
    text-align: center;
}

.navitem {
    background-color: var(--btn1);
    padding: 10px 15px;
    text-decoration: none;
    cursor: pointer;
    text-align: center;
    color: white !important;
    text-decoration: none;
}

.navitem:hover {
    background-color: var(--btn2);
    color: white !important;
    text-decoration: none !important;
}

.main {
    display: flex;
    height: 100%;
    width: 70%;
    flex-direction: column;
}

.users {
    display: flex;
    flex-direction: column;
    background-color: var(--btn1);
    height: 100%;
    width: 15%;
    text-align: center;
}

.logoutbtn, .loginbtn {
    margin-top: auto;
}

.navTitle, .usersTitle {
    margin-top: 8px;
}

.roomInfo {
    margin-top: 14px;
    margin-bottom: 14px;
}

.hashtag {
    font-size: 3rem;
    vertical-align: middle;
    line-height: 0;
    font-family: "Poppins";
    font-weight: 500;
    margin-left: 16px;
    color: var(--text2);
}

input.roomname {
    width: 14%;
    padding: 10px 8px;
    font-size: 16px;
    color: var(--text2);
    margin-left: 12px;
    margin-right: 12px;
    background-color: var(--bg2);
    display: inline-block;
    border: 1px solid var(--border);
    border-radius: 4px;
}

input.roomname:focus {
    border: 1px solid var(--btn2);
}

input.roominput {
    width: 85%;
    padding: 10px 8px;
    font-size: 16px;
    color: var(--text1);
    margin-left: 15px;
    margin-right: 25px;
    background-color: var(--bg2);
    display: inline-block;
    border: 1px solid var(--border);
    border-radius: 4px;
}

input.roominput:focus {
    border: 1px solid var(--btn2);
}

input.roominput:disabled {
    cursor: not-allowed;
}

hr {
    border: 0;
    margin-inline-start: 15px;
    margin-inline-end: 15px;
    border-bottom: 2px solid var(--bg2);
}

ul.messages {
    max-height: 800px;
    width: 100%;
    overflow-y: scroll;
    padding-left: 25px;
    padding-right: 25px;
    padding-top: 10px;
    padding-bottom: 10px;
}

li.message {
    max-height: 20px;
}

li.message:not(:last-child) {
    margin-bottom: 8px;
}

button.roomnamebtn {
    width: 7%;
    font-size: 1.3rem;
    background-color: var(--btn1);
    color: white;
    padding: 10px 8px;
    border: none;
    border-radius: 4px;
    cursor: pointer;
}

button.roomsendbtn {
    width: 10%;
    font-size: 1.3rem;
    background-color: var(--btn1);
    color: white;
    margin-top: 14px;
    padding: 10px 8px;
    border: none;
    border-radius: 4px;
    cursor: pointer;
}

button.roomsendbtn:disabled {
    cursor: not-allowed;
}

button:hover {
    background-color: var(--btn2);
}

Answer 1

响应式设计意味着它会随着屏幕的大小和形状而变化。例如，移动设计和布局在桌面上看起来很傻，而桌面设计太杂乱而不适合移动。

前段时间我正在制作一个聊天应用程序的模型，如果您不介意的话，我想用它作为示例，因为我已经在线查看了代码。

https://replit.com/@DillonBurnett/VapidDeficientTitles#index.html

当您使用移动设备时，该应用程序将如下所示：

这里很好，也很容易查看，你可以聊天，你可以点击右上角的按钮查看房间、用户和设置...但是在桌面，所以我使用一些 css 来专门在屏幕很大时将其更改为如下所示：

每个“屏幕”都是一个长div。把它想象成 4 个屏幕宽度，每个屏幕宽度为 100%，但它们只是隐藏起来，因为它们离开了屏幕。当您 select 一个不同的“屏幕”时，它会立即滚动到那里，使其看起来像一个新页面。

#screens{
    width: 100%; height: 100%;
    background: #2a2a2a;
    overflow: hidden;
}
#screens #viewport{
    width: calc(100% * 4); height: 100%;
    overflow: none;
}
#screens #viewport > *{
    width: calc(100% / 4); height: 100%;
    float: left;
}

但是，当用户在桌面上并且我想同时显示“房间”和“聊天”时，我只是将它们调整为适合 1 个屏幕。

@media only screen and (min-width: 800px){
    #screens #viewport #rooms{width: 200px!important}
    #screens #viewport #chat{width: calc(100% / 4 - 200px)!important;}
}

如您所见，@media 标签是唯一的，并且只允许其中的 css 在屏幕至少 800 宽时运行 .否则，它会被忽略。这为 css 开辟了很大的潜力。您可以针对纵向或横向调整布局、宽度、高度以针对许多不同的设备...甚至是电视。

我使用那个例子是因为 css 通常简单易懂......虽然它有点长（css 声明），但我希望它能帮助你设计响应式聊天应用程序。如果您对该示例有任何具体问题，请在下方告诉我。

我如何使它响应？

How do I make this responsive?

css

ejs

express

responsive-design

responsive