有没有办法将所有这些元素绑定在一起以更改屏幕 sizes/zooming？
Is there a way to bind all these elements together for changing screen sizes/zooming?
所以我被扔到一个网络开发职位上，并制作了一个网站。 gulp 我想弄清楚如何为此更改 CSS 以便所有覆盖元素即使在缩放期间也能保持在它们的确切位置 in/out，并在所有屏幕上。 https://diamondbackbranding.com/pages/whypromo 是它在任何时候都应该看起来的样子。
我试过 vh/vw，但元素保持相同大小并在媒体中断之间移出位置。解决方案是否只是像 10 种不同的媒体中断一样，自定义每一种？ Web Dev 只是我工作的一部分，而不是重点，如果这是一个愚蠢的问题，我很抱歉。
.container1 {
position: relative;
text-align: center;
color: black;
font-size: 2.5vh;
}
.cggh {
position: absolute;
top: 100px;
left: 0px;
font-size: 45px;
text-align: center;
width: 60%;
line-height: 35px;
}
.cggi {
position: absolute;
top: 140px;
left: 0px;
font-size: 30px;
text-align: center;
width: 60%;
line-height: 35px;
}
.ety {
font-size: 45px;
text-align: center;
width: 100%;
line-height: 35px;
}
.ety1 {
font-size: 25px;
text-align: center;
width: 100%;
line-height: 35px;
}
.ety2 {
font-size: 20px;
text-align: center;
width: 55%;
line-height: 35px;
color: #0A4E80;
}
.wphead1 {
position: absolute;
top: 0px;
left: 0px;
font-size: 93px;
text-align: left;
width: 60%;
color: #c25e36;
}
.wphead2 {
position: absolute;
top: 5px;
left: 0px;
font-size: 200px;
text-align: left;
width: 60%;
color: #c25e36;
}
.wphead3 {
position: absolute;
top: 215px;
left: 0px;
font-size: 96px;
text-align: left;
width: 60%;
color: #c25e36;
}
.wphead4 {
position: absolute;
top: 265px;
left: 0px;
font-size: 153px;
text-align: left;
width: 60%;
color: #c25e36;
}
.wpright {
position: absolute;
top: 50px;
right: 0px;
font-size: 35px;
text-align: left;
width: 40%;
line-height: 35px;
}
.wpad1 {
position: absolute;
top: 600px;
right: 0px;
font-size: 45px;
text-align: center;
width: 100%;
line-height: 35px;
}
.wpad2 {
position: absolute;
top: 660px;
right: 0px;
font-size: 30px;
text-align: center;
width: 100%;
line-height: 35px;
}
.wpad3 {
position: absolute;
top: 790px;
left: 50%;
transform: translate(-50%, -50%);
font-size: 20px;
text-align: center;
width: 55%;
line-height: 35px;
color: #0A4E80;
}
.relmass1 {
position: absolute;
top: 105px;
left: 130px;
font-size: 32px;
text-align: left;
width: 24%;
line-height: 30px;
}
.relmass2 {
position: absolute;
top: 305px;
left: 130px;
font-size: 29px;
text-align: left;
width: 25%;
line-height: 27px;
}
.relmass3 {
position: absolute;
top: 550px;
left: 130px;
font-size: 28px;
text-align: left;
width: 25%;
line-height: 25px;
}
.relmass4 {
position: absolute;
top: 810px;
left: 130px;
font-size: 28px;
text-align: left;
width: 25%;
line-height: 25px;
}
.relcrd {
position: absolute;
top: 180px;
right: 240px;
font-size: 20px;
text-align: left;
width: 20%;
line-height: 25px;
}
.relphn {
position: absolute;
top: 360px;
left: 750px;
font-size: 20px;
text-align: left;
width: 17%;
line-height: 25px;
}
.relhkey {
position: absolute;
top: 360px;
right: 85px;
font-size: 20px;
text-align: left;
width: 20%;
line-height: 25px;
}
.relckey {
position: absolute;
top: 860px;
left: 790px;
font-size: 20px;
text-align: left;
width: 20%;
line-height: 25px;
}
.relwlt {
position: absolute;
top: 835px;
right: 143px;
font-size: 20px;
text-align: left;
width: 20%;
line-height: 25px;
}
.cggleft {
position: absolute;
top: 320px;
left: 300px;
font-size: 17px;
text-align: left;
width: 8%;
line-height: 20px;
}
.cggmid {
position: absolute;
top: 530px;
left: 350px;
font-size: 16px;
text-align: right;
width: 12%;
line-height: 20px;
}
.cggright {
position: absolute;
top: 680px;
right: 710px;
font-size: 18px;
text-align: right;
width: 12%;
line-height: 20px;
}
.cggbot {
position: absolute;
top: 800px;
left: 15%;
font-size: 25px;
text-align: center;
width: 45%;
line-height: 25px;
color: #0A4E80;
}
.cgg53 {
position: absolute;
top: 270px;
right: 150px;
font-size: 25px;
text-align: center;
width: 20%;
line-height: 30px;
color: white;
}
.cgg48 {
position: absolute;
top: 650px;
right: 77px;
font-size: 25px;
text-align: center;
width: 18%;
line-height: 25px;
color: white;
}
table, td, tr {
background-color: white;
text-align: center;
font-size: 25px;
}
@media screen and (max-width: 768px) {
.container1 {
position: relative;
text-align: center;
color: black;
font-size: 2.5vw;
}
.cggh {
position: absolute;
top: 10px;
left: 0px;
font-size: 15px;
text-align: center;
width: 60%;
line-height: 15px;
}
.cggi {
position: absolute;
top: 25px;
left: 0px;
font-size: 10px;
text-align: center;
width: 60%;
line-height: 10px;
}
.ety {
font-size: 15px;
text-align: center;
width: 100%;
line-height: 5px;
}
.ety1 {
font-size: 10px;
text-align: center;
width: 100%;
line-height: 5px;
}
.ety2 {
font-size: 8px;
text-align: center;
width: 55%;
line-height: 8px;
color: #0A4E80;
}
.wphead1 {
position: absolute;
top: 0px;
left: 0px;
font-size: 18px;
text-align: left;
width: 60%;
color: #c25e36;
}
.wphead2 {
position: absolute;
top: 7px;
left: 0px;
font-size: 35px;
text-align: left;
width: 60%;
color: #c25e36;
}
.wphead3 {
position: absolute;
top: 40px;
left: 0px;
font-size: 18px;
text-align: left;
width: 60%;
color: #c25e36;
}
.wphead4 {
position: absolute;
top: 50px;
left: 0px;
font-size: 30px;
text-align: left;
width: 60%;
color: #c25e36;
}
.wpright {
position: absolute;
top: 0px;
right: 0px;
font-size: 8px;
text-align: left;
width: 40%;
line-height: 7px;
}
.wpad1 {
position: absolute;
top: 110px;
right: 0px;
font-size: 15px;
text-align: center;
width: 100%;
line-height: 15px;
}
.wpad2 {
position: absolute;
top: 125px;
right: 0px;
font-size: 10px;
text-align: center;
width: 100%;
line-height: 10px;
}
.wpad3 {
position: absolute;
top: 160px;
left: 50%;
transform: translate(-50%, -50%);
font-size: 10px;
text-align: center;
width: 100%;
line-height: 8px;
color: #0A4E80;
}
.relmass1 {
position: absolute;
top: 20px;
left: 20px;
font-size: 8px;
text-align: left;
width: 30%;
line-height: 6px;
}
.relmass2 {
position: absolute;
top: 55px;
left: 22px;
font-size: 6.5px;
text-align: left;
width: 30%;
line-height: 6px;
}
.relmass3 {
position: absolute;
top: 97px;
left: 22px;
font-size: 6.5px;
text-align: left;
width: 30%;
line-height: 6px;
}
.relmass4 {
position: absolute;
top: 145px;
left: 24px;
font-size: 6.5px;
text-align: left;
width: 30%;
line-height: 6px;
}
.relcrd {
position: absolute;
top: 30px;
right: 12px;
font-size: 5px;
text-align: left;
width: 30%;
line-height: 6px;
}
.relphn {
position: absolute;
top: 70px;
left: 135px;
font-size: 5px;
text-align: left;
width: 17%;
line-height: 5px;
}
.relhkey {
position: absolute;
top: 61px;
right: 13px;
font-size: 5px;
text-align: left;
width: 20%;
line-height: 5px;
}
.relckey {
position: absolute;
top: 158px;
left: 143px;
font-size: 5px;
text-align: left;
width: 20%;
line-height: 5px;
}
.relwlt {
position: absolute;
top: 150px;
right: 26px;
font-size: 5px;
text-align: left;
width: 20%;
line-height: 5px;
}
.cggleft {
position: absolute;
top: 55px;
left: 55px;
font-size: 5px;
text-align: left;
width: 9%;
line-height: 5px;
}
.cggmid {
position: absolute;
top: 88px;
left: 65px;
font-size: 5px;
text-align: right;
width: 12%;
line-height: 5px;
}
.cggright {
position: absolute;
top: 110px;
right: 135px;
font-size: 5px;
text-align: right;
width: 12%;
line-height: 5px;
}
.cggbot {
position: absolute;
top: 145px;
left: 15%;
font-size: 7px;
text-align: center;
width: 60%;
line-height: 7px;
color: #0A4E80;
}
.cgg53 {
position: absolute;
top: 48px;
right: 27px;
font-size: 6px;
text-align: center;
width: 20%;
line-height: 6px;
color: white;
}
.cgg48 {
position: absolute;
top: 118px;
right: 17px;
font-size: 5px;
text-align: center;
width: 18%;
line-height: 5px;
color: white;
}
table, td, tr {
background-color: white;
text-align: center;
font-size: 10px;
}
}
@media screen and (max-width: 481px) {
.container1 {
position: relative;
text-align: center;
color: black;
font-size: 2.5vw;
}
.cggh {
position: absolute;
top: 10px;
left: 0px;
font-size: 15px;
text-align: center;
width: 60%;
line-height: 15px;
}
.cggi {
position: absolute;
top: 25px;
left: 0px;
font-size: 10px;
text-align: center;
width: 60%;
line-height: 10px;
}
.ety {
font-size: 15px;
text-align: center;
width: 100%;
line-height: 10px;
}
.ety1 {
font-size: 10px;
text-align: center;
width: 100%;
line-height: 10px;
}
.ety2 {
font-size: 8px;
text-align: center;
width: 55%;
line-height: 8px;
color: #0A4E80;
}
.wphead1 {
position: absolute;
top: 0px;
left: 0px;
font-size: 18px;
text-align: left;
width: 60%;
color: #c25e36;
}
.wphead2 {
position: absolute;
top: 7px;
left: 0px;
font-size: 35px;
text-align: left;
width: 60%;
color: #c25e36;
}
.wphead3 {
position: absolute;
top: 40px;
left: 0px;
font-size: 18px;
text-align: left;
width: 60%;
color: #c25e36;
}
.wphead4 {
position: absolute;
top: 50px;
left: 0px;
font-size: 30px;
text-align: left;
width: 60%;
color: #c25e36;
}
.wpright {
position: absolute;
top: 0px;
right: 0px;
font-size: 8px;
text-align: left;
width: 40%;
line-height: 7px;
}
.wpad1 {
position: absolute;
top: 110px;
right: 0px;
font-size: 15px;
text-align: center;
width: 100%;
line-height: 15px;
}
.wpad2 {
position: absolute;
top: 125px;
right: 0px;
font-size: 10px;
text-align: center;
width: 100%;
line-height: 10px;
}
.wpad3 {
position: absolute;
top: 160px;
left: 50%;
transform: translate(-50%, -50%);
font-size: 10px;
text-align: center;
width: 100%;
line-height: 8px;
color: #0A4E80;
}
.relmass1 {
position: absolute;
top: 20px;
left: 20px;
font-size: 7px;
text-align: left;
width: 30%;
line-height: 6px;
}
.relmass2 {
position: absolute;
top: 58px;
left: 22px;
font-size: 5px;
text-align: left;
width: 25%;
line-height: 5px;
}
.relmass3 {
position: absolute;
top: 102px;
left: 23px;
font-size: 5px;
text-align: left;
width: 25%;
line-height: 5px;
}
.relmass4 {
position: absolute;
top: 147px;
left: 24px;
font-size: 5px;
text-align: left;
width: 25%;
line-height: 5px;
}
.relcrd {
position: absolute;
top: 25px;
right: 12px;
font-size: 5px;
text-align: left;
width: 30%;
line-height: 6px;
}
.relphn {
position: absolute;
top: 70px;
left: 135px;
font-size: 5px;
text-align: left;
width: 17%;
line-height: 5px;
}
.relhkey {
position: absolute;
top: 61px;
right: 13px;
font-size: 5px;
text-align: left;
width: 20%;
line-height: 5px;
}
.relckey {
position: absolute;
top: 158px;
left: 143px;
font-size: 5px;
text-align: left;
width: 20%;
line-height: 5px;
}
.relwlt {
position: absolute;
top: 150px;
right: 26px;
font-size: 5px;
text-align: left;
width: 20%;
line-height: 5px;
}
.cggleft {
position: absolute;
top: 55px;
left: 55px;
font-size: 5px;
text-align: left;
width: 9%;
line-height: 5px;
}
.cggmid {
position: absolute;
top: 88px;
left: 65px;
font-size: 5px;
text-align: right;
width: 12%;
line-height: 5px;
}
.cggright {
position: absolute;
top: 110px;
right: 135px;
font-size: 5px;
text-align: right;
width: 12%;
line-height: 5px;
}
.cggbot {
position: absolute;
top: 145px;
left: 15%;
font-size: 7px;
text-align: center;
width: 60%;
line-height: 7px;
color: #0A4E80;
}
.cgg53 {
position: absolute;
top: 48px;
right: 27px;
font-size: 6px;
text-align: center;
width: 20%;
line-height: 6px;
color: white;
}
.cgg48 {
position: absolute;
top: 118px;
right: 17px;
font-size: 5px;
text-align: center;
width: 18%;
line-height: 5px;
color: white;
}
table, td, tr {
background-color: white;
text-align: center;
font-size: 6px;
}
}
<div class="container1"><img src="https://cdn.shopify.com/s/files/1/0431/6184/5920/files/Blankwhite.jpg?v=1604940219" alt="WPHead" width="100%" />
<div class="wphead1">THE SUPER SIMPLE</div>
<div class="wphead2">SCIENCE</div>
<div class="wphead3">OF PROMOTIONAL</div>
<div class="wphead4">PRODUCTS.</div>
<div class="wpright">There are pretty much three basic reasons why you'd be looking to order our products: To advertise to consumers in an effective way, To show your appreciation to existing or future clients, or to show your employees just how thankful you are for the work they do. <br />No matter the reasoning, we want to give you a simple look (through science, of course) on why promo merchandise is the best way to go about doing those things.</div>
<div class="wpad1">ADVERTISING TO OTHER COMPANIES.</div>
<div class="wpad2"><i>OTHERWISE KNOWN AS THE RELATIVITY OF MASS</i></div>
<div class="wpad3">There is no debate, your business card is an important part of marketing that holds vital information for possible clients. Unfortunately, humans tend to lose small items all the time, even ones that hold extreme value. Don't let your future relationships depend solely on a modest piece of cardstock.</div>
</div>
<div class="container1"><img src="https://cdn.shopify.com/s/files/1/0431/6184/5920/files/relativity_of_mass.gif?v=1604440786" alt="WhyPromo" style="width: 100%;" />
<div class="relmass1">A single promotional item averages <b style="color: #c25e36;">344</b> impressions per month.</div>
<div class="relmass2"><b style="color: gold;">82%</b> of people have a more favorable impression of a brand after receiving a promotional product.</div>
<div class="relmass3"><b style="color: blue;">72%</b> of consumers believe that the quality of a promotional product is directly related to the reputation of the company.</div>
<div class="relmass4">The CPI of promotional products can be as low as <b>1/10th</b> of one cent - lower than nearly any other advertising medium.</div>
<div class="relcrd"><b>Your Beautiful Business Card</b><br />Size: 2" x 3.5"<br />Weight: 0.05216 oz</div>
<div class="relphn"><b>Your customers' 1000+ dollar phone</b><br />Size: 5.95" x 2.76"<br />Weight: 6.84 oz</div>
<div class="relhkey"><b>Your customers' key to their very expensive home</b><br />Size: 1.38" x 2.76"<br />Weight: 0.246918 oz</div>
<div class="relckey"><b> Your customers' key to their very expensive car</b><br />Size: 54mm<br />Weight: 3.80 oz</div>
<div class="relwlt"><b>The thing that holds your customers' money and important personal information</b><br />Size: 3.5" x 4.5"<br />Weight: 5 oz</div>
</div>
<div class="container1"><img src="https://cdn.shopify.com/s/files/1/0431/6184/5920/files/client_gift_giving_circle.gif?v=1604953591" alt="Client-gift-giving" width="100%" />
<div class="cggh">CLIENT GIFT-GIVING</div>
<div class="cggi">THE RELEASE OF OXYTOCIN</div>
<div class="cggleft">Client receives gift from you.</div>
<div class="cggmid">Oxytocin molecules are released in the body, creating that warm fuzzy feeling.</div>
<div class="cggright">Those feel good feelings are returned to you through repeat business.</div>
<div class="cgg53">of consumers have a more favorable opinion of an advertiser if the promo product was made in the U.S.</div>
<div class="cgg48">of consumers would like to receive promotional products more often.</div>
<div class="cggbot">(We recommend throwing in a nice,<br />handwritten note for maximum oxytocin levels)</div>
</div>
<div class="ety">EMPLOYEE THANK YOU'S.</div>
<br />
<div class="ety1">STOPPING THE SPREAD OF INFECTION</div>
<br /><center>
<div class="ety2">While the spread of germs is an obvious threat, the spread of low morale can also create an unhealthy work environment. Rethink the way you reward your employees.</div>
</center><br />
<table width="100%">
<tbody>
<tr>
<td width="33%"><b>High Five</b><br />Surface is covered in germs <br />which spread on contact.</td>
<td width="33%"><b>Pizza Party</b><br />While everyone loves pizza, <br />the effects are not long-lasting.</td>
<td width="33%"><a href="https://www.diamondbackbranding.com/collections/drinkware"><b>Branded Tumbler</b></a><br /> Made of durable material that lasts,<br /> it is very functional with their lifestyle,<br /> and can be given with the company logo.</td>
</tr>
</tbody>
</table>
<img src="https://cdn.shopify.com/s/files/1/0431/6184/5920/files/employee_icons.png?v=1604957829" alt="EIcons" width="100%" />
问题是找到适用于不同视口大小的样式。
该问题包括一些初始 HTML 但不包括来自另一个站点的样式和一些已在顶部应用的样式。
问题是问题中应用的样式在某些地方使用固定单位，但原始站点完全使用相对大小，包括相对于视口的字体大小。这是必要的，因为尽管 'modern' CSS 在适当的地方使用（例如网格），但必须在需要在几个 GIF 上正确定位文本的地方应用相对定位和大小调整。
如果我们不使用问题中给出的样式元素，而是使用原始网站中主要元素的样式，我们（几乎）得到了所需的样式 - 即有人已经完成了找出工作覆盖在 GIF 上的文字应该在的位置，并且都在相对位置。
这是全部内容。需要进行一些调整才能正确填充，我不得不更正原始 CSS 中的一个错误（缺少 ; 并且对象适合应用于包含元素而不是 img 本身），但除此之外，事情似乎在正确的位置并调整大小，尽管您可能想考虑在此处使用的一个断点处实际应该发生什么，600px 宽度。
<main class="main-content mobile-main " style="margin-top: initial; padding-top: 0px;">
<!-- /templates/page.liquid -->
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<style>
#PageContainer {
background-color: #ffffff;
}
</style>
<div class="grid--full section__standard-spacing--even">
<div class="rte page-text">
<style>
:root {
--swiper-navigation-size: 44px;
}
* {
box-sizing: border-box;
}
.container1 {
position: relative;
text-align: center;
color: black;
font-size: 2.5vw;
}
.wphead1 {
position: absolute;
top: 0%;
left: 0%;
font-size: 5.05vw;
text-align: left;
width: 100%;
color: #c25e36;
}
.wphead2 {
position: absolute;
top: 3%;
left: 0%;
font-size: 10.8vw;
text-align: left;
width: 100%;
color: #c25e36;
}
.wphead3 {
position: absolute;
top: 23.5%;
left: 0%;
font-size: 5.2vw;
text-align: left;
width: 100%;
color: #c25e36;
}
.wphead4 {
position: absolute;
top: 28.5%;
left: 0px;
font-size: 8.2vw;
text-align: left;
width: 100%;
color: #c25e36;
}
.wpright {
position: absolute;
top: 5%;
right: 0%;
font-size: 1.4vw;
text-align: left;
width: 35%;
}
.wpad1 {
position: absolute;
top: 65%;
right: 0%;
font-size: 3vw;
text-align: center;
width: 100%;
}
.wpad2 {
position: absolute;
top: 74%;
right: 0%;
font-size: 2vw;
text-align: center;
width: 100%;
}
.wpad3 {
position: absolute;
top: 90%;
left: 50%;
transform: translate(-50%, -50%);
font-size: 1.2vw;
text-align: center;
width: 55%;
color: #0A4E80;
}
.relmass1 {
position: absolute;
top: 10%;
left: 8.5%;
font-size: 1.4vw;
text-align: left;
line-height: 100%;
width: 25%;
}
.relmass2 {
position: absolute;
top: 28%;
left: 8.5%;
font-size: 1.4vw;
text-align: left;
width: 26%;
line-height: 100%;
}
.relmass3 {
position: absolute;
top: 50.8%;
left: 8.5%;
font-size: 1.4vw;
text-align: left;
width: 26%;
line-height: 100%;
}
.relmass4 {
position: absolute;
top: 74%;
left: 8.5%;
font-size: 1.4vw;
text-align: left;
width: 26%;
line-height: 100%;
}
.relcrd {
position: absolute;
top: 17.8%;
right: 3.8%;
font-size: 1vw;
text-align: left;
width: 30%;
line-height: 100%;
}
.relphn {
position: absolute;
top: 34%;
left: 43.3%;
font-size: 1vw;
text-align: left;
width: 17%;
line-height: 100%;
}
.relhkey {
position: absolute;
top: 34%;
right: .8%;
font-size: 1vw;
text-align: left;
width: 24%;
line-height: 100%;
}
.relckey {
position: absolute;
top: 82%;
left: 45.5%;
font-size: 1vw;
text-align: left;
width: 20%;
line-height: 100%;
}
.relwlt {
position: absolute;
top: 81%;
right: 8.5%;
font-size: 1vw;
text-align: left;
width: 20%;
line-height: 100%;
}
.cggh {
position: absolute;
top: 6%;
left: 0%;
font-size: 3vw;
text-align: center;
width: 60%;
line-height: 100%;
}
.cggi {
position: absolute;
top: 13%;
left: 0%;
font-size: 2vw;
text-align: center;
width: 60%;
line-height: 100%;
}
.cggleft {
position: absolute;
top: 35%;
left: 17%;
font-size: 1vw;
text-align: left;
width: 8%;
line-height: 100%;
}
.cggmid {
position: absolute;
top: 58%;
left: 20%;
font-size: 1vw;
text-align: right;
width: 13%;
line-height: 100%;
}
.cggright {
position: absolute;
top: 73%;
right: 41%;
font-size: 1vw;
text-align: right;
width: 12%;
line-height: 100%;
}
.cggbot {
position: absolute;
bottom: 3%;
left: 15%;
font-size: 1.5vw;
text-align: center;
width: 45%;
line-height: 100%;
color: #0A4E80;
}
.cgg53 {
position: absolute;
top: 30%;
right: 9%;
font-size: 1.3vw;
text-align: center;
width: 20%;
line-height: 100%;
color: white;
}
.cgg48 {
position: absolute;
top: 71%;
right: 5%;
font-size: 1.3vw;
text-align: center;
width: 18%;
line-height: 100%;
color: white;
}
.ety {
font-size: 2.5vw;
text-align: center;
width: 100%;
line-height: 100%;
}
.ety1 {
font-size: 1.7vw;
text-align: center;
width: 100%;
line-height: 100%;
}
.ety2 {
font-size: 1.3vw;
text-align: center;
width: 55%;
line-height: 100%;
color: #0A4E80;
}
.grid-container {
display: grid;
rgrid-template-columns: auto auto auto;
width: 100%;
}
.grid-item {
font-size: 1.5vw;
text-align: center;
}
.grid-item img {
object-fit: contain;
width: 10vw;
rwidth: 33.33%;
}
@media only screen and (max-width: 600px) {
.container1 {
position: relative;
text-align: center;
color: black;
font-size: 2.5vw;
}
.wphead1 {
position: absolute;
top: 0%;
left: 0%;
font-size: 4.2vw;
text-align: left;
width: 100%;
color: #c25e36;
}
.wphead2 {
position: absolute;
top: 3%;
left: 0%;
font-size: 9vw;
text-align: left;
width: 100%;
color: #c25e36;
}
.wphead3 {
position: absolute;
top: 21%;
left: 0%;
font-size: 4.3vw;
text-align: left;
width: 100%;
color: #c25e36;
}
.wphead4 {
position: absolute;
top: 27%;
left: 0px;
font-size: 6.8vw;
text-align: left;
width: 100%;
color: #c25e36;
}
.wpright {
position: absolute;
top: 0%;
right: 0%;
font-size: 1.4vw;
text-align: left;
width: 45%;
}
.wpad1 {
position: absolute;
top: 60%;
right: 0%;
font-size: 3vw;
text-align: center;
width: 100%;
}
.wpad2 {
position: absolute;
top: 68%;
right: 0%;
font-size: 2vw;
text-align: center;
width: 100%;
}
.wpad3 {
position: absolute;
top: 90%;
left: 50%;
transform: translate(-50%, -50%);
font-size: 1.5vw;
text-align: center;
width: 55%;
color: #0A4E80;
}
.relmass1 {
position: absolute;
top: 10%;
left: 8.5%;
font-size: 1.4vw;
text-align: left;
line-height: 100%;
width: 25%;
}
.relmass2 {
position: absolute;
top: 28%;
left: 8.5%;
font-size: 1.4vw;
text-align: left;
width: 26%;
line-height: 100%;
}
.relmass3 {
position: absolute;
top: 50.8%;
left: 8.5%;
font-size: 1.4vw;
text-align: left;
width: 26%;
line-height: 100%;
}
.relmass4 {
position: absolute;
top: 74%;
left: 8.5%;
font-size: 1.4vw;
text-align: left;
width: 26%;
line-height: 100%;
}
.relcrd {
position: absolute;
top: 17.8%;
right: 3.8%;
font-size: 1vw;
text-align: left;
width: 30%;
line-height: 100%;
}
.relphn {
position: absolute;
top: 34%;
left: 43.3%;
font-size: 1vw;
text-align: left;
width: 17%;
line-height: 100%;
}
.relhkey {
position: absolute;
top: 34%;
right: .8%;
font-size: 1vw;
text-align: left;
width: 24%;
line-height: 100%;
}
.relckey {
position: absolute;
top: 82%;
left: 45.5%;
font-size: 1vw;
text-align: left;
width: 20%;
line-height: 100%;
}
.relwlt {
position: absolute;
top: 81%;
right: 8.5%;
font-size: 1vw;
text-align: left;
width: 20%;
line-height: 100%;
}
.cggh {
position: absolute;
top: 6%;
left: 0%;
font-size: 3vw;
text-align: center;
width: 60%;
line-height: 100%;
}
.cggi {
position: absolute;
top: 13%;
left: 0%;
font-size: 2vw;
text-align: center;
width: 60%;
line-height: 100%;
}
.cggleft {
position: absolute;
top: 35%;
left: 17%;
font-size: 1vw;
text-align: left;
width: 8%;
line-height: 100%;
}
.cggmid {
position: absolute;
top: 58%;
left: 20%;
font-size: 1vw;
text-align: right;
width: 13%;
line-height: 100%;
}
.cggright {
position: absolute;
top: 73%;
right: 41%;
font-size: 1vw;
text-align: right;
width: 12%;
line-height: 100%;
}
.cggbot {
position: absolute;
bottom: 3%;
left: 15%;
font-size: 1.5vw;
text-align: center;
width: 45%;
line-height: 100%;
color: #0A4E80;
}
.cgg53 {
position: absolute;
top: 30%;
right: 9%;
font-size: 1.3vw;
text-align: center;
width: 20%;
line-height: 100%;
color: white;
}
.cgg48 {
position: absolute;
top: 71%;
right: 5%;
font-size: 1.3vw;
text-align: center;
width: 18%;
line-height: 100%;
color: white;
}
.ety {
font-size: 3vw;
text-align: center;
width: 100%;
line-height: 100%;
}
.ety1 {
font-size: 2vw;
text-align: center;
width: 100%;
line-height: 100%;
}
.ety2 {
font-size: 1.5vw;
text-align: center;
width: 55%;
line-height: 100%;
color: #0A4E80;
}
.grid-container {
display: grid;
grid-template-columns: auto auto auto;
width: 100%;
}
.grid-item {
font-size: 1.5vw;
text-align: center;
object-fit: contain;
}
.grid-item img {
object-fit: contain;
}
}
.grid-container {
display: grid;
grid-template-columns: auto auto auto;
width: 100%;
}
.grid-item {
font-size: 1.5vw;
text-align: center;
object-fit: contain;/* wrong place */
}
.grid-item img {
object-fit: contain;
}
</style>
<div class="container1">
<img src="https://cdn.shopify.com/s/files/1/0431/6184/5920/files/Blankwhite.jpg?v=1604940219" alt="WPHead" width="100%">
<div class="wphead1">THE SUPER SIMPLE</div>
<div class="wphead2">SCIENCE</div>
<div class="wphead3">OF PROMOTIONAL</div>
<div class="wphead4">PRODUCTS.</div>
<div class="wpright">There are pretty much three basic reasons why you'd be looking to order our products: To advertise to consumers in an effective way, To show your appreciation to existing or future clients, or to show your employees just how thankful you are for the work they do. <br>No matter the reasoning, we want to give you a simple look (through science, of course) on why promo merchandise is the best way to go about doing those things.</div>
<div class="wpad1">ADVERTISING TO OTHER COMPANIES.</div>
<div class="wpad2"><i>OTHERWISE KNOWN AS THE RELATIVITY OF MASS</i></div>
<div class="wpad3">There is no debate, your business card is an important part of marketing that holds vital information for possible clients. Unfortunately, humans tend to lose small items all the time, even ones that hold extreme value. Don't let your future relationships depend solely on a modest piece of cardstock.</div>
</div>
<div class="container1">
<img src="https://cdn.shopify.com/s/files/1/0431/6184/5920/files/relativity_of_mass.gif?v=1604440786" alt="WhyPromo" style="width: 100%;">
<div class="relmass1">A single promotional item averages <b style="color: #c25e36;">344</b> impressions per month.</div>
<div class="relmass2">
<b style="color: gold;">82%</b> of people have a more favorable impression of a brand after receiving a promotional product.</div>
<div class="relmass3">
<b style="color: blue;">72%</b> of consumers believe that the quality of a promotional product is directly related to the reputation of the company.</div>
<div class="relmass4">The CPI of promotional products can be as low as <b>1/10th</b> of one cent - lower than nearly any other advertising medium.</div>
<div class="relcrd">
<b>Your Beautiful Business Card</b><br>Size: 2" x 3.5"<br>Weight: 0.05216 oz</div>
<div class="relphn">
<b>Your customers' 1000+ dollar phone</b><br>Size: 5.95" x 2.76"<br>Weight: 6.84 oz</div>
<div class="relhkey">
<b>Your customers' key to their very expensive home</b><br>Size: 1.38" x 2.76"<br>Weight: 0.246918 oz</div>
<div class="relckey">
<b> Your customers' key to their very expensive car</b><br>Size: 54mm<br>Weight: 3.80 oz</div>
<div class="relwlt">
<b>The thing that holds your customers' money and important personal information</b><br>Size: 3.5" x 4.5"<br>Weight: 5 oz</div>
</div>
<div class="container1">
<img src="https://cdn.shopify.com/s/files/1/0431/6184/5920/files/client_gift_giving_circle.gif?v=1604953591" alt="Client-gift-giving" width="100%">
<div class="cggh">CLIENT GIFT-GIVING</div>
<div class="cggi">THE RELEASE OF OXYTOCIN</div>
<div class="cggleft">Client receives gift from you.</div>
<div class="cggmid">Oxytocin molecules are released in the body, creating that warm fuzzy feeling.</div>
<div class="cggright">Those feel good feelings are returned to you through repeat business.</div>
<div class="cgg53">of consumers have a more favorable opinion of an advertiser if the promo product was made in the U.S.</div>
<div class="cgg48">of consumers would like to receive promotional products more often.</div>
<div class="cggbot">(We recommend throwing in a nice,<br>handwritten note for maximum oxytocin levels)</div>
</div><br><br>
<!-- Not attached to any card, free floating -->
<div class="ety">EMPLOYEE THANK YOU'S.</div>
<div class="ety1">STOPPING THE SPREAD OF INFECTION</div><center>
<div class="ety2">While the spread of germs is an obvious threat, the spread of low morale can also create an unhealthy work environment. Rethink the way you reward your employees.</div>
</center><br><br>
<div class="grid-container">
<div class="grid-item"><b>High Five</b><br>Surface is covered in germs <br>which spread on contact. <br><br> <img src="https://cdn.shopify.com/s/files/1/0431/6184/5920/files/hands_1.png?v=1606939061" height=""></div>
<div class="grid-item"><b>Pizza Party</b><br>While everyone loves pizza, <br>the effects are not long-lasting. <br><br> <img src="https://cdn.shopify.com/s/files/1/0431/6184/5920/files/pizza_1.png?v=1606939061"></div>
<div class="grid-item"><a href="https://www.diamondbackbranding.com/collections/drinkware"><b>Branded Tumbler</b></a><br> Made of durable material that lasts,<br> it is very functional with their lifestyle,<br> and can be given with the company logo. <br><br> <img src="https://cdn.shopify.com/s/files/1/0431/6184/5920/files/drinkwear_1.png?v=1606939061"></div><br>
</div>
</div></div>
</main>
注意：原来的网站将样式元素放在 HTML 中，现在已经不是这样了，因此需要对其进行一些整理。
所以我被扔到一个网络开发职位上，并制作了一个网站。 gulp 我想弄清楚如何为此更改 CSS 以便所有覆盖元素即使在缩放期间也能保持在它们的确切位置 in/out，并在所有屏幕上。 https://diamondbackbranding.com/pages/whypromo 是它在任何时候都应该看起来的样子。
我试过 vh/vw，但元素保持相同大小并在媒体中断之间移出位置。解决方案是否只是像 10 种不同的媒体中断一样，自定义每一种？ Web Dev 只是我工作的一部分，而不是重点，如果这是一个愚蠢的问题，我很抱歉。
.container1 {
position: relative;
text-align: center;
color: black;
font-size: 2.5vh;
}
.cggh {
position: absolute;
top: 100px;
left: 0px;
font-size: 45px;
text-align: center;
width: 60%;
line-height: 35px;
}
.cggi {
position: absolute;
top: 140px;
left: 0px;
font-size: 30px;
text-align: center;
width: 60%;
line-height: 35px;
}
.ety {
font-size: 45px;
text-align: center;
width: 100%;
line-height: 35px;
}
.ety1 {
font-size: 25px;
text-align: center;
width: 100%;
line-height: 35px;
}
.ety2 {
font-size: 20px;
text-align: center;
width: 55%;
line-height: 35px;
color: #0A4E80;
}
.wphead1 {
position: absolute;
top: 0px;
left: 0px;
font-size: 93px;
text-align: left;
width: 60%;
color: #c25e36;
}
.wphead2 {
position: absolute;
top: 5px;
left: 0px;
font-size: 200px;
text-align: left;
width: 60%;
color: #c25e36;
}
.wphead3 {
position: absolute;
top: 215px;
left: 0px;
font-size: 96px;
text-align: left;
width: 60%;
color: #c25e36;
}
.wphead4 {
position: absolute;
top: 265px;
left: 0px;
font-size: 153px;
text-align: left;
width: 60%;
color: #c25e36;
}
.wpright {
position: absolute;
top: 50px;
right: 0px;
font-size: 35px;
text-align: left;
width: 40%;
line-height: 35px;
}
.wpad1 {
position: absolute;
top: 600px;
right: 0px;
font-size: 45px;
text-align: center;
width: 100%;
line-height: 35px;
}
.wpad2 {
position: absolute;
top: 660px;
right: 0px;
font-size: 30px;
text-align: center;
width: 100%;
line-height: 35px;
}
.wpad3 {
position: absolute;
top: 790px;
left: 50%;
transform: translate(-50%, -50%);
font-size: 20px;
text-align: center;
width: 55%;
line-height: 35px;
color: #0A4E80;
}
.relmass1 {
position: absolute;
top: 105px;
left: 130px;
font-size: 32px;
text-align: left;
width: 24%;
line-height: 30px;
}
.relmass2 {
position: absolute;
top: 305px;
left: 130px;
font-size: 29px;
text-align: left;
width: 25%;
line-height: 27px;
}
.relmass3 {
position: absolute;
top: 550px;
left: 130px;
font-size: 28px;
text-align: left;
width: 25%;
line-height: 25px;
}
.relmass4 {
position: absolute;
top: 810px;
left: 130px;
font-size: 28px;
text-align: left;
width: 25%;
line-height: 25px;
}
.relcrd {
position: absolute;
top: 180px;
right: 240px;
font-size: 20px;
text-align: left;
width: 20%;
line-height: 25px;
}
.relphn {
position: absolute;
top: 360px;
left: 750px;
font-size: 20px;
text-align: left;
width: 17%;
line-height: 25px;
}
.relhkey {
position: absolute;
top: 360px;
right: 85px;
font-size: 20px;
text-align: left;
width: 20%;
line-height: 25px;
}
.relckey {
position: absolute;
top: 860px;
left: 790px;
font-size: 20px;
text-align: left;
width: 20%;
line-height: 25px;
}
.relwlt {
position: absolute;
top: 835px;
right: 143px;
font-size: 20px;
text-align: left;
width: 20%;
line-height: 25px;
}
.cggleft {
position: absolute;
top: 320px;
left: 300px;
font-size: 17px;
text-align: left;
width: 8%;
line-height: 20px;
}
.cggmid {
position: absolute;
top: 530px;
left: 350px;
font-size: 16px;
text-align: right;
width: 12%;
line-height: 20px;
}
.cggright {
position: absolute;
top: 680px;
right: 710px;
font-size: 18px;
text-align: right;
width: 12%;
line-height: 20px;
}
.cggbot {
position: absolute;
top: 800px;
left: 15%;
font-size: 25px;
text-align: center;
width: 45%;
line-height: 25px;
color: #0A4E80;
}
.cgg53 {
position: absolute;
top: 270px;
right: 150px;
font-size: 25px;
text-align: center;
width: 20%;
line-height: 30px;
color: white;
}
.cgg48 {
position: absolute;
top: 650px;
right: 77px;
font-size: 25px;
text-align: center;
width: 18%;
line-height: 25px;
color: white;
}
table, td, tr {
background-color: white;
text-align: center;
font-size: 25px;
}
@media screen and (max-width: 768px) {
.container1 {
position: relative;
text-align: center;
color: black;
font-size: 2.5vw;
}
.cggh {
position: absolute;
top: 10px;
left: 0px;
font-size: 15px;
text-align: center;
width: 60%;
line-height: 15px;
}
.cggi {
position: absolute;
top: 25px;
left: 0px;
font-size: 10px;
text-align: center;
width: 60%;
line-height: 10px;
}
.ety {
font-size: 15px;
text-align: center;
width: 100%;
line-height: 5px;
}
.ety1 {
font-size: 10px;
text-align: center;
width: 100%;
line-height: 5px;
}
.ety2 {
font-size: 8px;
text-align: center;
width: 55%;
line-height: 8px;
color: #0A4E80;
}
.wphead1 {
position: absolute;
top: 0px;
left: 0px;
font-size: 18px;
text-align: left;
width: 60%;
color: #c25e36;
}
.wphead2 {
position: absolute;
top: 7px;
left: 0px;
font-size: 35px;
text-align: left;
width: 60%;
color: #c25e36;
}
.wphead3 {
position: absolute;
top: 40px;
left: 0px;
font-size: 18px;
text-align: left;
width: 60%;
color: #c25e36;
}
.wphead4 {
position: absolute;
top: 50px;
left: 0px;
font-size: 30px;
text-align: left;
width: 60%;
color: #c25e36;
}
.wpright {
position: absolute;
top: 0px;
right: 0px;
font-size: 8px;
text-align: left;
width: 40%;
line-height: 7px;
}
.wpad1 {
position: absolute;
top: 110px;
right: 0px;
font-size: 15px;
text-align: center;
width: 100%;
line-height: 15px;
}
.wpad2 {
position: absolute;
top: 125px;
right: 0px;
font-size: 10px;
text-align: center;
width: 100%;
line-height: 10px;
}
.wpad3 {
position: absolute;
top: 160px;
left: 50%;
transform: translate(-50%, -50%);
font-size: 10px;
text-align: center;
width: 100%;
line-height: 8px;
color: #0A4E80;
}
.relmass1 {
position: absolute;
top: 20px;
left: 20px;
font-size: 8px;
text-align: left;
width: 30%;
line-height: 6px;
}
.relmass2 {
position: absolute;
top: 55px;
left: 22px;
font-size: 6.5px;
text-align: left;
width: 30%;
line-height: 6px;
}
.relmass3 {
position: absolute;
top: 97px;
left: 22px;
font-size: 6.5px;
text-align: left;
width: 30%;
line-height: 6px;
}
.relmass4 {
position: absolute;
top: 145px;
left: 24px;
font-size: 6.5px;
text-align: left;
width: 30%;
line-height: 6px;
}
.relcrd {
position: absolute;
top: 30px;
right: 12px;
font-size: 5px;
text-align: left;
width: 30%;
line-height: 6px;
}
.relphn {
position: absolute;
top: 70px;
left: 135px;
font-size: 5px;
text-align: left;
width: 17%;
line-height: 5px;
}
.relhkey {
position: absolute;
top: 61px;
right: 13px;
font-size: 5px;
text-align: left;
width: 20%;
line-height: 5px;
}
.relckey {
position: absolute;
top: 158px;
left: 143px;
font-size: 5px;
text-align: left;
width: 20%;
line-height: 5px;
}
.relwlt {
position: absolute;
top: 150px;
right: 26px;
font-size: 5px;
text-align: left;
width: 20%;
line-height: 5px;
}
.cggleft {
position: absolute;
top: 55px;
left: 55px;
font-size: 5px;
text-align: left;
width: 9%;
line-height: 5px;
}
.cggmid {
position: absolute;
top: 88px;
left: 65px;
font-size: 5px;
text-align: right;
width: 12%;
line-height: 5px;
}
.cggright {
position: absolute;
top: 110px;
right: 135px;
font-size: 5px;
text-align: right;
width: 12%;
line-height: 5px;
}
.cggbot {
position: absolute;
top: 145px;
left: 15%;
font-size: 7px;
text-align: center;
width: 60%;
line-height: 7px;
color: #0A4E80;
}
.cgg53 {
position: absolute;
top: 48px;
right: 27px;
font-size: 6px;
text-align: center;
width: 20%;
line-height: 6px;
color: white;
}
.cgg48 {
position: absolute;
top: 118px;
right: 17px;
font-size: 5px;
text-align: center;
width: 18%;
line-height: 5px;
color: white;
}
table, td, tr {
background-color: white;
text-align: center;
font-size: 10px;
}
}
@media screen and (max-width: 481px) {
.container1 {
position: relative;
text-align: center;
color: black;
font-size: 2.5vw;
}
.cggh {
position: absolute;
top: 10px;
left: 0px;
font-size: 15px;
text-align: center;
width: 60%;
line-height: 15px;
}
.cggi {
position: absolute;
top: 25px;
left: 0px;
font-size: 10px;
text-align: center;
width: 60%;
line-height: 10px;
}
.ety {
font-size: 15px;
text-align: center;
width: 100%;
line-height: 10px;
}
.ety1 {
font-size: 10px;
text-align: center;
width: 100%;
line-height: 10px;
}
.ety2 {
font-size: 8px;
text-align: center;
width: 55%;
line-height: 8px;
color: #0A4E80;
}
.wphead1 {
position: absolute;
top: 0px;
left: 0px;
font-size: 18px;
text-align: left;
width: 60%;
color: #c25e36;
}
.wphead2 {
position: absolute;
top: 7px;
left: 0px;
font-size: 35px;
text-align: left;
width: 60%;
color: #c25e36;
}
.wphead3 {
position: absolute;
top: 40px;
left: 0px;
font-size: 18px;
text-align: left;
width: 60%;
color: #c25e36;
}
.wphead4 {
position: absolute;
top: 50px;
left: 0px;
font-size: 30px;
text-align: left;
width: 60%;
color: #c25e36;
}
.wpright {
position: absolute;
top: 0px;
right: 0px;
font-size: 8px;
text-align: left;
width: 40%;
line-height: 7px;
}
.wpad1 {
position: absolute;
top: 110px;
right: 0px;
font-size: 15px;
text-align: center;
width: 100%;
line-height: 15px;
}
.wpad2 {
position: absolute;
top: 125px;
right: 0px;
font-size: 10px;
text-align: center;
width: 100%;
line-height: 10px;
}
.wpad3 {
position: absolute;
top: 160px;
left: 50%;
transform: translate(-50%, -50%);
font-size: 10px;
text-align: center;
width: 100%;
line-height: 8px;
color: #0A4E80;
}
.relmass1 {
position: absolute;
top: 20px;
left: 20px;
font-size: 7px;
text-align: left;
width: 30%;
line-height: 6px;
}
.relmass2 {
position: absolute;
top: 58px;
left: 22px;
font-size: 5px;
text-align: left;
width: 25%;
line-height: 5px;
}
.relmass3 {
position: absolute;
top: 102px;
left: 23px;
font-size: 5px;
text-align: left;
width: 25%;
line-height: 5px;
}
.relmass4 {
position: absolute;
top: 147px;
left: 24px;
font-size: 5px;
text-align: left;
width: 25%;
line-height: 5px;
}
.relcrd {
position: absolute;
top: 25px;
right: 12px;
font-size: 5px;
text-align: left;
width: 30%;
line-height: 6px;
}
.relphn {
position: absolute;
top: 70px;
left: 135px;
font-size: 5px;
text-align: left;
width: 17%;
line-height: 5px;
}
.relhkey {
position: absolute;
top: 61px;
right: 13px;
font-size: 5px;
text-align: left;
width: 20%;
line-height: 5px;
}
.relckey {
position: absolute;
top: 158px;
left: 143px;
font-size: 5px;
text-align: left;
width: 20%;
line-height: 5px;
}
.relwlt {
position: absolute;
top: 150px;
right: 26px;
font-size: 5px;
text-align: left;
width: 20%;
line-height: 5px;
}
.cggleft {
position: absolute;
top: 55px;
left: 55px;
font-size: 5px;
text-align: left;
width: 9%;
line-height: 5px;
}
.cggmid {
position: absolute;
top: 88px;
left: 65px;
font-size: 5px;
text-align: right;
width: 12%;
line-height: 5px;
}
.cggright {
position: absolute;
top: 110px;
right: 135px;
font-size: 5px;
text-align: right;
width: 12%;
line-height: 5px;
}
.cggbot {
position: absolute;
top: 145px;
left: 15%;
font-size: 7px;
text-align: center;
width: 60%;
line-height: 7px;
color: #0A4E80;
}
.cgg53 {
position: absolute;
top: 48px;
right: 27px;
font-size: 6px;
text-align: center;
width: 20%;
line-height: 6px;
color: white;
}
.cgg48 {
position: absolute;
top: 118px;
right: 17px;
font-size: 5px;
text-align: center;
width: 18%;
line-height: 5px;
color: white;
}
table, td, tr {
background-color: white;
text-align: center;
font-size: 6px;
}
}
<div class="container1"><img src="https://cdn.shopify.com/s/files/1/0431/6184/5920/files/Blankwhite.jpg?v=1604940219" alt="WPHead" width="100%" />
<div class="wphead1">THE SUPER SIMPLE</div>
<div class="wphead2">SCIENCE</div>
<div class="wphead3">OF PROMOTIONAL</div>
<div class="wphead4">PRODUCTS.</div>
<div class="wpright">There are pretty much three basic reasons why you'd be looking to order our products: To advertise to consumers in an effective way, To show your appreciation to existing or future clients, or to show your employees just how thankful you are for the work they do. <br />No matter the reasoning, we want to give you a simple look (through science, of course) on why promo merchandise is the best way to go about doing those things.</div>
<div class="wpad1">ADVERTISING TO OTHER COMPANIES.</div>
<div class="wpad2"><i>OTHERWISE KNOWN AS THE RELATIVITY OF MASS</i></div>
<div class="wpad3">There is no debate, your business card is an important part of marketing that holds vital information for possible clients. Unfortunately, humans tend to lose small items all the time, even ones that hold extreme value. Don't let your future relationships depend solely on a modest piece of cardstock.</div>
</div>
<div class="container1"><img src="https://cdn.shopify.com/s/files/1/0431/6184/5920/files/relativity_of_mass.gif?v=1604440786" alt="WhyPromo" style="width: 100%;" />
<div class="relmass1">A single promotional item averages <b style="color: #c25e36;">344</b> impressions per month.</div>
<div class="relmass2"><b style="color: gold;">82%</b> of people have a more favorable impression of a brand after receiving a promotional product.</div>
<div class="relmass3"><b style="color: blue;">72%</b> of consumers believe that the quality of a promotional product is directly related to the reputation of the company.</div>
<div class="relmass4">The CPI of promotional products can be as low as <b>1/10th</b> of one cent - lower than nearly any other advertising medium.</div>
<div class="relcrd"><b>Your Beautiful Business Card</b><br />Size: 2" x 3.5"<br />Weight: 0.05216 oz</div>
<div class="relphn"><b>Your customers' 1000+ dollar phone</b><br />Size: 5.95" x 2.76"<br />Weight: 6.84 oz</div>
<div class="relhkey"><b>Your customers' key to their very expensive home</b><br />Size: 1.38" x 2.76"<br />Weight: 0.246918 oz</div>
<div class="relckey"><b> Your customers' key to their very expensive car</b><br />Size: 54mm<br />Weight: 3.80 oz</div>
<div class="relwlt"><b>The thing that holds your customers' money and important personal information</b><br />Size: 3.5" x 4.5"<br />Weight: 5 oz</div>
</div>
<div class="container1"><img src="https://cdn.shopify.com/s/files/1/0431/6184/5920/files/client_gift_giving_circle.gif?v=1604953591" alt="Client-gift-giving" width="100%" />
<div class="cggh">CLIENT GIFT-GIVING</div>
<div class="cggi">THE RELEASE OF OXYTOCIN</div>
<div class="cggleft">Client receives gift from you.</div>
<div class="cggmid">Oxytocin molecules are released in the body, creating that warm fuzzy feeling.</div>
<div class="cggright">Those feel good feelings are returned to you through repeat business.</div>
<div class="cgg53">of consumers have a more favorable opinion of an advertiser if the promo product was made in the U.S.</div>
<div class="cgg48">of consumers would like to receive promotional products more often.</div>
<div class="cggbot">(We recommend throwing in a nice,<br />handwritten note for maximum oxytocin levels)</div>
</div>
<div class="ety">EMPLOYEE THANK YOU'S.</div>
<br />
<div class="ety1">STOPPING THE SPREAD OF INFECTION</div>
<br /><center>
<div class="ety2">While the spread of germs is an obvious threat, the spread of low morale can also create an unhealthy work environment. Rethink the way you reward your employees.</div>
</center><br />
<table width="100%">
<tbody>
<tr>
<td width="33%"><b>High Five</b><br />Surface is covered in germs <br />which spread on contact.</td>
<td width="33%"><b>Pizza Party</b><br />While everyone loves pizza, <br />the effects are not long-lasting.</td>
<td width="33%"><a href="https://www.diamondbackbranding.com/collections/drinkware"><b>Branded Tumbler</b></a><br /> Made of durable material that lasts,<br /> it is very functional with their lifestyle,<br /> and can be given with the company logo.</td>
</tr>
</tbody>
</table>
<img src="https://cdn.shopify.com/s/files/1/0431/6184/5920/files/employee_icons.png?v=1604957829" alt="EIcons" width="100%" />
问题是找到适用于不同视口大小的样式。 该问题包括一些初始 HTML 但不包括来自另一个站点的样式和一些已在顶部应用的样式。
问题是问题中应用的样式在某些地方使用固定单位，但原始站点完全使用相对大小，包括相对于视口的字体大小。这是必要的，因为尽管 'modern' CSS 在适当的地方使用（例如网格），但必须在需要在几个 GIF 上正确定位文本的地方应用相对定位和大小调整。
如果我们不使用问题中给出的样式元素，而是使用原始网站中主要元素的样式，我们（几乎）得到了所需的样式 - 即有人已经完成了找出工作覆盖在 GIF 上的文字应该在的位置，并且都在相对位置。
这是全部内容。需要进行一些调整才能正确填充，我不得不更正原始 CSS 中的一个错误（缺少 ; 并且对象适合应用于包含元素而不是 img 本身），但除此之外，事情似乎在正确的位置并调整大小，尽管您可能想考虑在此处使用的一个断点处实际应该发生什么，600px 宽度。
<main class="main-content mobile-main " style="margin-top: initial; padding-top: 0px;">
<!-- /templates/page.liquid -->
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<style>
#PageContainer {
background-color: #ffffff;
}
</style>
<div class="grid--full section__standard-spacing--even">
<div class="rte page-text">
<style>
:root {
--swiper-navigation-size: 44px;
}
* {
box-sizing: border-box;
}
.container1 {
position: relative;
text-align: center;
color: black;
font-size: 2.5vw;
}
.wphead1 {
position: absolute;
top: 0%;
left: 0%;
font-size: 5.05vw;
text-align: left;
width: 100%;
color: #c25e36;
}
.wphead2 {
position: absolute;
top: 3%;
left: 0%;
font-size: 10.8vw;
text-align: left;
width: 100%;
color: #c25e36;
}
.wphead3 {
position: absolute;
top: 23.5%;
left: 0%;
font-size: 5.2vw;
text-align: left;
width: 100%;
color: #c25e36;
}
.wphead4 {
position: absolute;
top: 28.5%;
left: 0px;
font-size: 8.2vw;
text-align: left;
width: 100%;
color: #c25e36;
}
.wpright {
position: absolute;
top: 5%;
right: 0%;
font-size: 1.4vw;
text-align: left;
width: 35%;
}
.wpad1 {
position: absolute;
top: 65%;
right: 0%;
font-size: 3vw;
text-align: center;
width: 100%;
}
.wpad2 {
position: absolute;
top: 74%;
right: 0%;
font-size: 2vw;
text-align: center;
width: 100%;
}
.wpad3 {
position: absolute;
top: 90%;
left: 50%;
transform: translate(-50%, -50%);
font-size: 1.2vw;
text-align: center;
width: 55%;
color: #0A4E80;
}
.relmass1 {
position: absolute;
top: 10%;
left: 8.5%;
font-size: 1.4vw;
text-align: left;
line-height: 100%;
width: 25%;
}
.relmass2 {
position: absolute;
top: 28%;
left: 8.5%;
font-size: 1.4vw;
text-align: left;
width: 26%;
line-height: 100%;
}
.relmass3 {
position: absolute;
top: 50.8%;
left: 8.5%;
font-size: 1.4vw;
text-align: left;
width: 26%;
line-height: 100%;
}
.relmass4 {
position: absolute;
top: 74%;
left: 8.5%;
font-size: 1.4vw;
text-align: left;
width: 26%;
line-height: 100%;
}
.relcrd {
position: absolute;
top: 17.8%;
right: 3.8%;
font-size: 1vw;
text-align: left;
width: 30%;
line-height: 100%;
}
.relphn {
position: absolute;
top: 34%;
left: 43.3%;
font-size: 1vw;
text-align: left;
width: 17%;
line-height: 100%;
}
.relhkey {
position: absolute;
top: 34%;
right: .8%;
font-size: 1vw;
text-align: left;
width: 24%;
line-height: 100%;
}
.relckey {
position: absolute;
top: 82%;
left: 45.5%;
font-size: 1vw;
text-align: left;
width: 20%;
line-height: 100%;
}
.relwlt {
position: absolute;
top: 81%;
right: 8.5%;
font-size: 1vw;
text-align: left;
width: 20%;
line-height: 100%;
}
.cggh {
position: absolute;
top: 6%;
left: 0%;
font-size: 3vw;
text-align: center;
width: 60%;
line-height: 100%;
}
.cggi {
position: absolute;
top: 13%;
left: 0%;
font-size: 2vw;
text-align: center;
width: 60%;
line-height: 100%;
}
.cggleft {
position: absolute;
top: 35%;
left: 17%;
font-size: 1vw;
text-align: left;
width: 8%;
line-height: 100%;
}
.cggmid {
position: absolute;
top: 58%;
left: 20%;
font-size: 1vw;
text-align: right;
width: 13%;
line-height: 100%;
}
.cggright {
position: absolute;
top: 73%;
right: 41%;
font-size: 1vw;
text-align: right;
width: 12%;
line-height: 100%;
}
.cggbot {
position: absolute;
bottom: 3%;
left: 15%;
font-size: 1.5vw;
text-align: center;
width: 45%;
line-height: 100%;
color: #0A4E80;
}
.cgg53 {
position: absolute;
top: 30%;
right: 9%;
font-size: 1.3vw;
text-align: center;
width: 20%;
line-height: 100%;
color: white;
}
.cgg48 {
position: absolute;
top: 71%;
right: 5%;
font-size: 1.3vw;
text-align: center;
width: 18%;
line-height: 100%;
color: white;
}
.ety {
font-size: 2.5vw;
text-align: center;
width: 100%;
line-height: 100%;
}
.ety1 {
font-size: 1.7vw;
text-align: center;
width: 100%;
line-height: 100%;
}
.ety2 {
font-size: 1.3vw;
text-align: center;
width: 55%;
line-height: 100%;
color: #0A4E80;
}
.grid-container {
display: grid;
rgrid-template-columns: auto auto auto;
width: 100%;
}
.grid-item {
font-size: 1.5vw;
text-align: center;
}
.grid-item img {
object-fit: contain;
width: 10vw;
rwidth: 33.33%;
}
@media only screen and (max-width: 600px) {
.container1 {
position: relative;
text-align: center;
color: black;
font-size: 2.5vw;
}
.wphead1 {
position: absolute;
top: 0%;
left: 0%;
font-size: 4.2vw;
text-align: left;
width: 100%;
color: #c25e36;
}
.wphead2 {
position: absolute;
top: 3%;
left: 0%;
font-size: 9vw;
text-align: left;
width: 100%;
color: #c25e36;
}
.wphead3 {
position: absolute;
top: 21%;
left: 0%;
font-size: 4.3vw;
text-align: left;
width: 100%;
color: #c25e36;
}
.wphead4 {
position: absolute;
top: 27%;
left: 0px;
font-size: 6.8vw;
text-align: left;
width: 100%;
color: #c25e36;
}
.wpright {
position: absolute;
top: 0%;
right: 0%;
font-size: 1.4vw;
text-align: left;
width: 45%;
}
.wpad1 {
position: absolute;
top: 60%;
right: 0%;
font-size: 3vw;
text-align: center;
width: 100%;
}
.wpad2 {
position: absolute;
top: 68%;
right: 0%;
font-size: 2vw;
text-align: center;
width: 100%;
}
.wpad3 {
position: absolute;
top: 90%;
left: 50%;
transform: translate(-50%, -50%);
font-size: 1.5vw;
text-align: center;
width: 55%;
color: #0A4E80;
}
.relmass1 {
position: absolute;
top: 10%;
left: 8.5%;
font-size: 1.4vw;
text-align: left;
line-height: 100%;
width: 25%;
}
.relmass2 {
position: absolute;
top: 28%;
left: 8.5%;
font-size: 1.4vw;
text-align: left;
width: 26%;
line-height: 100%;
}
.relmass3 {
position: absolute;
top: 50.8%;
left: 8.5%;
font-size: 1.4vw;
text-align: left;
width: 26%;
line-height: 100%;
}
.relmass4 {
position: absolute;
top: 74%;
left: 8.5%;
font-size: 1.4vw;
text-align: left;
width: 26%;
line-height: 100%;
}
.relcrd {
position: absolute;
top: 17.8%;
right: 3.8%;
font-size: 1vw;
text-align: left;
width: 30%;
line-height: 100%;
}
.relphn {
position: absolute;
top: 34%;
left: 43.3%;
font-size: 1vw;
text-align: left;
width: 17%;
line-height: 100%;
}
.relhkey {
position: absolute;
top: 34%;
right: .8%;
font-size: 1vw;
text-align: left;
width: 24%;
line-height: 100%;
}
.relckey {
position: absolute;
top: 82%;
left: 45.5%;
font-size: 1vw;
text-align: left;
width: 20%;
line-height: 100%;
}
.relwlt {
position: absolute;
top: 81%;
right: 8.5%;
font-size: 1vw;
text-align: left;
width: 20%;
line-height: 100%;
}
.cggh {
position: absolute;
top: 6%;
left: 0%;
font-size: 3vw;
text-align: center;
width: 60%;
line-height: 100%;
}
.cggi {
position: absolute;
top: 13%;
left: 0%;
font-size: 2vw;
text-align: center;
width: 60%;
line-height: 100%;
}
.cggleft {
position: absolute;
top: 35%;
left: 17%;
font-size: 1vw;
text-align: left;
width: 8%;
line-height: 100%;
}
.cggmid {
position: absolute;
top: 58%;
left: 20%;
font-size: 1vw;
text-align: right;
width: 13%;
line-height: 100%;
}
.cggright {
position: absolute;
top: 73%;
right: 41%;
font-size: 1vw;
text-align: right;
width: 12%;
line-height: 100%;
}
.cggbot {
position: absolute;
bottom: 3%;
left: 15%;
font-size: 1.5vw;
text-align: center;
width: 45%;
line-height: 100%;
color: #0A4E80;
}
.cgg53 {
position: absolute;
top: 30%;
right: 9%;
font-size: 1.3vw;
text-align: center;
width: 20%;
line-height: 100%;
color: white;
}
.cgg48 {
position: absolute;
top: 71%;
right: 5%;
font-size: 1.3vw;
text-align: center;
width: 18%;
line-height: 100%;
color: white;
}
.ety {
font-size: 3vw;
text-align: center;
width: 100%;
line-height: 100%;
}
.ety1 {
font-size: 2vw;
text-align: center;
width: 100%;
line-height: 100%;
}
.ety2 {
font-size: 1.5vw;
text-align: center;
width: 55%;
line-height: 100%;
color: #0A4E80;
}
.grid-container {
display: grid;
grid-template-columns: auto auto auto;
width: 100%;
}
.grid-item {
font-size: 1.5vw;
text-align: center;
object-fit: contain;
}
.grid-item img {
object-fit: contain;
}
}
.grid-container {
display: grid;
grid-template-columns: auto auto auto;
width: 100%;
}
.grid-item {
font-size: 1.5vw;
text-align: center;
object-fit: contain;/* wrong place */
}
.grid-item img {
object-fit: contain;
}
</style>
<div class="container1">
<img src="https://cdn.shopify.com/s/files/1/0431/6184/5920/files/Blankwhite.jpg?v=1604940219" alt="WPHead" width="100%">
<div class="wphead1">THE SUPER SIMPLE</div>
<div class="wphead2">SCIENCE</div>
<div class="wphead3">OF PROMOTIONAL</div>
<div class="wphead4">PRODUCTS.</div>
<div class="wpright">There are pretty much three basic reasons why you'd be looking to order our products: To advertise to consumers in an effective way, To show your appreciation to existing or future clients, or to show your employees just how thankful you are for the work they do. <br>No matter the reasoning, we want to give you a simple look (through science, of course) on why promo merchandise is the best way to go about doing those things.</div>
<div class="wpad1">ADVERTISING TO OTHER COMPANIES.</div>
<div class="wpad2"><i>OTHERWISE KNOWN AS THE RELATIVITY OF MASS</i></div>
<div class="wpad3">There is no debate, your business card is an important part of marketing that holds vital information for possible clients. Unfortunately, humans tend to lose small items all the time, even ones that hold extreme value. Don't let your future relationships depend solely on a modest piece of cardstock.</div>
</div>
<div class="container1">
<img src="https://cdn.shopify.com/s/files/1/0431/6184/5920/files/relativity_of_mass.gif?v=1604440786" alt="WhyPromo" style="width: 100%;">
<div class="relmass1">A single promotional item averages <b style="color: #c25e36;">344</b> impressions per month.</div>
<div class="relmass2">
<b style="color: gold;">82%</b> of people have a more favorable impression of a brand after receiving a promotional product.</div>
<div class="relmass3">
<b style="color: blue;">72%</b> of consumers believe that the quality of a promotional product is directly related to the reputation of the company.</div>
<div class="relmass4">The CPI of promotional products can be as low as <b>1/10th</b> of one cent - lower than nearly any other advertising medium.</div>
<div class="relcrd">
<b>Your Beautiful Business Card</b><br>Size: 2" x 3.5"<br>Weight: 0.05216 oz</div>
<div class="relphn">
<b>Your customers' 1000+ dollar phone</b><br>Size: 5.95" x 2.76"<br>Weight: 6.84 oz</div>
<div class="relhkey">
<b>Your customers' key to their very expensive home</b><br>Size: 1.38" x 2.76"<br>Weight: 0.246918 oz</div>
<div class="relckey">
<b> Your customers' key to their very expensive car</b><br>Size: 54mm<br>Weight: 3.80 oz</div>
<div class="relwlt">
<b>The thing that holds your customers' money and important personal information</b><br>Size: 3.5" x 4.5"<br>Weight: 5 oz</div>
</div>
<div class="container1">
<img src="https://cdn.shopify.com/s/files/1/0431/6184/5920/files/client_gift_giving_circle.gif?v=1604953591" alt="Client-gift-giving" width="100%">
<div class="cggh">CLIENT GIFT-GIVING</div>
<div class="cggi">THE RELEASE OF OXYTOCIN</div>
<div class="cggleft">Client receives gift from you.</div>
<div class="cggmid">Oxytocin molecules are released in the body, creating that warm fuzzy feeling.</div>
<div class="cggright">Those feel good feelings are returned to you through repeat business.</div>
<div class="cgg53">of consumers have a more favorable opinion of an advertiser if the promo product was made in the U.S.</div>
<div class="cgg48">of consumers would like to receive promotional products more often.</div>
<div class="cggbot">(We recommend throwing in a nice,<br>handwritten note for maximum oxytocin levels)</div>
</div><br><br>
<!-- Not attached to any card, free floating -->
<div class="ety">EMPLOYEE THANK YOU'S.</div>
<div class="ety1">STOPPING THE SPREAD OF INFECTION</div><center>
<div class="ety2">While the spread of germs is an obvious threat, the spread of low morale can also create an unhealthy work environment. Rethink the way you reward your employees.</div>
</center><br><br>
<div class="grid-container">
<div class="grid-item"><b>High Five</b><br>Surface is covered in germs <br>which spread on contact. <br><br> <img src="https://cdn.shopify.com/s/files/1/0431/6184/5920/files/hands_1.png?v=1606939061" height=""></div>
<div class="grid-item"><b>Pizza Party</b><br>While everyone loves pizza, <br>the effects are not long-lasting. <br><br> <img src="https://cdn.shopify.com/s/files/1/0431/6184/5920/files/pizza_1.png?v=1606939061"></div>
<div class="grid-item"><a href="https://www.diamondbackbranding.com/collections/drinkware"><b>Branded Tumbler</b></a><br> Made of durable material that lasts,<br> it is very functional with their lifestyle,<br> and can be given with the company logo. <br><br> <img src="https://cdn.shopify.com/s/files/1/0431/6184/5920/files/drinkwear_1.png?v=1606939061"></div><br>
</div>
</div></div>
</main>
注意：原来的网站将样式元素放在 HTML 中，现在已经不是这样了，因此需要对其进行一些整理。