文章/答案/技术大牛

发布

社区首页 >问答首页 >我正试图按照“圣杯的布局”来建立一个网站，但我不能让它在我的手机上看起来很好看。

问我正试图按照“圣杯的布局”来建立一个网站，但我不能让它在我的手机上看起来很好看。
EN

Stack Overflow用户

提问于 2022-03-12 21:25:36

回答 1查看 47关注 0票数 0

我正在构建一个使用圣杯布局的网站，虽然它在我的笔记本电脑和台式机上看起来很好，但在我的手机上它看起来很糟糕，根本没有正确地调整大小。我甚至看不到页面的一半，尽管有一个媒体查询试图解决这个问题，以及在我的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>

我个人更喜欢柔性盒而不是CSS网格，并发现网格是非常混乱的。也许我用错了，但我必须在作业中同时使用这两种方法。

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

电话截图

我厌倦了让网站与响应性的设计实践相适应，然后看到它们永远不会对我起作用。我有媒体查询，我有%s的动态调整，我有一个网格和柔性盒的组合。没有什么能使它在移动屏幕上切断我一半的站点，我不知道这会是什么原因。我查到的每件事都表明，这些是我应该做的事情，以使它响应，但它从来不适合我。

html

css

responsive-design

回答 1

Stack Overflow用户

回答已采纳

发布于 2022-03-12 21:33:33

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

@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之间的任何地方。

票数 0

页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持

原文链接：

https://stackoverflow.com/questions/71452947

复制

相似问题

问我正试图按照“圣杯的布局”来建立一个网站，但我不能让它在我的手机上看起来很好看。
EN

回答 1

Stack Overflow用户

社区

活动

圈层

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问我正试图按照“圣杯的布局”来建立一个网站，但我不能让它在我的手机上看起来很好看。EN

回答 1

Stack Overflow用户

社区

活动

圈层

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问我正试图按照“圣杯的布局”来建立一个网站，但我不能让它在我的手机上看起来很好看。
EN