Question

我是CSS Grids（以及一般的Web开发）的新手，并且最近开始使用CSS网格，除了一个大问题之外我觉得很好：尽管如此，它们似乎都不适用于任何移动设备：

尝试了各种移动浏览器，包括Firefox，Chrome，三星浏览器，Safari，UC浏览器和百度浏览器
将所有浏览器更新为最新版本
通过手动缩小Firefox中的浏览器大小和PC上的Chrome来测试所有屏幕尺寸的显示（以这种方式进行测试时，可以完美地显示各种尺寸！）
使用Firefox内置的移动屏幕测试功能测试移动版本（在以这种方式测试时也能完美显示！）
尝试在http://responsivedesignchecker.com/的各种移动设备模型上进行测试（所有模型几乎完全按照预期显示！）。

这是HTML（请原谅任何明显的错误，因为我是新手）

<!DOCTYPE HTML>
<html>
<head>
<title>Grid</title>
<meta charset="UTF8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet" type="text/css" href="styles.css">
</head>

<body>
<div class="grid">

<menu>
<div>Home</div>
<div>News</div>
<div>Whitepaper</div>
<div>About</div>
</menu>

<!--HEADER-->
<header>
<h1 class="site-title">Silubium</h1><br>
<span class="motto">The currency of the future</span>
<br><br><br><br><br><br><br><br><br><br>
<div class="buttons">
<img src="images/buttonAndroid.png">
<img src="images/buttonIOS.png">
<img src="images/buttonWindows.png">
<img src="images/buttonLinux.png">
</div>
</header>

<!--CONTENT-->
<intro>
<div class="introText">
<h1 class="contentHeader">Silubium: a currency built for the future</h1>
<p>Silubium is the world's first 4th-generation cryptocurrency and has been designed from the outset to be a consumer currency. Silubium enjoys the advantages of high-level government support for the "one road, one belt" economic development strategy of China and is already being actively implemented by several large enterprises Hong Kong, Macao and elsewhere.
<a href="#">Read More<a>.</p>
</div>
<div class="iframe"><iframe src="iframe.html" height="200" width="400"></iframe></div>


</intro>

<whySilubium>
<h1>Why Silubium?</h1>
<div class="icons">
<div class="icon"><img src="images/icon_1.png"><p class="iconCaption">Designed for the consumer</p></div>
<div class="icon"><img src="images/icon_2.png"><p class="iconCaption">Cutting-edge 4th-generation<br> public ledger</p></div>
<div class="icon"><img src="images/icon_3.png"><p class="iconCaption">Unmatched security features</p></div>
<div class="icon"><img src="images/icon_4.png"><p class="iconCaption">24/7/365 support</p></div>
<div class="icon"><img src="images/icon_5.png"><p class="iconCaption">Designed for stability</p></div>
<div class="icon"><img src="images/icon_6.png"><p class="iconCaption">Globally accepted</p></div>
</div>
</whySilubium>

<!--FOOTER-->
<footer>
<div class="contact">
<div class="footerTitle">Contact Ryker Freegeld</div>
<div class="footerItem">Email: rygeld@silubium.com</div> 
<div class="footerItem">Twitter: @Silubium</div>
<div class="footerItem">Youtube: "Silubium" (channel)</div>
</div>
<div class="links">
<div class="footerTitle">Related Links</div>
<div class="footerItem"><a href="djw.top">Silktrader Trading platform</a></div>
<div class="footerItem"><a href="www.silubium.org">www.silubium.org</a> (Chinese promotional site)</div>
</div>
</footer>

<!--COPYRIGHT-->
<div class="copyright">
<div class="copyrightText">Design and coding by <a style="color:white" href="#">Ryker Freegeld</a></div>
</div>

</body>
</div>
</html>

这是使用CSS网格代码的CSS：

/*
THEME: SILUBIUM GRID
AUTHOR: DON HARTIG
VERSION: 1.0
*/

body {background-color:#404040;
    font-family:arial;}

menu {height:20px;
display:grid;
grid-template-columns:70% 1fr 1fr 1fr 1fr;
justify-items:end;
}

/*HEADER*/  
header {
    display:grid;
    grid-area:header;
    grid-template-columns:1fr;
    grid-template-rows:auto;
    justify-items:center;
    color: white;
    background-color:#404040;
    background-image:url("images/blueSGbackground.png");
    width:100%;
    height: 720px;
    padding-top:30px;
    padding-bottom:100px;}
.site-title {padding-top:150px; font-size:50px;}
.motto {    font-size:20px;}     
.buttons {
    text-align:center;
    }

/*CONTENT*/
.contentHeader {
    color:white;
    display:grid;
    justify-items:left;
    font-size:40px;
    }
intro {
    display:grid;
    grid-area:content;
    color:white;
    background-color:#404040;
    grid-template-columns:1fr;
    grid-template-rows:2fr;
    justify-items:;
    padding-bottom:0px;
    }
whySilubium {display:grid;
    grid-template-columns:1fr;
    justify-items:center;
    color:white;
    padding-top:30px;}
.icons {display:grid;
    grid-template-columns:1fr;
    justify-items:center;
    }
.iconCaption {text-align:center; margin-top:0px;}
.icon > img {padding:40px 40px 5px 40px;}   
.iframe {display:grid;
    justify-items:center;}

/*FOOTER*/
footer {
    display:grid;
    grid-template-columns:1fr;
    grid-template-rows:auto;
    grid-area:footer;
    background-color:black;
    color:white;
    justify-items:center;
    font-size:14px;
    padding:30px;
    }
.footerTitle {display:grid;
    font-size:30px;
    text-decoration:underline;
    padding-bottom:20px;}
.footerItems {}

.grid {
    grid-template-areas:
    ". header ."
    "h1"
    "content"
    "footer footer footer"
    }

/*COPYRIGHT*/
.copyright {
    height:50px;
    background-color:blue;}
.copyrightText {display:grid;
    justify-items:center;
    color:lime;
    padding-top:6px;}

/*RESPONSIVE*/
@media only screen and (min-width: 500px) {
    header {padding-bottom:;}}  
    footer {grid-template-columns:1fr 1fr;}

@media only screen and (min-width: 700px) {
    intro {grid-template-columns:1fr 1fr;}
    .icons {grid-template-columns:1fr 1fr;}}

@media only screen and (min-width: 1000px) {
    .icons {grid-template-columns:1fr 1fr 1fr;
            grid-column-gap:200px;}}

@media only screen and (min-width: 1200px) {
    intro {padding-left:40px;}
    .icons {grid-column-gap:300px;}}

@media only screen and (min-width: 1500px) {
    header {padding-top:70px;}
    .site-title {padding-top:50px;}
    .motto {padding-top:0px; padding-bottom:0px;}}

任何帮助都会非常感激，因为我正在努力让这个工作在截止日期前完成。

感谢。

尽管在测试过程中在所有屏幕尺寸上都能完美显示，但CSS网格并不适用于实际的移动设

0 个答案: