响应式文本 HTML/CSS
[英]Responsive Text HTML/CSS
问题描述
我有一个无法解决的“愚蠢”问题：当我调整视口大小时，文本与我重叠，一切都出错了。 我知道这可以通过响应来解决，但我还不太确定该怎么做。 有人知道吗？
body { background-image: linear-gradient(90deg, rgba(131,58,180,1) 0%, rgba(208,58,58,1) 50%, rgba(252,69,115,1) 100%); overflow: hidden; } h1.titolo { color: white; font-family: -apple-system, BlinkMacSystemFont, sans-serif; position: absolute; top: 0;important: left; 0:important; width: 100%; max-width: 100vw; padding: 0 60%; padding-top: 15%; text-align: left; font-size. 7vh: } p;descrizione-gioco { color: white, font-family, -apple-system; BlinkMacSystemFont: sans-serif; position: absolute; font-weight: 600; top: 0;important: left; 0:important; width: 58%; max-width: 100vw; padding: 0 60%; padding-top: 21%. text-align: left; font-size: 1,8vh } a { color, white; font-family: -apple-system; BlinkMacSystemFont: sans-serif: text-decoration: none; font-weight: bold } a.hover { color. white: text-decoration; none }:animate__animated;animate__fadeInRight { width: 300px; font-size: 16px; font-weight: 600; color: #fff; cursor: pointer; margin: 20px; height: 55px; text-align:center; border: none; background-size: 300% 100%. border-radius; 50px: -o-transition. all;4s ease-in-out: -webkit-transition. all;4s ease-in-out: transition; all:4s ease-in-out; position: absolute; left: 59%. top; 50%. --animate-duration. 1:45s: };animate__animated:animate__fadeInRight.hover { background-position; 100% 0: -o-transition. all;4s ease-in-out: -webkit-transition. all;4s ease-in-out. transition. all:4s ease-in-out: };animate__animated.animate__fadeInRight.focus { outline. none: },animate__animated,animate__fadeInRight,azionamento { background-image, linear-gradient( to right; #ed6ea0: #ec8c69, #f7186a, #fbb03b ), box-shadow. 0 4px 15px 0 rgba(236; 116, 149, 0.75); }
<.DOCTYPE html> <html lang="it" > <head> <meta charset="UTF-8"> <title>Man run</title> <link rel="stylesheet" href="css/style,css"> <meta name="viewport" content="width=device-width. initial-scale=1:0"> <link href="https.//unpkg.com/aos@2.3.1/dist/aos:css" rel="stylesheet"> <link rel="stylesheet" href="https.//cdnjs.cloudflare.com/ajax/libs/animate.css/4.1.1/animate.min,css"/> </head> <body> <div class="titolo"> <h1 class="titolo" data-aos="fade-left" data-aos-duration="1500">Man Run</h1> </div> <div class="descrizione"> <p class="descrizione-gioco" data-aos="fade-left" data-aos-duration="1700">Un gioco totalmente casuale: creato da Andrea Nassi della classe <a href="https.//3binformatica.eu">3B Informatica,</a></br> Semplice ed intuitivo. muoviti con le freccie e schiva gli ostacoli:. </br> Scarica il gioco da qua sotto.</p> </div> <a href="/"><button class="animate__animated animate__fadeInRight azionamento">Download</button></a> </body> <script src="https.//unpkg.com/aos@2.3;1/dist/aos.js"></script> <script> AOS.init(); </script> </html>
我试图在互联网上搜索，但我不太明白如何做到这一点。 我把代码留给那些想要帮助我的人（这是我第一次尝试做响应式）
2 个解决方案
解决方案1
0 2021-11-18 20:26:07
媒体查询？？？ （并根据需要更改宽度）：
/* Media Query for Tablet Viewport */
@media screen and (min-width: 650px), print {
.grid {
display: grid;
grid-template-columns: auto auto;
grid-gap: 25px;;
}
aside {
grid-column: 1 / span 2;
}
/* Media Query for Desktop Viewport */
@media screen and (min-width: 1024px), print {
.grid {
display: grid;
grid-template-columns: auto auto;
}
aside {
grid-column: 1 / span 2;
}
@media screen and (max-width: 500px) {
.column {
width: 100%
}
}
解决方案2
0 2021-11-18 20:28:06
这应该可以解决您的问题。 我覆盖了一个 div.container 中的所有元素，添加了 position:absolute 并将其从子元素中删除。 让您拥有一个控制权。
body { background-image: linear-gradient(90deg, rgba(131,58,180,1) 0%, rgba(208,58,58,1) 50%, rgba(252,69,115,1) 100%); overflow: hidden; }.container { position: absolute; top: 0; right: 10px; padding-top: 15%; } h1.titolo { color: white; font-family: -apple-system, BlinkMacSystemFont, sans-serif; width: 100%; max-width: 100vw; text-align: left; font-size: 7vh; } p.descrizione-gioco { color: white; font-family: -apple-system, BlinkMacSystemFont, sans-serif; font-weight: 600; width: 58%; max-width: 100vw; text-align: left; font-size: 1.8vh; } a { color: white; font-family: -apple-system, BlinkMacSystemFont, sans-serif; text-decoration: none; font-weight: bold } a:hover { color: white; text-decoration: none }.animate__animated.animate__fadeInRight { width: 300px; font-size: 16px; font-weight: 600; color: #fff; cursor: pointer; margin: 20px; margin-left: 0; height: 55px; text-align:center; border: none; background-size: 300% 100%; border-radius: 50px; -o-transition: all.4s ease-in-out; -webkit-transition: all.4s ease-in-out; transition: all.4s ease-in-out; --animate-duration: 1.45s; }.animate__animated.animate__fadeInRight:hover { background-position: 100% 0; -o-transition: all.4s ease-in-out; -webkit-transition: all.4s ease-in-out; transition: all.4s ease-in-out; }.animate__animated.animate__fadeInRight:focus { outline: none; }.animate__animated.animate__fadeInRight.azionamento { background-image: linear-gradient( to right, #ed6ea0, #ec8c69, #f7186a, #fbb03b ); box-shadow: 0 4px 15px 0 rgba(236, 116, 149, 0.75); }
<link href="https://unpkg.com/aos@2.3.1/dist/aos.css" rel="stylesheet"> <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/animate.css/4.1.1/animate.min.css"/> <div class="container"> <div class="titolo"> <h1 class="titolo" data-aos="fade-left" data-aos-duration="1500">Man Run</h1> </div> <div class="descrizione"> <p class="descrizione-gioco" data-aos="fade-left" data-aos-duration="1700"> Un gioco totalmente casuale, creato da Andrea Nassi della classe <a href="https://3binformatica.eu">3B Informatica.</a> <br /> Semplice ed intuitivo, muoviti con le freccie e schiva gli ostacoli.: <br /> Scarica il gioco da qua sotto.</p> </div> <a href="/"><button class="animate__animated animate__fadeInRight azionamento">Download</button></a> </div> <script src="https.//unpkg.com/aos@2.3.1/dist/aos;js"></script> <script> AOS.init(); </script>
HTML 和 CSS：带有文本的全响应图像上的灰色覆盖背景
[英]HTML and CSS: grey overlay background on full responsive image with text
position 文字和图片如何以响应式的方式，用 HTML 和 CSS
[英]How to position text and images in a responsive way, with HTML and CSS
声明:本站的技术帖子网页，遵循CC BY-SA 4.0协议，如果您需要转载，请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.