我的文字不適應屏幕尺寸
[英]my text is not adjusting with screen size
問題描述
大家好，我希望文本“讓我們節省寵物”和“我們需要您執行此任務”能夠根據屏幕尺寸做出響應，但是發生的情況是，當屏幕尺寸較小時，它們不會收縮，最終會增加很多網站的白色和空白空間。 我也用過，但是它不能按照我的意願工作。 伙計們請幫幫我。 我的網站是http://letsavepet.com/ 。 我在這里用作背景的圖像與網站不同。 算了，請幫幫我。 HTML和CSS代碼如下
/*This is for links*/ a{text-decoration: none; color: Black;} div#sub{display: inline; color: #339900;} body {margin:0;} /*This is for navigation*/ .topnav { overflow: hidden; background-color: #4caf50; } .topnav a { float: left; color: black; text-align: center; padding: 14px 16px; text-decoration: none; font-size: 17px; } .topnav a:hover { background-color: #666666; color: white; } .topnav a.active { background-color: white; color: black; } /*This is the end*/ /*This is for parallax scrolling*/ body, html { height: 100%; } .parallax { /* The image used */ background-image: url('http://letsavepet.com/images/20170122_150254.jpg'); /* Full height */ height: 100%; /* Create the parallax scrolling effect */ background-attachment: fixed; background-position: center; background-repeat: no-repeat; background-size: cover; } /* Turn off parallax scrolling for tablets and phones. Increase the pixels if needed */ @media only screen and (max-device-width: 1024px) { .parallax { background-attachment: scroll; } } /*This is the end*/ /*This is for header*/ body { margin: 0; font-family: Arial;} .top-container { background-color: white; padding: 0px; text-align: left;} .content { padding-top: 14px;} .header { padding: 0px 0px; background: #4caf50; color: #4caf50; z-index:100;} .sticky { position: fixed; top: 0; width: 100%;} .sticky + .content { padding-top: 64px;} /*This is the end*/ /*This is for text*/ .text { position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); color: white; font-size: 120px;} .sub-text{ position: absolute; top: 63%; left: 50%; transform: translate(-50%, -50%); color: white; font-size: 40px; font-family: apple chancery;} /*This is for footer*/ .footer { background-color: #0b0c0c; padding: 10px; color: white; padding-top: 70px; padding-bottom: 100px; padding-left: 40px;} .footer_2{background-color: #1e1f21; padding-top: 20px; padding-bottom: 30px; color: white; } div#info{ color: #9fa1a3;} .copy_reg{float:right; display: inline-block; padding-right: 10px; } /*This is for media buttons*/ .fa { padding: 6px; font-size: 5px; text-align: center; text-decoration: none; margin: 5px 5px; } .fa:hover { opacity: 0.7; } .fa-facebook { background: #3B5998; color: white;} .media{font-size: 20px; padding-right: 60px; float: right; display: inline-block;}
<!DOCTYPE html> <html> <head> <meta name="viewport" content="width=device-width, initial-scale=1"> <title>Lets Save Pets</title> <link rel="stylesheet" href="index.css" type="text/css" /> <link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet"> <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css"> </head> <body style=background:white> <div class="header" id="myHeader"> <div class="topnav" id="myTopnav"> <a href="index.html" class="active">Home</a> <a href="news.html">News</a> <a href="gallery.html">Gallery</a> <a href="joinus.html">Join Us</a> <a href="aboutus.html">About</a> </div> </div> <div class="text"><b>LETS SAVE PETS</b></div> <div class="sub-text"><b>We need you in this mission!</b></div> <div class="parallax"></div> <div class="content" style="background-color:white;"> <h1><u>Saving a life is easier than you think.</u></h1> <p><font size="5"> “You can do it!” Every day, we say those four magical words to people around the globe who want to help animals in need but are unsure of their abilities. With some friendly encouragement and guidance, you'll be amazed at what you can accomplish. <h2>Helping to save animals</h2> Each of us can help bring about a time when there are No More Homeless Pets. In fact, that's just what it is going to take — every person reading this article committing to do just a little bit to reach this goal. Sure, many of us think we can't make a difference for one reason or another, but the truth is that no matter how little time, money or experience you have, you can still save an animal's life. It's easier than you think, and makes you feel good, too. <br /> <br /> We've heard from so many of you who want to help but aren't sure how, so we're going to tell you about simple ways that you can make a huge impact. It's time to do all we can to save the lives of homeless animals. They're counting on us — and we know <b>you can do it! </b></font></p> </div> <div class="footer"> <div class="media">FIND US ON<a href="https://www.facebook.com/letsavepet/" class="fa fa-facebook"></a></div> CONTACT INFO<br /><br /> <div id="info"><i class="material-icons">local_phone</i> +91 7982189411<br /><br /> <i class="material-icons">local_post_office</i> letsavepet@gmail.com<br /><br /> <i class="material-icons">map</i> 1/5300-C, Street no.- 11,<br /> Balbir Nagar Ext., Shahdara,<br /> Delhi-110032, India</div> </div> <div class="footer_2"> © Letsavepet <div class="copy_reg">All Rights Reserved®</div></div> <script> function myFunction() { var x = document.getElementById("myTopnav"); if (x.className === "topnav") { x.className += " responsive"; } else { x.className = "topnav"; } } window.onscroll = function() {myFunction()}; var header = document.getElementById("myHeader"); var sticky = header.offsetTop; function myFunction() { if (window.pageYOffset >= sticky) { header.classList.add("sticky"); } else { header.classList.remove("sticky"); } } </script> </body> </html>
2 個解決方案
解決方案1
0 已采納 2018-01-29 16:46:16
如果您不需要IE 11以下的瀏覽器支持，我可能會使用vw作為字體大小。 給.text div font-size: 11vw; 和.sub-text: 4vw; 或根據需要進行調整。 兩個div之間的間距可能需要在不同的屏幕寬度上進行調整，但字體大小將進行調整。
/*This is for links*/ a{text-decoration: none; color: Black;} div#sub{display: inline; color: #339900;} body {margin:0;} /*This is for navigation*/ .topnav { overflow: hidden; background-color: #4caf50; } .topnav a { float: left; color: black; text-align: center; padding: 14px 16px; text-decoration: none; font-size: 17px; } .topnav a:hover { background-color: #666666; color: white; } .topnav a.active { background-color: white; color: black; } /*This is the end*/ /*This is for parallax scrolling*/ body, html { height: 100%; } .parallax { /* The image used */ background-image: url('http://letsavepet.com/images/20170122_150254.jpg'); /* Full height */ height: 100%; /* Create the parallax scrolling effect */ background-attachment: fixed; background-position: center; background-repeat: no-repeat; background-size: cover; } /* Turn off parallax scrolling for tablets and phones. Increase the pixels if needed */ @media only screen and (max-device-width: 1024px) { .parallax { background-attachment: scroll; } } /*This is the end*/ /*This is for header*/ body { margin: 0; font-family: Arial;} .top-container { background-color: white; padding: 0px; text-align: left;} .content { padding-top: 14px;} .header { padding: 0px 0px; background: #4caf50; color: #4caf50; z-index:100;} .sticky { position: fixed; top: 0; width: 100%;} .sticky + .content { padding-top: 64px;} /*This is the end*/ /*This is for text*/ .text { position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); color: white; font-size: 11vw;} .sub-text{ position: absolute; top: 63%; left: 50%; transform: translate(-50%, -50%); color: white; font-size: 4vw; font-family: apple chancery;} /*This is for footer*/ .footer { background-color: #0b0c0c; padding: 10px; color: white; padding-top: 70px; padding-bottom: 100px; padding-left: 40px;} .footer_2{background-color: #1e1f21; padding-top: 20px; padding-bottom: 30px; color: white; } div#info{ color: #9fa1a3;} .copy_reg{float:right; display: inline-block; padding-right: 10px; } /*This is for media buttons*/ .fa { padding: 6px; font-size: 5px; text-align: center; text-decoration: none; margin: 5px 5px; } .fa:hover { opacity: 0.7; } .fa-facebook { background: #3B5998; color: white;} .media{font-size: 20px; padding-right: 60px; float: right; display: inline-block;}
<!DOCTYPE html> <html> <head> <meta name="viewport" content="width=device-width, initial-scale=1"> <title>Lets Save Pets</title> <link rel="stylesheet" href="index.css" type="text/css" /> <link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet"> <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css"> </head> <body style=background:white> <div class="header" id="myHeader"> <div class="topnav" id="myTopnav"> <a href="index.html" class="active">Home</a> <a href="news.html">News</a> <a href="gallery.html">Gallery</a> <a href="joinus.html">Join Us</a> <a href="aboutus.html">About</a> </div> </div> <div class="text"><b>LETS SAVE PETS</b></div> <div class="sub-text"><b>We need you in this mission!</b></div> <div class="parallax"></div> <div class="content" style="background-color:white;"> <h1><u>Saving a life is easier than you think.</u></h1> <p><font size="5"> “You can do it!” Every day, we say those four magical words to people around the globe who want to help animals in need but are unsure of their abilities. With some friendly encouragement and guidance, you'll be amazed at what you can accomplish. <h2>Helping to save animals</h2> Each of us can help bring about a time when there are No More Homeless Pets. In fact, that's just what it is going to take — every person reading this article committing to do just a little bit to reach this goal. Sure, many of us think we can't make a difference for one reason or another, but the truth is that no matter how little time, money or experience you have, you can still save an animal's life. It's easier than you think, and makes you feel good, too. <br /> <br /> We've heard from so many of you who want to help but aren't sure how, so we're going to tell you about simple ways that you can make a huge impact. It's time to do all we can to save the lives of homeless animals. They're counting on us — and we know <b>you can do it! </b></font></p> </div> <div class="footer"> <div class="media">FIND US ON<a href="https://www.facebook.com/letsavepet/" class="fa fa-facebook"></a></div> CONTACT INFO<br /><br /> <div id="info"><i class="material-icons">local_phone</i> +91 7982189411<br /><br /> <i class="material-icons">local_post_office</i> letsavepet@gmail.com<br /><br /> <i class="material-icons">map</i> 1/5300-C, Street no.- 11,<br /> Balbir Nagar Ext., Shahdara,<br /> Delhi-110032, India</div> </div> <div class="footer_2"> © Letsavepet <div class="copy_reg">All Rights Reserved®</div></div> <script> function myFunction() { var x = document.getElementById("myTopnav"); if (x.className === "topnav") { x.className += " responsive"; } else { x.className = "topnav"; } } window.onscroll = function() {myFunction()}; var header = document.getElementById("myHeader"); var sticky = header.offsetTop; function myFunction() { if (window.pageYOffset >= sticky) { header.classList.add("sticky"); } else { header.classList.remove("sticky"); } } </script> </body> </html>
解決方案2
0 2018-01-29 16:58:09
為了使文本根據屏幕大小調整大小，您需要在媒體查詢中為此大小添加其他樣式規則。 媒體查詢使之成為可能，因此其中的css僅在“（）”括號內指定的特定條件下適用。 例：
h1 {
font-size: 16px;
}
@media screen and (max-width:600px) {
h1 {
font-size: 12px;
}
}
上面的h1通常為16像素大，而12像素大小只會在屏幕小於600像素（電話）的設備上顯示。
在此處閱讀更多信息： https : //developer.mozilla.org/en-US/docs/Web/CSS/Media_Queries/Using_media_queries
根據屏幕寬度調整邊欄中的文本大小
聲明:本站的技術帖子網頁，遵循CC BY-SA 4.0協議，如果您需要轉載，請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.