我正在使用圣杯布局構建一個網站，雖然它目前在我的筆記本電腦和臺式電腦上看起來不錯，但在我的手機上看起來很糟糕，而且根本無法正確調整大小。盡管有一個媒體查詢來嘗試解決這個問題以及在我的 CSS 的其余部分中使用動態大小的 HTML 元素，但我什至看不到頁面的一半。這是我的代碼，我不確定我目前的問題是什么，因為我的媒體查詢似乎沒有做任何事情。
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<script>
const originalAlpha = "abcdefghijklmnopqrstuvwxyzABCDEFGHIJKLMNOPQRSTUVWXYZ";
// rot13
var rot13 = function() {
var the_text = document.getElementById("main_text").value;
the_text = the_text.replace(/[a-z]/gi, letter => String.fromCharCode(letter.charCodeAt(0) (letter.toLowerCase() <= 'm' ? 13 : -13)));
document.getElementById("output_text").innerHTML=the_text;
};
</script>
<style>
@import url('https://fonts.googleapis.com/css2?family=Libre Baskerville&family=ZCOOL QingKe HuangYou&display=swap');
html {
width: 100%;
height: 100%;
overflow: hidden;
}
/* Use a media query to add a breakpoint at 800px: */
@media screen and (max-width: 800px) {
html, body {
aspect-ratio: 1024/768;
width: 100%;
height: 100%;
overflow: hidden;
}
}
.item1 { grid-area: header; }
.item2 { grid-area: menu; }
.item3 { grid-area: main; }
.item4 { grid-area: right; }
.item5 { grid-area: footer; }
.grid-container {
display: grid;
grid-template-areas:
'header header header header header header'
'menu main main main right right'
'menu footer footer footer footer footer';
gap: 10px;
background-color:seashell;
padding: 10px;
}
.grid-container > div {
background-color: rgb(57, 61, 66, 0.4);
text-align: center;
padding: 20px 0;
}
.plaintext-form {
flex-flow:row wrap;
align-content:center;
text-align: justify;
justify-content: center;
margin: 2%;
padding: 2%;
width: 80%;
height: 80%;
font-family: 'Libre Baskerville', sans-serif;
}
ul {
padding-top: 5px;
padding-right: 30px;
position: relative;
justify-self: center;
text-align: center;
align-self: center;
flex-flow: column wrap;
align-content: center;
width: auto;
margin:0 auto;
}
li {
display: block;
margin: 20px;
padding: 15px;
height: 100%;
font-size: 21px;
}
a {
color:slateblue;
}
p {
background-color: rgb(57, 61, 66, 0.4);
height: 200px;
width: auto;
margin: 0 auto;
padding: 20px;
text-align:justify;
color:gainsboro;
font-family: 'Libre Baskerville', sans-serif;
}
footer {
flex-flow:row wrap;
align-content:center;
text-align: center;
justify-content: center;
margin: 2%;
padding: 2%;
}
</style>
<title>ROT13 Cipher Machine</title>
</head>
<body>
<div class="grid-container">
<div class="item1">
<h1 class="page_title">ROT13 Cipher Machine</h1>
</div>
<div class="item2">
<div class="navbar">
<header role="navigation">
<nav class="site-nav">
<ul id="site-links">
<li id="homework"><a href="./cs212/homework/">Homework</a></li>
<li id="crypto"><a href="./docs/Cryptography/index.html">Cryptography</a></li>
<!-- <li id="networking"><a href="./docs/network-programming.html">Network Programming</a></li>
<li id="quantum-computing"><a href="./docs/quantum-computing.html">Quantum Computing</a></li> -->
<li id="minecraft"><a href="./docs/minecraft.html">Minecraft</a></li>
</ul>
</nav>
</header>
</div>
</div>
<div class="item3">
<form id="input_text">
Plaintext/Ciphertext: <input class="plaintext-form" type="text" placeholder="Type" id="main_text"><br><br>
<input type="button" onclick="rot13()" value="Submit">
</form>
</div>
<div class="item4">
<h4>Output:</h4>
<p id="output_text"></p>
</div>
<hr>
<div class="item5">
<section class="rot13-about">
The ROT13 Algorithm is a symmetric cipher algorithm; simply put:
<br><br>
<code>
ROT13(plaintext) = ciphertext, rot13(ciphertext) = plaintext
</code>
<br><br>
Try it out yourself for some simple text obfuscation!
</section>
</div>
</div>
</body>
</html>
我個人更喜歡 flexboxes 而不是 CSS 網格，并且發現網格非常混亂。也許我用錯了，但我必須將兩者都用于我的作業。
Edit: I added a 600px breakpoint and it still cuts off over half the screen, this can be seen in the screenshot below.
phone screenshot
I am so tired of making sites that should fit with responsive design practices and then seeing them never work for me. I have media queries, I have dynamic sizing with %'s, I have a combo of a grid and flexboxes. Nothing about that should cause it to cut half my site off on mobile screens and I cannot understand what would be the cause at this point. Everything I look up indicates these are the things I should be doing to make it responsive yet it never works for me.
uj5u.com熱心網友回復：
您的媒體查詢在 800px 處只有一個斷點；
@media screen and (max-width: 800px) {
html, body {
aspect-ratio: 1024/768;
width: 100%;
height: 100%;
overflow: hidden;
}
}
您需要為手機螢屏添加另一個斷點，例如
@media screen and (max-width: 600px) {
html, body {
...
}
}
手機螢屏尺寸斷點可以在 400 到 600 之間。
轉載請註明出處，本文鏈接：https://www.uj5u.com/net/442034.html