html - 我的文字未随屏幕尺寸调整-6ren

html - 我的文字未随屏幕尺寸调整

转载作者：行者123 更新时间：2023-11-28 02:15:27

嘿伙计们，我希望文本“LETS SAVE PETS”和“We need you in this mission”根据屏幕尺寸做出响应，但发生的事情是当屏幕尺寸较小时它们不会缩小并最终在网站上添加大量空白区域。我也用过，但它没有按照我的意愿工作。伙计们请帮助我。我的网站是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&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>

最佳答案

如果您不需要 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&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>

关于html - 我的文字未随屏幕尺寸调整，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/48505944/

文章推荐： javascript - CSS 样式在警告消息后消失

文章推荐： javascript - 如何使用 jquery 在我的 html 代码中获取父节点

javascript - (未)旋转矩形上的点
我找到了 this excellent question and answer它以 x/y(加上 center x/y 和 degrees/radians)开始并计算旋转- 到 x'/y'。这个计算很
.net - 为什么非法跨线程*未*被检测到？
全部: 我已经创建了一个 Windows 窗体和一个按钮。在另一个线程中，我试图更改按钮的文本，但它崩溃了；但是如果我尝试更改按钮的颜色，它肯定会成功。我认为如果您更改任何 Windows 窗体控件属
c - (未)签名短整型 (C)
本网站的另一个问题已证实，C 中没有缩写的字面后缀，并且可以执行以下操作: short Number = (short)1; 但是转换它和不这样做有什么区别: short Number = 1; 您使
SQL:从表中获取最新的(未)订阅操作
我有下表: ID (int) EMAIL (varchar(50)) CAMPAIGNID (int) isSubscribe (bit) isActionByUser (bit) 此表存储了用户对事
javascript - 如何复制手动(未)选中复选框的状态？
也就是说，无需触发Javascript事件即可改变的属性，如何保留我手动选中或取消选中的复选框的状态，然后复制到另一个地方？运行下面的代码片段并选中或取消选中其中的一些，然后点击“复制”: $('#
c++ - 可以在不取消引用的情况下增加指针仍然是段错误或具有其他(未)定义的肮脏吗？
我在网上找到的所有关于递增指针导致段错误的示例都涉及指针的取消引用 - 如果我只想递增它(例如在 for 循环的末尾)并且我不在乎它是否最终进入无效内存，因为我不会再使用它。例如，在这个程序中，每次迭
java - 如何获取用于记录的(未)编码消息
我有一个 Spring MVC REST 服务，它使用 XStream 将消息与 XML 相互转换。有什么方法可以将请求和响应中的 xml(即正文)打印到普通的 log4j 记录器？在 Contr
git - 当我需要其他分支的一些代码时如何为功能创建分支(未 merge 到开发分支中)
做我的任务有一个很大的挑战，那就是做相互依赖的任务我在这张照片中说的。假设我们有两个任务 A 和 B，执行子任务 A1、A2 和 B1、B2，假设任务 B 依赖于 A。要理想地执行任务 B，您应该执
delphi - 如何从库的角度处理 COM(未)初始化？
通过阅读该网站上的几个答案，我了解到 CoInitialize(Ex) should be called by the creator of a thread 。然后，在该线程中运行的任何代码都可以使
java - FirebaseListAdapter 未 populateView 未被调用
这个问题已经困扰我一段时间了。我以前从未真正使用过 ListViews，也没有使用过 FirebaseListAdapters。我想做的就是通过显示 id 和用户位置来启动列表的基础，但由于某种原因，
java - 检查(未)检查异常 (Java)
我很难解释这两个(看似简单)句子的含义: “受检异常由编译器在编译时检查” 这是什么意思？编译器检查是否捕获了所有已检查的异常(在代码中抛出)？ “未经检查的异常在运行时检查，而不是编译时” 这句话中
python - 如果在值中*未*找到特定的迭代子字符串，如何返回值？
我有一个包含排除子字符串的文本文件，我想迭代该文件以检查并返回不带排除子字符串的输入项。这里我使用 python 2.4，因此下面的代码可以实现此目的，因为 with open 和 any 不起作用
java - 对于(未)验证的请求绕过 @Cacheable
Spring 的缓存框架能否了解请求上下文的身份验证状态，或者更容易推出自己的缓存解决方案？最佳答案尽管我发现这个用例 super 奇怪，但您可以为几乎任何与 SpEL 配合使用的内容设置缓存条件
c++ - 指针/整数算术(未)定义的行为
我有以下函数模板: template HeldAs* duplicate(MostDerived *original, HeldAs *held) { // error checking omi
android - 如果您的应用程序具有设备管理员/设备所有者权限(未 Root )，如何杀死另一个应用程序
如果我的应用程序具有设备管理员/设备所有者权限(未获得 root 权限)，我如何才能从我的应用程序中终止(或阻止启动)另一个应用程序？最佳答案设备所有者可以阻止应用程序: DevicePolicy
tridion - 组件中的 XSLT 被(未)编码
非常简单的问题，但我似乎无法让它正常工作。我有一个组件，其中有一些 XSLT(用于导航)。它通过 XSLT TBB 使用 XSLT Mediator 发布。发布后
jquery - Droppable 创建(未)嵌套对象 - 但可拖动的位置发生变化
我正在将一个对象拖动到一个可拖放的对象内，该对象也是可拖动的。放置对象后，它会嵌套在可放置对象内。同样，如果我将对象拖到可放置的外部，它就不再嵌套。但是，如果我经常拖入和拖出可放置对象，则可拖动对象
jquery - 如何检测 Angular 中是否*未*单击指令元素
我正在尝试为按钮和弹出窗口等多个指令实现“取消选择”功能。也就是说，我希望当用户单击不属于指令模板一部分的元素时触发我的函数。目前，我正在使用以下 JQuery 代码: $('body').click
javascript - 加载 CSS 未 100% 工作
我从 this question 得到了下面的代码，该脚本用于在 Google tasks 上更改 iframe[src="about:blank"] 内的 CSS使用 Chrome 扩展 Tempe
java - 未 stub 调用的 native 类型的返回值
我有一些 @Mock 对象，但没有指定在该对象上调用方法的返回值。该方法返回 int (不是 Integer)。我很惊讶地发现 Mockito 没有抛出 NPE 并返回 0。这是预期的行为吗？例如:

行者123

个人简介

我是一名优秀的程序员,十分优秀！

作者热门文章

滴滴打车优惠券免费领取

全站热门文章

首页

博学

6Ren·AI

商城

html - 我的文字未随屏幕尺寸调整