Я экспериментировал с созданием базовой системы чата с HTML и столкнулся с некоторыми проблемами при попытке реализовать адаптивный дизайн для небольших экранных платформ. Я пытался и пытался часами с различными решениями, но, к сожалению, все еще застрял. (
Я просто должен сказать, что я крайне неопытный программист в этой области, и я должен предупредить вас, что код грязный.
Я прикрепил изображение основного дисплея на широкий экран моего ПК.
Изображения:
Попытка отображения на маленьком экране и
Основная попытка отображения на большом экране
Я также приложил изображение того, что происходит, когда я пытаюсь сжать его, а именно: половина из него выходит за пределы экрана, а другая половина доступна только при прокрутке.
Вот код:
<!DOCTYPE html>
<html>
<head>
<title>
Grav1ty: Login
</title>
<link rel="stylesheet" href="gravitystyle.css">
<meta charset="UTF-8">
<meta name="description" content="Grav1ty Chat">
<meta name="keywords" content="Grav1ty, grud, soyuznerushimy, grav1ty">
<meta name="author" content="Grud">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="shortcut icon" href="gravitylogo.PNG" />
</head>
<body style="background-image:url('background.jpg');font-family:Courier New;">
<div class="exampleheader">
<img src="gravitylogo.PNG" alt="Grav1ty Logo">
<p style ="color:white;"><font size="7">Grav1ty</font><p>
</div>
<!--<div class="examplerow">-->
<div class="exampleheadera" class="container" style="padding: 10px; border: none;">
<!--<div class="loginlayout">-->
<div>
<p style="color:#66c3fe;">
<fieldset class="fieldseta" style="color:#66c3fe; padding: 10px; height: 350px; width: 300px;">
<legend><b><h3>Welcome!</h3></b></legend>
Welcome to <b>Grav1ty</b>,<br>Grav1ty is a <b>FREE</b>, online messaging service free from interruption or surveillance that will be developed over the next few months to suit your needs. Any queries? Contact me through Grav1ty! My username's Grud (well duh) and I'll be happy to help you out. Feel free to chat as you see fit...<br><br><i>Grud</i><br><br><b>Current Status: ONLINE</b>
</fieldset>
</div>
<div>
<form style ="color:white;" action="login.php">
<fieldset class="fieldsetb" style="color:#66c3fe; height: 325px; padding: 30px;">
<legend><b><h3>Log in:</h3></b></legend>
Username:
<input type="text" name="username" placeholder="Username" required><br>
<br>Password:
<input type="password" name="password" placeholder="Password" required>
<br>
<br>
<input type="submit" value="SUBMIT" class="buttona">
</form>
</fieldset>
</form>
</div>
<div>
<form style ="color:white;">
<fieldset class="fieldsetc" style="color:#66c3fe; height: 325px; padding: 30px;">
<legend><b><h3>Sign Up:</h3></b></legend>
Name:
<input type="text" name="newname" placeholder="Name" required><br>
<br>Username:
<input type="text" name="newusername" placeholder="Username" required><br>
<br>Password:
<input type="password" name="newpassword" placeholder="Password" required>
<br>
<br>
<input type="submit" value="SUBMIT" class="buttona">
</form>
</p>
</fieldset>
</form>
<!--</div>-->
</div>
</div>
<!--</div>-->
</body>
</html>
А вот таблица стилей CSS:
.buttona {
background-color: #657EEB;
border: 2px solid #1C43EF;
border-radius: 6px;
color: white;
text-align: center;
text-decoration: none;
display: inline-block;
font-size: 14px;
margin: 4px 2px;
-webkit-transition-duration: 0.4s; /* Safari */
transition-duration: 0.4s;
}
.buttona:hover {
color: blue;
background-color: white
}
.exampleheader {
padding: 10px;
text-align: center;
background: #9b9ce7;
color: #11f2f2;
border-radius: 2px;
display: flex;
}
.exampleheadera {
padding: 10px;
text-align: center;
background: white;
color: #11f2f2;
border-radius: 2px;
display: flex;
flex-direction: row;
justify-content: center;
}
.examplenavbar {
display: flex;
background-color: #333;
justify-content: space-around;
}
.examplenavbar a {
color: white;
padding: 14px 20px;
text-decoration: none;
text-align: center;
}
.examplenavbar a:hover {
background-color: #ddd;
color: black;
}
.examplerow {
display: flex;
flex-wrap: wrap;
}
/* Create two unequal columns that sits next to each other */
/* Sidebar/left column */
.exampleside {
flex: 30%;
background-color: #f1f1f1;
padding: 20px;
}
/* Main column */
.examplemain {
flex: 70%;
background-color: white;
padding: 20px;
}
/* Fake image, just for this example */
.examplefakeimg {
background-color: #aaa;
width: 100%;
padding: 20px;
}
/* Footer */
.examplefooter {
padding: 20px;
text-align: center;
background: #ddd;
}
/* Responsive layout - when the screen is less than 700px wide, make the two columns stack on top of each other instead of next to each other */
.fieldseta {
display: block;
padding-left: 3px;
padding-right: 3px;
border: 2px solid #b4fef5 ;
background-color: white;
height: 550px
}
.fieldsetb {
display: block;
padding-left: 3px;
padding-right: 3px;
border: 2px solid #b4fef5 ;
background-color: white;
height: 550px
}
.fieldsetc {
display: block;
padding-left: 3px;
padding-right: 3px;
border: 2px solid #b4fef5 ;
background-color: white;
height: 550px
}
.loginlayout {
display: flex;
justify-content: space-between;
border: 3px solid #b4fef5;
padding: 30px;
}