我正在尝试根据 "Holy Grail Layout" 建立一个网站，但我无法让它在我的 phone 上看起来不错

Question

我正在使用 Holy Grail Layout 构建一个网站，虽然它目前在我的笔记本电脑和台式电脑上看起来不错，但在我的 phone 上看起来很糟糕并且根本无法正确调整大小。我什至看不到页面的一半，尽管有一个媒体查询来尝试解决这个问题，并且在我的 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 网格，发现网格非常混乱。也许我用错了，但我必须将两者都用于我的作业。

编辑：我添加了一个 600px 的断点，它仍然切断了一半的屏幕，这可以在下面的屏幕截图中看到。

phone screenshot

我厌倦了制作本应符合响应式设计实践的网站，然后却发现它们对我不起作用。我有媒体查询，我有 % 的动态大小，我有一个网格和 flexboxes 的组合。这应该不会导致它在移动屏幕上切断我网站的一半，我现在不明白是什么原因。我查找的所有内容都表明这些是我应该做的以使其具有响应性但它对我不起作用。

Answer 1

您的媒体查询在 800px 处只有一个断点；

@media screen and (max-width: 800px) {
    html, body {
        aspect-ratio: 1024/768;
        width: 100%;
        height: 100%;
        overflow: hidden;
    }
}

您需要为单元格 phone 屏幕添加另一个断点，例如

@media screen and (max-width: 600px) {
    html, body {
        ...
    }
}

单元格 phone 屏幕尺寸断点可以是 400 到 600 之间的任意值。

我正在尝试根据 "Holy Grail Layout" 建立一个网站，但我无法让它在我的 phone 上看起来不错

I am trying to build a website according to the "Holy Grail Layout" and I cannot get it to look good on my phone

html

css

responsive-design