我正在一个网站上工作，并将其设置为全屏工作，但是，我想使其响应。我使用了一个网格，我不确定这是如何转移到响应。我把媒体标签放在CSS页面的底部，网格在HTML页面的前半部分。我想重新安排CSS，这样当网站在手机上打开时，标题在顶部，然后是图像，然后是一些文章，然后是另一个图像，然后是更多的文章。
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
:root {
--black: #000000;
--white: #FFFFFF;
--main-font: 'Montserrat', sans-serif;
}
.st0 {
fill: red !important;
}
/* INDEX PAGE */
#main-page {
background-color: black;
color: white;
}
.grid-container {
display: grid;
grid-template-columns: auto auto auto;
}
.grid-item {
font-size: 30px;
letter-spacing: 5px;
text-align: center;
/*width: 456.2px;
height: 267.35px;*/
display: flex;
justify-content: center;
align-items: center;
font-family: var(--main-font);
font-weight: 300;
}
.grid-item img {
width: 100%;
}
.item-absolute {
position: absolute;
}
.main-box1 {
grid-column: 1/2;
grid-row: 1/2;
}
.main-box2 {
grid-column: 2/3;
grid-row: 1/2;
width: 100%;
}
.main-box3 {
grid-column: 3/4;
grid-row: 1/2;
}
.main-box4 {
grid-column: 1/2;
grid-row: 2/3;
width: 100%;
}
.main-box5 {
grid-column: 2/3;
grid-row: 2/3;
}
.main-box6 {
grid-column: 3/4;
grid-row: 2/3;
width: 100%;
}
.main-box7 {
grid-column: 1/2;
grid-row: 3/4;
}
.main-box8 {
grid-column: 2/3;
grid-row: 3/4;
width: 100%;
}
.main-box9 {
grid-column: 3/4;
grid-row: 3/4;
}
/* NAVIGATION BAR */
.top {
/*position: fixed;*/
display: flex;
justify-content: space-between;
width: 100%;
padding: 50px;
background: black;
font-family: var(--main-font);
font-weight: 500;
letter-spacing: 5px;
}
.menu {
margin-top: 10px;
}
.menu>li {
display: inline;
margin-right: 50px;
}
.menu>li:last-of-type {
margin-right: 0;
}
/* LINKS */
a:link,
a:visited {
color: white;
text-decoration: none;
}
a:hover {
color: grey;
}
/* ALL THE COUNTRIES GRID ITEMS*/
.item1 {
grid-column: 1 / 2;
grid-row: 2/4;
justify-content: center;
text-align: left;
font-size: 15px;
line-height: 45px;
padding-left: 75px;
}
.item2 {
grid-column: 5 / 7;
grid-row: 1 / 4;
text-align: right;
width: 100%;
}
/* BRAZIL */
#brazil {
background-color: white;
color: black;
}
#full-black {
background-color: black;
}
article {
margin-top: 5rem;
margin-left: 10rem;
margin-right: 10rem;
}
h1 {
font-family: var(--main-font);
font-size: 125px;
letter-spacing: 20px;
}
h2 {
font-family: var(--main-font);
font-size: 20px;
letter-spacing: 5px;
line-height: 30px;
font-weight: 900;
}
p {
text-indent: 7px;
}
.box1 {
grid-column: 1/2;
grid-row: 1/2;
padding: 15px;
font-size: 11px;
text-align: left;
font-weight: 400;
letter-spacing: 0px;
line-height: 25px;
}
.box3 {
grid-column: 2/4;
grid-row: 1/3;
width: 100%;
}
.box4 {
grid-column: 1/2;
grid-row: 2/3;
padding: 15px;
font-size: 11px;
text-align: left;
font-weight: 400;
letter-spacing: 0px;
line-height: 25px;
}
.box9 {
grid-column: 3/4;
grid-row: 3/4;
align-items: stretch;
padding-top: 45px;
}
.box10 {
grid-column: 1/3;
grid-row: 4/6;
width: 100%;
}
.box12 {
grid-column: 3/4;
grid-row: 4/5;
padding-left: 15px;
padding-right: 15px;
font-size: 11px;
text-align: left;
font-weight: 400;
letter-spacing: 0px;
line-height: 25px;
align-items: baseline;
}
.box16 {
grid-column: 1/2;
grid-row: 6/7;
padding: 15px;
margin-bottom: 150px;
font-size: 11px;
text-align: left;
font-weight: 400;
letter-spacing: 0px;
line-height: 25px;
justify-content: flex-start;
align-items: baseline;
}
.box17 {
grid-column: 2/3;
grid-row: 6/7;
padding: 15px;
margin-bottom: 150px;
font-size: 11px;
text-align: left;
font-weight: 400;
letter-spacing: 0px;
line-height: 25px;
align-items: baseline;
}
.box18 {
grid-column: 3/4;
grid-row: 6/7;
padding: 15px;
margin-bottom: 150px;
font-size: 11px;
text-align: left;
font-weight: 400;
letter-spacing: 0px;
line-height: 25px;
align-items: baseline;
}
/* TIPS PAGE */
#tips-pages {
font-size: 11px;
text-align: left;
font-weight: 400;
letter-spacing: 0px;
line-height: 25px;
}
h3 {
font-family: var(--main-font);
font-size: 30px;
letter-spacing: 5px;
}
.tips-box1 {
/* this is the image of the plane */
grid-column: 1/4;
grid-row: 1/3;
padding-top: 50px;
padding-bottom: 10px;
width: 100%;
text-align: left;
justify-content: left;
}
.tips-box4 {
grid-column: 1/2;
grid-row: 3/4;
padding-top: 45px;
padding-right: 5px;
text-align: center;
letter-spacing: 0px;
line-height: 35px;
justify-content: center;
align-items: baseline;
}
.tips-box5 {
grid-column: 2/3;
grid-row: 3/4;
padding-top: 45px;
padding-left: 5px;
padding-right: 5px;
text-align: center;
letter-spacing: 0px;
line-height: 35px;
justify-content: center;
align-items: baseline;
}
.tips-box6 {
grid-column: 3/4;
grid-row: 3/4;
padding-top: 45px;
padding-left: 5px;
text-align: center;
letter-spacing: 0px;
line-height: 35px;
justify-content: center;
align-items: baseline;
}
.tips-box7 {
grid-column: 1/2;
grid-row: 4/5;
padding-top: 10px;
padding-right: 5px;
font-size: 15px;
text-align: center;
font-weight: 400;
letter-spacing: 0px;
line-height: 25px;
justify-content: center;
align-items: baseline;
}
.tips-box8 {
grid-column: 2/3;
grid-row: 4/5;
padding-top: 10px;
padding-left: 5px;
padding-right: 5px;
font-size: 15px;
text-align: center;
font-weight: 400;
letter-spacing: 0px;
line-height: 25px;
justify-content: center;
align-items: baseline;
}
.tips-box9 {
grid-column: 3/4;
grid-row: 4/5;
padding-top: 10px;
padding-left: 5px;
font-size: 15px;
text-align: center;
font-weight: 400;
letter-spacing: 0px;
line-height: 25px;
justify-content: center;
align-items: baseline;
}
.tips-box10 {
grid-column: 1/2;
grid-row: 5/6;
padding-top: 45px;
padding-right: 5px;
text-align: center;
letter-spacing: 0px;
line-height: 35px;
justify-content: center;
align-items: baseline;
}
.tips-box11 {
grid-column: 2/3;
grid-row: 5/6;
padding-top: 45px;
padding-left: 5px;
padding-right: 5px;
text-align: center;
letter-spacing: 0px;
line-height: 35px;
justify-content: center;
align-items: baseline;
}
.tips-box12 {
grid-column: 3/4;
grid-row: 5/6;
padding-top: 45px;
padding-left: 5px;
text-align: center;
letter-spacing: 0px;
line-height: 35px;
justify-content: center;
align-items: baseline;
}
.tips-box13 {
grid-column: 1/2;
grid-row: 6/7;
padding-top: 10px;
padding-right: 5px;
margin-bottom: 150px;
font-size: 15px;
text-align: center;
font-weight: 400;
letter-spacing: 0px;
line-height: 25px;
justify-content: center;
align-items: baseline;
}
.tips-box14 {
grid-column: 2/3;
grid-row: 6/7;
padding-top: 10px;
padding-left: 5px;
padding-right: 5px;
margin-bottom: 150px;
font-size: 15px;
text-align: center;
font-weight: 400;
letter-spacing: 0px;
line-height: 25px;
justify-content: center;
align-items: baseline;
}
.tips-box15 {
grid-column: 3/4;
grid-row: 6/7;
padding-top: 10px;
padding-left: 5px;
margin-bottom: 150px;
font-size: 15px;
text-align: center;
font-weight: 400;
letter-spacing: 0px;
line-height: 25px;
justify-content: center;
align-items: baseline;
}
/* CONTACT PAGE */
header {
padding-top: 75px;
padding-left: 100px;
}
.form-style {
margin: 10px auto;
max-width: 800px;
padding: 20px 12px 10px 20px;
font-family: var(--main-font);
letter-spacing: 3px;
}
.form-style li {
padding: 0;
display: block;
list-style: none;
margin: 10px 0 0 0;
}
.form-style label {
margin-bottom: 3px;
padding: 0px;
display: block;
font-size: 15px;
font-weight: 900;
}
::placeholder {
font-family: var(--main-font);
letter-spacing: 3px;
font-weight: 100;
}
.form-style input[type=text],
.form-style input[type=email],
textarea,
select {
box-sizing: border-box;
border: 1px solid lightgrey;
border-radius: 15px;
padding: 7px;
margin: 0px;
outline: none;
}
.form-style .field-divided {
width: 49%;
}
.form-style .field-long {
width: 100%;
}
.form-style .field-textarea {
height: 100px;
}
.form-style input[type=submit],
.form-style input[type=button] {
background: black;
padding: 10px 25px 10px 25px;
border: none;
border-radius: 15px;
color: white;
font-family: var(--main-font);
letter-spacing: 3px;
font-weight: 900;
}
.form-style input[type=submit]:hover,
.form-style input[type=button]:hover {
background: white;
color: black;
}
/* FOOTER */
footer {
position: fixed;
left: 0;
bottom: 0;
width: 100%;
background-color: black;
color: white;
text-align: center;
padding: 1rem;
}
#icon {
font-size: 35px;
color: white;
font-weight: 900;
padding-left: 10px;
}
.footer1 {
grid-column: 1/2;
grid-row: 1/2;
font-family: var(--main-font);
font-size: 12px;
font-weight: 400;
letter-spacing: 5px;
text-align: left;
}
.footer2 {
grid-column: 2/3;
grid-row: 1/2;
text-align: center;
font-family: var(--main-font);
font-size: 12px;
font-weight: 400;
letter-spacing: 5px;
line-height: 20px
}
.footer3 {
grid-column: 3/4;
grid-row: 1/2;
text-align: right;
font-family: var(--main-font);
font-size: 12px;
font-weight: 400;
letter-spacing: 5px;
line-height: 20px
}
/* Mobile Styles */
@media only screen and (max-width: 400px) {
.main-columns {
flex-wrap: wrap;
}
}
/* Tablet Styles */
@media only screen and (max-width: 960px) {
.main-columns {
/* Make the main columns container flex */
display: flex;
text-align: center;
}
}
@media only screen and (min-width: 401px) and (max-width: 960px) {
.main-columns p {
/* align the paragraph text to the left on a tablet */
text-align: left;
}
.main-columns section {
/* Change column size to 50% for tablets, add padding in between columns */
padding-left: 3rem;
flex-basis: 50%;
margin: 0 auto 3rem;
}
.main-columns section:last-of-type {
padding-left: 0;
}
}
.flex-container {
flex-direction: row;
flex-wrap: wrap;
}
.flex-item {
width: 50%;
}
/* Desktop Styles */
@media only screen and (min-width: 961px) {
.main-columns {
/*Makes the main section flex*/
display: flex;
flex-wrap: wrap;
}
.main-columns section {
/*Makes the main section 3-column by dividhing it by three*/
padding-left: 3rem;
flex-basis: 50%;
}
}<!DOCTYPE html>
<html lang="en">
<head>
<!-- All Page Setup goes here -->
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Brazil</title>
<!-- CUSTOM CSS -->
<link href="assets/css/styles.css" rel="stylesheet">
<!-- FONTS -->
<link rel="preconnect" href="https://fonts.gstatic.com">
<link rel="stylesheet" href="https://use.typekit.net/buy4jfz.css">
<link href="assets/fonts/fontawesome/css/all.min.css" rel="stylesheet">
<script src="https://kit.fontawesome.com/d33af56fcc.js" crossorigin="anonymous"></script>
<!-- HTML5 shiv and Respond.js IE8 support of HTML5 elements and media queries -->
<!--[if lt IE 9]>
<script src="https://oss.maxcdn.com/html5shiv/3.7.2/html5shiv.min.js"></script>
<script src="https://oss.maxcdn.com/respond/1.4.2/respond.min.js"></script>
<![endif]-->
</head>
<body>
<!-- NAVIGATION BAR -->
<nav class='top'>
<div class='logo'></div>
<ul class='menu'>
<li><a href='index.html'>HOME</a></li>
<li><a href='tips.html'>TIPS</a></li>
<li><a href='allthecountries.html'>ALL COUNTRIES</a></li>
<li><a href='about.html'>ABOUT</a></li>
<li><a href='contact.html'>CONTACT</a></li>
</ul>
</nav>
<!-- ARTICLE BEGINNING -->
<article>
<h1>BRAZIL</h1>
<div class="grid-container" id="brazil">
<!-- BOX 1 -->
<div class="grid-item box1">
<p>
Brazil is South America’s largest nation and, with five FIFA World Cup championships under their belt, home to the most decorated national soccer team in the world. It’s a country so large and varied that it defies easy generalizations. Travel to Brazil,
and you’ll find jungles, forests, beaches, mountains, rivers, and two of the world’s largest and busiest cities: São Paulo and Rio de Janeiro. Visit Brazil to discover some of the world’s most scenic landscapes.
</p>
</div>
<!-- BOX 2-->
<div class="grid-item">
</div>
<!-- BOX 3-->
<div class="grid-item box3">
<img src="assets/img/brazil.jpeg" alt="brazil image" />
</div>
<!-- BOX 4-->
<div class="grid-item box4">
<p>
Brazilians speak Portuguese, with differences in pronunciation and usage from the language spoken in Portugal. In larger urban locations, it’s common to find people who speak English. The Brazilian tourist industry is largely based around the country’s
natural beauty spots, including spectacular waterfalls, beaches, rivers, lakes, and mountains. The country is also famous for its carnivals and fiestas, with religious occasions throughout the year that occupy cities for days. Explore our Brazil
travel guide to help you get started on planning your vacation.
</p>
</div>
<!--BOX 5-->
<div class="grid-item">
</div>
<!--BOX6-->
<div class="grid-item">
</div>
<!--BOX7 -->
<div class="grid-item">
</div>
<!--- BOX 8-->
<div class="grid-item">
</div>
<!-- BOX 9 -->
<div class="grid-item box9">
<h2>Things Not to Miss in Brazil</h2>
</div>
<!-- BOX 10 -->
<div class="grid-item box10">
<img src="assets/img/brazil2.jpg" alt="brazil image" />
</div>
<div class="grid-item">
</div>
<!--box 12 -->
<div class="grid-item box12">
<p>
Sun worshippers will want to wake up early and make their way down to the beautiful, clean Ipanema Beach in Rio. Divided into sections known as postos, stretches of sand attract crowds of all different walks, both locals and travelers.Spend your day sipping
on ice-cold beers and playing (or watching) some intense sports matches. Interested in seeing one of the world’s most diverse ecosystems? Then, of course, you’ll want to check out the Amazon rainforest. Guided boat tours are the best way to
experience the nearly four million plant and animal species.
</p>
</div>
<div class="grid-item"></div>
<div class="grid-item"></div>
<div class="grid-item"></div>
<!-- BOX 16 -->
<div class="grid-item box16">
<p>
A visit to Brazil usually begins in Rio de Janeiro, one of the world's most vibrant urban landscapes, where dramatic, rainforest-crowned mountaintops surround a city nestled picturesquely between jungle and sea. The Amazon region – and its namesake river
– are home to the planet's greatest collection of plants and animals, and this enigmatic landscape has long intrigued explorers, naturalists, novelists and travelers alike. Brazil's other hotspot for biodiversity, the Pantanal, is the world's
largest wetland, where every moment throws up another photo opportunity full of colorful birds and wildlife.
</p>
</div>
<!--box 17 -->
<div class="grid-item box17">
<p>
The roar of Iguaçu Falls will redefine your idea of the power of Mother Nature; this torrent thundering over the edges of cliffs is a spectacle without rival. And in a country with no shortage of world-class beaches, the archipelago of Fernando de Noronha
serves up three of the best, and then adds the distinction of being Brazil's top spot for diving and surfing, and one of the best places on Earth to mingle with endangered sea turtles and Spinner dolphins.
</p>
</div>
<!-- box 18 -->
<div class="grid-item box18">
<p>
But wait, there's more! Pristinely preserved colonial villages (Ouro Prêto, Tiradentes, Paraty, Olinda), scenic national parks (Lençóis-Maranhenses (parquelencois.com.br), Chapada Diamantina, Chapada dos Veadeiros (whc.unesco.org/en/list/1035), Chapada
dos Guimarães), idyllic tropical islands (Ilha Grande, Ilhabela, Ilha de Santa Catarina, Morro de São Paulo, Boipeba, Ilha do Mel) and an even longer list of diverse regional cuisine and culture, from the African-fueled state of Bahía to the
heavily German and Italian-influenced states of Santa Catarina and Rio Grande do Sul, all unite in a seductive marriage that ticks off a traveler's wishlist.
</p>
</div>
</div>
</article>
<!-- FOOTER -->
<footer>
<div class="grid-container">
<!--box1 -->
<div class="grid-item footer1">
<p>follow us on</p>
<a id="icon" href="https://www.instagram.com/claro.us/" class="fab fa-instagram"></a>
</div>
<!--box 2 -->
<div class="grid-item footer2">
<p>Copyright 2020<br>Created by Claro by Antonia</p>
</div>
<!--box 3-->
<div class="grid-item footer3">
<p> All Sources from<br><a href="https://expertvagabond.com/best-travel-tips/">Expert
Vagabond</a>
</div>
</div>
</footer>
</body>
<!-- Page Content ends here -->
</html>任何帮助将是伟大的!
我只是让你的代码响应后767px(移动视图)的一个例子。使用diplay:block，你可以很容易地安排内容在手机上，而不是grid。你可以看到它的图像:https://i.ibb.co/443DfVZ/C-Projects-scroll-html-i-Phone-5-SE.png>
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
:root {
--black: #000000;
--white: #FFFFFF;
--main-font: 'Montserrat', sans-serif;
}
.st0 {
fill: red !important;
}
/* INDEX PAGE */
#main-page {
background-color: black;
color: white;
}
.grid-container {
display: grid;
grid-template-columns: auto auto auto;
}
.grid-item {
font-size: 30px;
letter-spacing: 5px;
text-align: center;
/*width: 456.2px;
height: 267.35px;*/
display: flex;
justify-content: center;
align-items: center;
font-family: var(--main-font);
font-weight: 300;
}
.grid-item img {
width: 100%;
}
.item-absolute {
position: absolute;
}
.main-box1 {
grid-column: 1/2;
grid-row: 1/2;
}
.main-box2 {
grid-column: 2/3;
grid-row: 1/2;
width: 100%;
}
.main-box3 {
grid-column: 3/4;
grid-row: 1/2;
}
.main-box4 {
grid-column: 1/2;
grid-row: 2/3;
width: 100%;
}
.main-box5 {
grid-column: 2/3;
grid-row: 2/3;
}
.main-box6 {
grid-column: 3/4;
grid-row: 2/3;
width: 100%;
}
.main-box7 {
grid-column: 1/2;
grid-row: 3/4;
}
.main-box8 {
grid-column: 2/3;
grid-row: 3/4;
width: 100%;
}
.main-box9 {
grid-column: 3/4;
grid-row: 3/4;
}
/* NAVIGATION BAR */
.top {
/*position: fixed;*/
display: flex;
justify-content: space-between;
width: 100%;
padding: 50px;
background: black;
font-family: var(--main-font);
font-weight: 500;
letter-spacing: 5px;
}
.menu {
margin-top: 10px;
}
.menu>li {
display: inline;
margin-right: 50px;
}
.menu>li:last-of-type {
margin-right: 0;
}
/* LINKS */
a:link,
a:visited {
color: white;
text-decoration: none;
}
a:hover {
color: grey;
}
/* ALL THE COUNTRIES GRID ITEMS*/
.item1 {
grid-column: 1 / 2;
grid-row: 2/4;
justify-content: center;
text-align: left;
font-size: 15px;
line-height: 45px;
padding-left: 75px;
}
.item2 {
grid-column: 5 / 7;
grid-row: 1 / 4;
text-align: right;
width: 100%;
}
/* BRAZIL */
#brazil {
background-color: white;
color: black;
}
#full-black {
background-color: black;
}
article {
margin-top: 5rem;
margin-left: 10rem;
margin-right: 10rem;
}
h1 {
font-family: var(--main-font);
font-size: 125px;
letter-spacing: 20px;
}
h2 {
font-family: var(--main-font);
font-size: 20px;
letter-spacing: 5px;
line-height: 30px;
font-weight: 900;
}
p {
text-indent: 7px;
}
.box1 {
grid-column: 1/2;
grid-row: 1/2;
padding: 15px;
font-size: 11px;
text-align: left;
font-weight: 400;
letter-spacing: 0px;
line-height: 25px;
}
.box3 {
grid-column: 2/4;
grid-row: 1/3;
width: 100%;
}
.box4 {
grid-column: 1/2;
grid-row: 2/3;
padding: 15px;
font-size: 11px;
text-align: left;
font-weight: 400;
letter-spacing: 0px;
line-height: 25px;
}
.box9 {
grid-column: 3/4;
grid-row: 3/4;
align-items: stretch;
padding-top: 45px;
}
.box10 {
grid-column: 1/3;
grid-row: 4/6;
width: 100%;
}
.box12 {
grid-column: 3/4;
grid-row: 4/5;
padding-left: 15px;
padding-right: 15px;
font-size: 11px;
text-align: left;
font-weight: 400;
letter-spacing: 0px;
line-height: 25px;
align-items: baseline;
}
.box16 {
grid-column: 1/2;
grid-row: 6/7;
padding: 15px;
margin-bottom: 150px;
font-size: 11px;
text-align: left;
font-weight: 400;
letter-spacing: 0px;
line-height: 25px;
justify-content: flex-start;
align-items: baseline;
}
.box17 {
grid-column: 2/3;
grid-row: 6/7;
padding: 15px;
margin-bottom: 150px;
font-size: 11px;
text-align: left;
font-weight: 400;
letter-spacing: 0px;
line-height: 25px;
align-items: baseline;
}
.box18 {
grid-column: 3/4;
grid-row: 6/7;
padding: 15px;
margin-bottom: 150px;
font-size: 11px;
text-align: left;
font-weight: 400;
letter-spacing: 0px;
line-height: 25px;
align-items: baseline;
}
/* TIPS PAGE */
#tips-pages {
font-size: 11px;
text-align: left;
font-weight: 400;
letter-spacing: 0px;
line-height: 25px;
}
h3 {
font-family: var(--main-font);
font-size: 30px;
letter-spacing: 5px;
}
.tips-box1 {
/* this is the image of the plane */
grid-column: 1/4;
grid-row: 1/3;
padding-top: 50px;
padding-bottom: 10px;
width: 100%;
text-align: left;
justify-content: left;
}
.tips-box4 {
grid-column: 1/2;
grid-row: 3/4;
padding-top: 45px;
padding-right: 5px;
text-align: center;
letter-spacing: 0px;
line-height: 35px;
justify-content: center;
align-items: baseline;
}
.tips-box5 {
grid-column: 2/3;
grid-row: 3/4;
padding-top: 45px;
padding-left: 5px;
padding-right: 5px;
text-align: center;
letter-spacing: 0px;
line-height: 35px;
justify-content: center;
align-items: baseline;
}
.tips-box6 {
grid-column: 3/4;
grid-row: 3/4;
padding-top: 45px;
padding-left: 5px;
text-align: center;
letter-spacing: 0px;
line-height: 35px;
justify-content: center;
align-items: baseline;
}
.tips-box7 {
grid-column: 1/2;
grid-row: 4/5;
padding-top: 10px;
padding-right: 5px;
font-size: 15px;
text-align: center;
font-weight: 400;
letter-spacing: 0px;
line-height: 25px;
justify-content: center;
align-items: baseline;
}
.tips-box8 {
grid-column: 2/3;
grid-row: 4/5;
padding-top: 10px;
padding-left: 5px;
padding-right: 5px;
font-size: 15px;
text-align: center;
font-weight: 400;
letter-spacing: 0px;
line-height: 25px;
justify-content: center;
align-items: baseline;
}
.tips-box9 {
grid-column: 3/4;
grid-row: 4/5;
padding-top: 10px;
padding-left: 5px;
font-size: 15px;
text-align: center;
font-weight: 400;
letter-spacing: 0px;
line-height: 25px;
justify-content: center;
align-items: baseline;
}
.tips-box10 {
grid-column: 1/2;
grid-row: 5/6;
padding-top: 45px;
padding-right: 5px;
text-align: center;
letter-spacing: 0px;
line-height: 35px;
justify-content: center;
align-items: baseline;
}
.tips-box11 {
grid-column: 2/3;
grid-row: 5/6;
padding-top: 45px;
padding-left: 5px;
padding-right: 5px;
text-align: center;
letter-spacing: 0px;
line-height: 35px;
justify-content: center;
align-items: baseline;
}
.tips-box12 {
grid-column: 3/4;
grid-row: 5/6;
padding-top: 45px;
padding-left: 5px;
text-align: center;
letter-spacing: 0px;
line-height: 35px;
justify-content: center;
align-items: baseline;
}
.tips-box13 {
grid-column: 1/2;
grid-row: 6/7;
padding-top: 10px;
padding-right: 5px;
margin-bottom: 150px;
font-size: 15px;
text-align: center;
font-weight: 400;
letter-spacing: 0px;
line-height: 25px;
justify-content: center;
align-items: baseline;
}
.tips-box14 {
grid-column: 2/3;
grid-row: 6/7;
padding-top: 10px;
padding-left: 5px;
padding-right: 5px;
margin-bottom: 150px;
font-size: 15px;
text-align: center;
font-weight: 400;
letter-spacing: 0px;
line-height: 25px;
justify-content: center;
align-items: baseline;
}
.tips-box15 {
grid-column: 3/4;
grid-row: 6/7;
padding-top: 10px;
padding-left: 5px;
margin-bottom: 150px;
font-size: 15px;
text-align: center;
font-weight: 400;
letter-spacing: 0px;
line-height: 25px;
justify-content: center;
align-items: baseline;
}
/* CONTACT PAGE */
header {
padding-top: 75px;
padding-left: 100px;
}
.form-style {
margin: 10px auto;
max-width: 800px;
padding: 20px 12px 10px 20px;
font-family: var(--main-font);
letter-spacing: 3px;
}
.form-style li {
padding: 0;
display: block;
list-style: none;
margin: 10px 0 0 0;
}
.form-style label {
margin-bottom: 3px;
padding: 0px;
display: block;
font-size: 15px;
font-weight: 900;
}
::placeholder {
font-family: var(--main-font);
letter-spacing: 3px;
font-weight: 100;
}
.form-style input[type=text],
.form-style input[type=email],
textarea,
select {
box-sizing: border-box;
border: 1px solid lightgrey;
border-radius: 15px;
padding: 7px;
margin: 0px;
outline: none;
}
.form-style .field-divided {
width: 49%;
}
.form-style .field-long {
width: 100%;
}
.form-style .field-textarea {
height: 100px;
}
.form-style input[type=submit],
.form-style input[type=button] {
background: black;
padding: 10px 25px 10px 25px;
border: none;
border-radius: 15px;
color: white;
font-family: var(--main-font);
letter-spacing: 3px;
font-weight: 900;
}
.form-style input[type=submit]:hover,
.form-style input[type=button]:hover {
background: white;
color: black;
}
/* FOOTER */
footer {
position: fixed;
left: 0;
bottom: 0;
width: 100%;
background-color: black;
color: white;
text-align: center;
padding: 1rem;
}
#icon {
font-size: 35px;
color: white;
font-weight: 900;
padding-left: 10px;
}
.footer1 {
grid-column: 1/2;
grid-row: 1/2;
font-family: var(--main-font);
font-size: 12px;
font-weight: 400;
letter-spacing: 5px;
text-align: left;
}
.footer2 {
grid-column: 2/3;
grid-row: 1/2;
text-align: center;
font-family: var(--main-font);
font-size: 12px;
font-weight: 400;
letter-spacing: 5px;
line-height: 20px
}
.footer3 {
grid-column: 3/4;
grid-row: 1/2;
text-align: right;
font-family: var(--main-font);
font-size: 12px;
font-weight: 400;
letter-spacing: 5px;
line-height: 20px
}
/* Mobile Styles */
@media only screen and (max-width: 400px) {
.main-columns {
flex-wrap: wrap;
}
}
/* Tablet Styles */
@media only screen and (max-width: 960px) {
.main-columns {
/* Make the main columns container flex */
display: flex;
text-align: center;
}
}
@media only screen and (min-width: 401px) and (max-width: 960px) {
.main-columns p {
/* align the paragraph text to the left on a tablet */
text-align: left;
}
.main-columns section {
/* Change column size to 50% for tablets, add padding in between columns */
padding-left: 3rem;
flex-basis: 50%;
margin: 0 auto 3rem;
}
.main-columns section:last-of-type {
padding-left: 0;
}
}
.flex-container {
flex-direction: row;
flex-wrap: wrap;
}
.flex-item {
width: 50%;
}
/* Desktop Styles */
@media only screen and (min-width: 961px) {
.main-columns {
/*Makes the main section flex*/
display: flex;
flex-wrap: wrap;
}
.main-columns section {
/*Makes the main section 3-column by dividhing it by three*/
padding-left: 3rem;
flex-basis: 50%;
}
}
@media only screen and (max-width: 767px) {
article {
margin: 1rem;
}
h1 {
font-size: 35px;
text-align: center;
}
.box1 {
grid-column: 1/4;
grid-row: 1/1;
}
.box4 {
grid-column: 1/4;
grid-row: 2/3;
}
.grid-container {
display: block;
}
.menu>li {
font-size: 12px;
}
.top {
padding: 19px;
}
}<!DOCTYPE html>
<html lang="en">
<head>
<!-- All Page Setup goes here -->
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Brazil</title>
<!-- CUSTOM CSS -->
<link href="assets/css/styles.css" rel="stylesheet">
<!-- FONTS -->
<link rel="preconnect" href="https://fonts.gstatic.com">
<link rel="stylesheet" href="https://use.typekit.net/buy4jfz.css">
<link href="assets/fonts/fontawesome/css/all.min.css" rel="stylesheet">
<script src="https://kit.fontawesome.com/d33af56fcc.js" crossorigin="anonymous"></script>
<!-- HTML5 shiv and Respond.js IE8 support of HTML5 elements and media queries -->
<!--[if lt IE 9]>
<script src="https://oss.maxcdn.com/html5shiv/3.7.2/html5shiv.min.js"></script>
<script src="https://oss.maxcdn.com/respond/1.4.2/respond.min.js"></script>
<![endif]-->
</head>
<body>
<!-- NAVIGATION BAR -->
<nav class='top'>
<div class='logo'></div>
<ul class='menu'>
<li><a href='index.html'>HOME</a></li>
<li><a href='tips.html'>TIPS</a></li>
<li><a href='allthecountries.html'>ALL COUNTRIES</a></li>
<li><a href='about.html'>ABOUT</a></li>
<li><a href='contact.html'>CONTACT</a></li>
</ul>
</nav>
<!-- ARTICLE BEGINNING -->
<article>
<h1>BRAZIL</h1>
<div class="grid-container" id="brazil">
<!-- BOX 1 -->
<div class="grid-item box1">
<p>
Brazil is South America’s largest nation and, with five FIFA World Cup championships under their belt, home to the most decorated national soccer team in the world. It’s a country so large and varied that it defies easy generalizations. Travel to Brazil,
and you’ll find jungles, forests, beaches, mountains, rivers, and two of the world’s largest and busiest cities: São Paulo and Rio de Janeiro. Visit Brazil to discover some of the world’s most scenic landscapes.
</p>
</div>
<!-- BOX 2-->
<div class="grid-item">
</div>
<!-- BOX 3-->
<div class="grid-item box3">
<img src="assets/img/brazil.jpeg" alt="brazil image" />
</div>
<!-- BOX 4-->
<div class="grid-item box4">
<p>
Brazilians speak Portuguese, with differences in pronunciation and usage from the language spoken in Portugal. In larger urban locations, it’s common to find people who speak English. The Brazilian tourist industry is largely based around the country’s
natural beauty spots, including spectacular waterfalls, beaches, rivers, lakes, and mountains. The country is also famous for its carnivals and fiestas, with religious occasions throughout the year that occupy cities for days. Explore our Brazil
travel guide to help you get started on planning your vacation.
</p>
</div>
<!--BOX 5-->
<div class="grid-item">
</div>
<!--BOX6-->
<div class="grid-item">
</div>
<!--BOX7 -->
<div class="grid-item">
</div>
<!--- BOX 8-->
<div class="grid-item">
</div>
<!-- BOX 9 -->
<div class="grid-item box9">
<h2>Things Not to Miss in Brazil</h2>
</div>
<!-- BOX 10 -->
<div class="grid-item box10">
<img src="assets/img/brazil2.jpg" alt="brazil image" />
</div>
<div class="grid-item">
</div>
<!--box 12 -->
<div class="grid-item box12">
<p>
Sun worshippers will want to wake up early and make their way down to the beautiful, clean Ipanema Beach in Rio. Divided into sections known as postos, stretches of sand attract crowds of all different walks, both locals and travelers.Spend your day sipping
on ice-cold beers and playing (or watching) some intense sports matches. Interested in seeing one of the world’s most diverse ecosystems? Then, of course, you’ll want to check out the Amazon rainforest. Guided boat tours are the best way to
experience the nearly four million plant and animal species.
</p>
</div>
<div class="grid-item"></div>
<div class="grid-item"></div>
<div class="grid-item"></div>
<!-- BOX 16 -->
<div class="grid-item box16">
<p>
A visit to Brazil usually begins in Rio de Janeiro, one of the world's most vibrant urban landscapes, where dramatic, rainforest-crowned mountaintops surround a city nestled picturesquely between jungle and sea. The Amazon region – and its namesake river
– are home to the planet's greatest collection of plants and animals, and this enigmatic landscape has long intrigued explorers, naturalists, novelists and travelers alike. Brazil's other hotspot for biodiversity, the Pantanal, is the world's
largest wetland, where every moment throws up another photo opportunity full of colorful birds and wildlife.
</p>
</div>
<!--box 17 -->
<div class="grid-item box17">
<p>
The roar of Iguaçu Falls will redefine your idea of the power of Mother Nature; this torrent thundering over the edges of cliffs is a spectacle without rival. And in a country with no shortage of world-class beaches, the archipelago of Fernando de Noronha
serves up three of the best, and then adds the distinction of being Brazil's top spot for diving and surfing, and one of the best places on Earth to mingle with endangered sea turtles and Spinner dolphins.
</p>
</div>
<!-- box 18 -->
<div class="grid-item box18">
<p>
But wait, there's more! Pristinely preserved colonial villages (Ouro Prêto, Tiradentes, Paraty, Olinda), scenic national parks (Lençóis-Maranhenses (parquelencois.com.br), Chapada Diamantina, Chapada dos Veadeiros (whc.unesco.org/en/list/1035), Chapada
dos Guimarães), idyllic tropical islands (Ilha Grande, Ilhabela, Ilha de Santa Catarina, Morro de São Paulo, Boipeba, Ilha do Mel) and an even longer list of diverse regional cuisine and culture, from the African-fueled state of Bahía to the
heavily German and Italian-influenced states of Santa Catarina and Rio Grande do Sul, all unite in a seductive marriage that ticks off a traveler's wishlist.
</p>
</div>
</div>
</article>
<!-- FOOTER -->
<footer>
<div class="grid-container">
<!--box1 -->
<div class="grid-item footer1">
<p>follow us on</p>
<a id="icon" href="https://www.instagram.com/claro.us/" class="fab fa-instagram"></a>
</div>
<!--box 2 -->
<div class="grid-item footer2">
<p>Copyright 2020<br>Created by Claro by Antonia</p>
</div>
<!--box 3-->
<div class="grid-item footer3">
<p> All Sources from<br><a href="https://expertvagabond.com/best-travel-tips/">Expert
Vagabond</a>
</div>
</div>
</footer>
</body>
<!-- Page Content ends here -->
</html>基本上可以在mediaquery之后重新定义和重新排序每个网格元素。只要把值调整到你喜欢的
.container {
display: grid;
grid-template-columns: 1fr 1fr;
row-gap: 16px;
column-gap: 16px;
}
.container div {
height: 50px;
width: 100%;
background: blue;
}
@media only screen and (max-width: 800px) {
.container {
grid-template-columns: 1fr;
row-gap: 32px;
}
}<div class="container">
<div></div>
<div></div>
<div></div>
<div></div>
</div>在媒体查询中尝试使用grid-area和order属性。与往常一样，在响应式设计中，我们应该使用相对大小的值，如fr和%，而不是绝对值，如px或cm。
一个有趣的交互式网站，学习响应式设计使用CSS网格是https://cssgridgarden.com/。