预期的结果是框缩放 向下并适合页面的中心 而不会离开页面的一侧。 然而，实际的结果是它熄灭了 当我缩小到一些时页面的一侧 尺寸。我真的不想添加另一个 屏幕尺寸，因为我觉得我有 已经足够了。谁能帮忙 有这个问题的解决方案，谢谢。
html:
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-
width,
initial-scale=1.0">
<title>Student Hacks</title>
<link rel="stylesheet" href="css/styles.css">
<link rel="icon" href="img/pencil.png">
</head>
<body class="grid">
<header>
<img class="logo" href="index.html" src="img/student-hacks-logo.png" alt="Logo">
</header>
<div class="menu" id="menu-toggle"></div>
<nav id="menu-nav">
<a class="home" href="index.html">HOME</a>
<a class="money" href="money.html">MONEY</a>
<a class="study" href="study.html">STUDY</a>
<a class="faqs" href="faqs.html">FAQs</a>
</nav>
<main>
<div class="container">
<img src="img/moneysaving.jpg" alt="image of money">
<div class="text">Money Tips & Tricks</div>
</div>
<div class="animation"></div>
<h2 class="heading">Ways To Save Money</h2>
<hr class="index-hr-1">
<h3>Evening Shopping!</h3>
<p class="rcorners2">Shop in the evenings, this way
there will be a lot more discounted items. There are
sometimes dedicated shopping isles for discounted
items.</p>
<h3>Student Discounts!</h3>
<p class="rcorners2">UniDays and NUS are great ways
to save money. They provide student discount cards
that are compatible with many stores and restaurants.</p>
<h3>Travel Cards!</h3>
<p class="rcorners2">Purchase a 16-25 railcard to travel for
discounted prices. If you have a 123 Student Bank Account
with santander, you get the card for free!</p>
<h3>Budget, Budget, Budget!</h3>
<p class="rcorners2">When you receive your student loan,
start budgeting it out on essentials. Budget food, books,
rent,bills, etc. This lets you know where all your money
is going.</p>
</main>
<footer class="footer">
<p class="footer-writing">Student Hacks© 2018</p>
</footer>
<script src="js/scripts.js"></script>
</body>
</html>
css:
body {
margin: 0;
padding: 0;
width: 100%;
font-family: "Courier New", Courier,
monospace;
font-weight: normal;
font-size: 1rem;
color: black;
}
html {
margin: 0;
padding: 0;
width: 100%;
}
.grid {
display: grid;
grid-template-columns: 1fr;
grid-template-areas:
"header"
"menu"
"content"
"footer";
}
header {
grid-area: header;
background: #e5e5e5;
height: 100px;
}
.logo {
width: 350px;
height: 90px;
margin: auto;
display: block;
}
nav {
grid-area: menu;
justify-content: center;
flex-direction: row;
}
nav a {
padding: 0;
color: black;
background: #bfbfbf;
text-decoration: none;
transition: all 0.5s;
width: 100%;
text-align: center;
float: right;
}
nav a:hover {
color: #dfd;
background: #7d8687;
}
.home {
height: 3vh;
}
.money {
height: 3vh;
}
.study {
height: 3vh;
}
.faqs {
height: 3vh;
}
main {
grid-area: content;
/* increasing the height of one element increases all row heights */
background-color: #e5e5e5;
}
h3 {
text-align: center;
}
.container img {
width: 100%;
height: 200px;
}
.text {
color: #94FCDD;
font-size: 30px;
font-weight: bold;
position: absolute;
top: 35%;
left: 50%;
transform: translate(-50%,-50%);
text-align: center;
text-shadow: 4px 2px 2px #000;
}
footer {
grid-area: footer;
background-color: #CDCDCD;
position: sticky;
bottom: 0;
left: 0;
right: 0;
height: 50px;
}
.footer-writing {
text-align: center;
}
.panel {
padding: 0 18px;
background-color: white;
max-height: 0;
overflow: hidden;
transition: max-height 0.2s ease-out;
text-align: center;
}
.heading {
text-align: center;
font-size: 3rem;
}
.faq-hr-1 {
/* border: dashed 1.5px;
width: 35%;
margin-bottom: 75px;
margin-top: 35px; */
height: 10px;
border: 0;
margin-bottom: 30px;
margin-top: 5px;
box-shadow: 0 10px 10px -10px #8c8b8b inset;
}
.index-hr-1 {
height: 10px;
border: 0;
margin-bottom: 30px;
margin-top: 5px;
box-shadow: 0 12px 12px -10px #8c8b8b inset;
}
.about-us-text {
text-align: center;
font-size: 1.2rem;
margin-left: 25px;
margin-right: 25px;
}
ul {
list-style-type: none;
display: table;
width: 90%;
border-spacing: 0 10px;
}
li {
display: table-row;
}
li strong, li .txt, li .langs {
display: table-cell;
vertical-align: middle;
}
img {
display: table-cell;
padding-right: 10px;
}
li .txt {
width: 60%;
padding-right: 10px;
}
li:nth-child(even) {
background: #eee;
}
.wiki-label {
text-align: center;
font-size: 1em;
margin-left: 10%;
}
.submit-btn {
margin-left: 2%;
}
.rcorners2 {
border-radius: 35px;
border: 5px solid #94FCDD;
margin-left: 20%;
margin-right: 40%;
padding: 20px;
width: 200px;
height: 115px;
font-size: 0.9rem;
text-align: center;
}
@media screen and (min-width: 500px) {
/* applies to screens wider than 499px */
body {
background: #e5e5e5;
}
.grid {
grid-template-columns: 1fr 1fr 1fr;
/*grid-template-rows: 1fr 1fr 1fr 1fr;*/
/*or set the rows to 'view height (vh)'*/
grid-template-areas:
"header header header"
"menu menu menu"
"content content content"
"footer footer footer";
}
nav {
display: flex;
flex-direction: row;
line-height: 1.5em;
}
nav a:hover {
color: #dfd;
background: #7d8687;
}
.logo {
width: 400px;
height: 150px;
}
.container img {
width: 100%;
height: 400px;
}
.text {
color: #94FCDD;
font-size: 30px;
font-weight: bold;
position: absolute;
top: 45%;
left: 50%;
transform: translate(-50%,-50%);
text-align: center;
text-shadow: 4px 2px 2px #000;
}
header {
height: 150px;
}
.rcorners2 {
border-radius: 35px;
border: 5px solid #94FCDD;
padding: 10px;
margin-left: 20%;
margin-right: 20%;
width: 400px;
height: 145px;
font-size: 1.2rem;
text-align: center;
font-weight: bold;
}
/* DESKTOP STYLES */
@media screen and (min-width: 1000px) {
/* applies to screens wider than 999px */
body {
background: white;
}
.grid {
grid-template-columns: 1fr 1fr 1fr;
/*grid-template-rows: 1fr 1fr 1fr 1fr;*/
/*or set the rows to 'view height (vh)'*/
grid-template-areas:
"header header header"
"menu menu menu"
"content content content"
"footer footer footer";
}
.rcorners2 {
border-radius: 35px;
border: 5px solid #94FCDD;
padding: 10px;
margin-left: 20%;
margin-right: 40%;
width: 800px;
height: 70px;
font-size: 1.2rem;
text-align: center;
}
.container img {
width: 100%;
height: 600px;
}
.text {
color: #94FCDD;
font-size: 30px;
font-weight: bold;
position: absolute;
top: 52%;
left: 50%;
transform: translate(-50%,-50%);
text-align: center;
text-shadow: 4px 2px 2px #000;
}
最佳答案
我看到您正在使用媒体查询，这很棒。但是你有一个错字。您打开了媒体查询但从未关闭它们。
例子:
@media screen and (min-width: 1000px) {
body {
background: white;
}
**}**
不要忘记关闭媒体查询。
同时在浏览器中检查这些错误发生的位置，您可以随时添加更多媒体查询来纠正这种情况。祝你好运!
关于javascript - 当我缩小页面时，类 "rcorners2"的框在某些部分离开了页面。我该如何解决这个问题，以便它顺利缩小？，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/54064797/