我的文字没有调整屏幕大小

时间：2018-01-29 16:35:22

标签： html css

嘿伙计们，我想要那些文字＆＃34; LETS SAVE PETS＆＃34;和＃34;我们需要你完成这项任务＆＃34;根据屏幕尺寸做出响应，但是当屏幕尺寸很小时，它们不会缩小，最终会给网站增加大量白色和空白空间。我也用过，但根据我的意愿，它不起作用。伙计们请帮帮我。我的网站是http://letsavepet.com/。我在这里用于背景的图像与网站不同。忘记这一点，请帮助我。 HTML和CSS代码如下

＆＃13;
＆＃13; 
/*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;}
＆＃13; 
<!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&nbsp;SAVE&nbsp;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&nbsp;US&nbsp;ON<a href="https://www.facebook.com/letsavepet/" class="fa fa-facebook"></a></div>
CONTACT&nbsp;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">&nbsp;&nbsp; &copy; Letsavepet
<div class="copy_reg">All Rights Reserved&reg;</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>
＆＃13;
＆＃13;
＆＃13;

2 个答案:

答案 0 :(得分：0)

如果您不需要IE 11以下的浏览器支持，我可能会使用vw作为字体大小。提供.text div font-size: 11vw;和.sub-text: 4vw;或根据需要进行调整。两个div之间的空间可能需要在不同的屏幕宽度下调整，但字体大小会调整。

＆＃13;
＆＃13; 
/*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;}
＆＃13; 
<!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&nbsp;SAVE&nbsp;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&nbsp;US&nbsp;ON<a href="https://www.facebook.com/letsavepet/" class="fa fa-facebook"></a></div>
CONTACT&nbsp;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">&nbsp;&nbsp; &copy; Letsavepet
<div class="copy_reg">All Rights Reserved&reg;</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>
＆＃13;
＆＃13;
＆＃13;

答案 1 :(得分：0)

要根据屏幕大小调整文本大小，您需要在媒体查询中为该大小添加其他样式规则。媒体查询使得它们内部的css仅在“（）”括号内指定的某些条件下应用。示例：

h1 {
 font-size: 16px;
}

@media screen and (max-width:600px) {

  h1 {
   font-size: 12px;
  }

}

以上h1通常为16px大，12px大小仅适用于屏幕小于600px（手机）的设备。

在这里阅读更多内容： https://developer.mozilla.org/en-US/docs/Web/CSS/Media_Queries/Using_media_queries

相关问题
最新问题