【发布时间】：2021-07-26 07:18:27
【问题描述】：
最近我试图让我的页面响应智能手机，此页面在计算机上正确显示：
但是当谈到智能手机时，我最终得到了某种“自我向上滚动效果”，只是不会让用户看到页面底部的内容：
下面我将分享此页面各自的html和CSS代码，我认为该解决方案应该在@media (min-width: 270px) and (min-height: 580px) and (max-width: 414px) and (max-height: 812px)部分中应用，但到目前为止我已经尝试了一切以了解为什么会出现这个错误，但我所有的努力徒劳无功，因此，如果有人可以帮助我，我将不胜感激，这只是使我的网站正常运行所需的最后一件事:)
html
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>My Goals</title>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.13.0/css/all.min.css">
<link href="goalsstyle.css" rel="stylesheet">
</head>
<body>
<div class="s">
<a href="index.html">Return to Index<i class="fas fa-hand-point-left"></i></a>
</div>
<script>
function createSquare(){
const section = document.querySelector('section');
const square = document.createElement('span');
var size = Math.random()*60;
square.style.width = 30+size+'px';
square.style.height = 30+size+'px';
square.style.top = Math.random()*innerHeight+'px';
square.style.left = Math.random()*innerWidth+'px';
section.appendChild(square);
setTimeout(() =>{
square.remove()
},1480)
}
setInterval(createSquare , 150)
</script>
<section>
<div class="container">
<div class="card">
<div class="imgBx">
<img src="secretlogo.png">
</div>
<div class="content">
<h2>sCOP</h2>
<p>To develop a <a href="https://build.scrt.network/dev/secret-contracts.html" style="color: #ffffff" target="_blank">Secret Smart Contract</a> which mints a stablecoin pegged to the value of the Colombian Peso to allow local investors allocate portions of their portfolios to it instead of having to cash them out on centralized exchanges such as Binance.</p>
</div>
</div>
<div class="card">
<div class="imgBx">
<img src="Chainlink.png" width="600" height="600">
</div>
<div class="content">
<h2 style="font-size:19px;">Provably Secure Gaming Application</h2>
<p>To build a provably secure gaming application with <a href="https://chain.link/solutions/chainlink-vrf" style="color: #2A79FF" target="_blank">Chainlink VRF</a> that allows users to spend LINK tokens to play an arcade-like game which would reward them with a Dynamic NFT if they win, such Dynamic NFTs could be traded freely on the market.</p>
</div>
</div>
<div class="card">
<div class="imgBx">
<img src="Elon Mask NFT.png" width="445" height="600">
</div>
<div class="content">
<h2 style="font-size:19px;">Private Meme Coin</h2>
<p>To develop a private meme coin based on and launch it into the market just for fun, depending on the success and its community, to add new innovative features (such as lending/borrowing, for instance) to make it more valuable and would be a must.</p>
</div>
</div>
</div>
</section>
<h3>Noah Verner</h3>
<header></header>
<main>
<article></article>
<aside></aside>
</main>
<footer>Made by NOAH VERNER</footer>
<script type="text/javascript" src="vanilla-tilt.js"></script>
<script>VanillaTilt.init(document.querySelectorAll(".card"),{max: 19, speed: 400});</script>
</body>
</html>
CSS：
@font-face {
src: url(Fonts/InputSerifCondensed-Regular.ttf);
font-family: InputSerif;
}
* {
font-family: InputSerif;
}
body {
background-color: #F5DC00;
overflow: hidden;
margin: 0;
padding: 0;
color: #000000;
box-sizing: border-box;
display: flex;
justify-content: center;
align-items: center;
min-height: 100vh;
}
section {
min-height: 100vh;
}
.container {
position: relative;
display: flex;
justify-content: center;
align-items: center;
flex-wrap: wrap;
}
.container .card{
position: relative;
width: 430px;
height: 620px;
margin: 150px 30px;
display: flex;
justify-content: center;
align-items: center;
flex-direction: column;
background: rgba(0, 0, 0, 0.85);
box-shadow: 0 10px 25px rgba(0, 0, 0, 0.5);
border-radius: 15px;
border-top: 1px solid rgba(255, 255, 255, 0.5);
border-left: 1px solid rgba(255, 255, 255, 0.5);
backdrop-filter: blur(15px);
}
.container .card .content {
position: absolute;
bottom: 0px;
display: flex;
justify-content: center;
align-items: center;
flex-direction: column;
padding: 10px;
}
.container .card .content h2 {
color: #ffffff;
display: flex;
justify-content: center;
padding: 0px 0px;
}
.container .card .content p {
color: #ffffff;
font-size: 18px;
}
.container .card .imgBx {
position: relative;
bottom: 120px;
transform: scale(0.5);
display: flex;
justify-content: center;
align-items: center;
flex-direction: column;
padding: 30px;
}
.container .card. .imgBx img {
max-width: 100%;
margin: 0 0 20px;
}
span {
position: absolute;
pointer-events: none;
background: #000;
animation: animate 2s infinite running;
}
@keyframes animate {
0% {transform: scale(0) translateY(0) rotate(0deg); opacity: 1;}
10% {opacity: 1;}
45% {opacity: 1;}
85% {opacity: 0;}
100%{transform: scale(1.5) translateY(-1200%) rotate(445deg); opacity: 0;}
}
h3 {
position: fixed;
top: -20px ;
font-size: 12px;
width: 100%;
background-color: black;
color: white;
font-size: 20px;
text-align: center;
}
footer {
position: fixed;
bottom: 0px;
width: 100%;
background-color: black;
color: white;
font-weight: bold;
text-align: center;
}
/*Barra de iconos de redes sociales*/
.s {
position: absolute;
justify-content: center;
height: 100vh;
display: flex;
left: 0;
flex-direction: column;
transform: translate(-82.5%);
}
.s a {
color: #F5DC00;
background: rgba(0, 0, 0, 1);
font-size: 20px;
font-weight: 600;
text-decoration: none;
display: block;
margin: 5px;
padding: 20px;
width: 300px;
text-align: right;
border-radius: 50px;
transition: 1s;
transition-property: transform;
}
.s a:hover {
transform: translate(200px, 0);
}
.s i {
margin-left: 10px;
font-size: 30px;
width: 30px;
height: 30px;
}
.s a:nth-child(1) i {
color: #F5DC00;
}
@media (min-width: 270px) and (min-height: 580px) and (max-width: 414px) and (max-height: 812px) {
.s {
position: absolute;
justify-content: center;
height: 100vh;
display: flex;
left: 0;
flex-direction: column;
transform: translate(-82.5%);
z-index: 2;
}
.s a {
color: #F5DC00;
background: rgba(0, 0, 0, 1);
font-size: 20px;
font-weight: 600;
text-decoration: none;
display: block;
margin: 2px;
padding: 8px;
width: 250px;
text-align: right;
border-radius: 50px;
transition: 1s;
transition-property: transform;
}
.container {
position: relative;
left: 8px;
display: flex;
max-width: 330px;
flex-direction: column;
}
.container .card {
position: relative;
width: 200px;
height: 250px;
margin: 5px;
box-shadow: 20px 20px 50px rgba(0, 0, 0, 0.5);
border-radius: 15px;
background: rgba(0, 0, 0, 0.85);
display: flex;
justify-content: center;
align-items: center;
border-top: 1px solid rgba(255, 255, 255, 0.5);
border-left: 1px solid rgba(255, 255, 255, 0.5);
bakcdrop-filter: blur(5px);
}
.container .card .content h2 {
position: fixed;
top: 90px;
font-size: 9px !important;
}
.container .card .content p {
position: fixed;
bottom: 10px;
left: 10px;
font-size: 10.2px;
}
.container .card .imgBx {
position: relative;
bottom: 80px;
transform: scale(0.12);
display: flex;
justify-content: center;
align-items: center;
flex-direction: column;
padding: 30px;
}
.container .card. .imgBx img {
max-width: 100%;
margin: 0 0 20px;
}
footer {
position: fixed;
width: 100%;
background-color: black;
color: white;
font-weight: bold;
}
}
【问题讨论】：
标签： css responsive-design scrollbar responsive