所以我在网站上工作，我必须让整个网站响应桌面设备，平板电脑和移动设备。我目前正在制作平板电脑部分，并且我将文字尺寸放大，以便在屏幕上阅读更容易，但是当我这样做时，它会在相应的彩色框外面流血。我如何使盒子的高度响应并改变以适应更大的文本呢？
这是我的HTML：
<!doctype html>
<html>
<head>
<meta charset="UTF-8">
<!-- This means that the browser will (probably) render the width of the page at the width of its own screen. -->
<meta name="viewport" content="width=device-width">
<title>Visual Resume 2.0</title>
<link href="https://fonts.googleapis.com/css?family=Caveat+Brush" rel="stylesheet">
<link href="css/resume2css.css" rel="stylesheet" type="text/css">
</head>
<body>
<main>
<header>
<img src="images/overlay2.png" alt="" width="583px" height="99px" class="overlay floating-block"/>
</header>
<section>
<img src="images/forestedited2.jpg" alt="" width="960px" height="450px" class="forestimg"/>
<img src="images/bordertop.png" alt="" width="1003" height="82" class="bordertop"/>
<aside>
</aside>
</section>
<article id="topcontainer">
<img src="images/profileimage.png" alt="" width="239" height="239" class="profileimg"/>
<p>
Donec volutpat, leo vel rhoncus ultrices, quam arcu dictum erat, non interdum eros mi ut elit. Curabitur nec augue quis urna aliquet consequat sit amet non lectus. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Curabitur at nunc eget mi pulvinar vestibulum at non ipsum. In eu nibh metus. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Mauris id turpis a risus malesuada sodales non vel libero. Cras euismod accumsan volutpat. Morbi consectetur, purus sed facilisis auctor, turpis dolor dictum purus, lacinia maximus ex odio non massa. Sed rhoncus, dolor a rhoncus eleifend, quam eros feugiat odio, vel luctus felis ante at leo. Praesent felis ex, venenatis dapibus mauris eu, aliquet tempus eros. Aenean vulputate sodales dui, id lacinia urna pellentesque eget.
<br>
<br>
“The future belongs to a different kind of person with a different kind of mind: artists, inventors, storytellers-creative and holistic ‘right-brain’ thinkers whose abilities mark the fault line between who gets ahead and who doesn’t.” <i><b>–Daniel Pink</b></i>
</p>
</article>
<section2>
<img src="images/borderbottom.png" alt="" width="1003" height="82" class="borderbottom"/>
</section2>
<div class="article">
<img src="images/title2.png" alt="" width="422" height="41" class="title2"/>
<h1>PHOTOSHOP</h1>
<div class="rectangle"></div>
<div class="rectangle2"></div>
<h2>ILLUSTRATOR</h2>
<div class="rectangle3"></div>
<h3>INDESIGN</h3>
<div class="rectangle4"></div>
<div class="rectangle5"></div>
<h4>DREAMWEAVER</h4>
<div class="rectangle6"></div>
<div class="rectangle7"></div>
<img src="images/skill1.png" alt="" width="22" height="41" class="skill1"/>
<img src="images/skill2.png" alt="" width="22" height="41" class="skill2"/>
<img src="images/skill3.png" alt="" width="22" height="41" class="skill3"/>
<p2>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse nec dui consectetur, sodales tellus vitae, gravida nisl. Nunc vitae aliquet nibh, ac fringilla nibh. Interdum et malesuada fames ac ante ipsum primis in faucibus.
<br>
<br>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse nec dui consectetur, sodales tellus vitae, gravida nisl. Nunc vitae aliquet nibh, ac fringilla nibh. Interdum et malesuada fames ac ante ipsum primis in faucibus.
<br>
<br>
Interdum et malesuada fames ac ante ipsum primis.
</p2>
</div>
<img src="images/bordertop2.png" alt="" width="1003" height="82" class="bordertop2"/>
<section id="section3">
<video preload controls>
<source src="FPOmovie.webm" type="video/webm">
<source src="FPOmovie.mp4" type="video/mp4">
Your browser does not support the video tag.</video>
</section>
<img src="images/borderbottom2.png" alt="" width="1003" height="82" class="borderbottom2"/>
<div class="section4">
<img src="images/title3.png" alt="" width="192px" height="29px" class="title3"/>
<img src="images/beerbottles.jpg" alt="" width="482px" height="369px" class="workpiece1"/>
<img src="images/busad.jpg" alt="" width="393px" height="369px" class="workpiece2"/>
<img src="images/billboard.jpg" alt="" width="482px" height="362px" class="workpiece3"/>
<img src="images/totebag2.jpg" alt="" width="393px" height="538px" class="workpiece4"/>
</div>
</main>
</body>
</html>
这是我的CSS：
@charset "UTF-8";
/* DESKTOP CSS */
/* document */
body{
margin:0;
align-content:center;
-webkit-background-size: cover;
-moz-background-size: cover;
-o-background-size: cover;
background-size: cover;
overflow: auto;
}
main{
width:960px; /* fixed width */
margin: 0 auto;
}
/*header*/
.forestimg{
width:100%;
}
.overlay{
float:left;
margin-top:220px;
margin-left: 180px;
margin-bottom: -500px;
postion: fixed;
opacity:50;
}
.floating-block{
position: fixed;
}
/*Biography Section*/
.bordertop{
float:inherit;
margin-top:-75px;
margin-left:-25px;
position:absolute;
}
.borderbottom{
float:inherit;
margin-top:-5px;
margin-left:-25px;
position:relative;
}
section2{
position:relative;
}
/*Skills Section*/
article{
margin-top:-10px;
background-color:#8bcfbd;
height:315px;
position:relative;
}
#topcontainer{
margin-top:-82px;
background-color:#FFF;
height:400px;
margin-top:25px;
position:relative;
}
aside{
background-color:#8bcfbd;
height: 170px;
float:inherit;
margin-top:-5px;
padding:0px;
}
.profileimg{
float:left;
margin-left:80px;
margin-top:30px;
}
p{
font-family:Gotham, Helvetica Neue, Helvetica, "Arial", sans-serif;
float:right;
width:510px;
font-size:12px;
color:#FFF;
margin-top:45px;
margin-right:70px;
}
p2{
font-family:Gotham, Helvetica Neue, Helvetica, "Arial", sans-serif;
font-size:12px;
color:#1f3c48;
width:510px;
margin-top:45px;
margin-right:70px;
float:right;
}
.title2{
float:right;
margin-top:40px;
margin-right:270px;
}
.rectangle{
width:140px;
height:10px;
background:#1f3c48;
float:right;
margin-top: 130px;
margin-bottom: -100px;
margin-left: 175px;
position:absolute;
}
.rectangle2{
width:32px;
height:10px;
background:#8bcfbd;
float:right;
margin-top: 130px;
margin-bottom: -100px;
margin-left: 283px;
position:absolute;
}
.rectangle3{
width:140px;
height:10px;
background:#1f3c48;
float:right;
margin-top: 160px;
margin-bottom: -100px;
margin-left: 175px;
position:absolute;
}
.rectangle4{
width:140px;
height:10px;
background:#1f3c48;
float:right;
margin-top: 190px;
margin-bottom: -100px;
margin-left: 175px;
position:absolute;
}
.rectangle5{
width:32px;
height:10px;
background:#8bcfbd;
float:right;
margin-top: 190px;
margin-bottom: -100px;
margin-left: 283px;
position:absolute;
}
.rectangle6{
width:140px;
height:10px;
background:#1f3c48;
float:right;
margin-top: 220px;
margin-bottom: -100px;
margin-left: 175px;
position:absolute;
}
.rectangle7{
width:62px;
height:10px;
background:#8bcfbd;
float:right;
margin-top: 220px;
margin-bottom: -100px;
margin-left: 253px;
position:absolute;
}
h1{
font-family:Gotham, Helvetica Neue, Helvetica, "Arial", sans-serif;
font-size:12px;
color:#1f3c48;
float:left;
margin-top: 128px;
margin-bottom: -100px;
margin-left: 60px;
position:absolute;
}
h2{
font-family:Gotham, Helvetica Neue, Helvetica, "Arial", sans-serif;
font-size:12px;
color:#1f3c48;
float:left;
margin-top: 158px;
margin-bottom: -120px;
margin-left: 60px;
position:absolute;
}
h3{
font-family:Gotham, Helvetica Neue, Helvetica, "Arial", sans-serif;
font-size:12px;
color:#1f3c48;
float:left;
margin-top: 188px;
margin-bottom: -120px;
margin-left: 60px;
position:absolute;
}
h4{
font-family:Gotham, Helvetica Neue, Helvetica, "Arial", sans-serif;
font-size:12px;
color:#1f3c48;
float:left;
margin-top: 218px;
margin-bottom: -120px;
margin-left: 60px;
position:absolute;
}
.skill1{
float:right;
margin-top:121px;
margin-left:350px;
position:absolute;
}
.skill2{
float:right;
margin-top:165px;
margin-left:350px;
position:absolute;
}
.skill3{
float:right;
margin-top:201px;
margin-left:350px;
position:absolute;
}
/*Video Section*/
#section3{
background-color:#1f3c48;
width: 100%;
position:relative;
}
.bordertop2{
position:relative;
margin-top:-80px;
float:left;
}
.borderbottom2{
margin-left:-25px;
float:left;
position:relative;
}
video {
width: 99.6%;
position:relative;
}
/*Examples of Work Section*/
.section4{
height:1000px;
}
.title3{
float:right;
margin-top:60px;
margin-right:380px;
position:relative;
}
.workpiece1{
float:left;
margin-top:100px;
margin-right:-100px;
position:relative;
border: 10px solid #1f3c48;
}
.workpiece2{
float:left;
margin-top:100px;
margin-left:120px;
position:relative;
border: 10px solid #1f3c48;
}
.workpiece3{
float:left;
margin-top:30px;
margin-right:-100px;
position:relative;
border: 10px solid #1f3c48;
}
.workpiece4{
float:left;
margin-top:30px;
margin-left:120px;
position:relative;
border: 10px solid #1f3c48;
}
/* TABLET CSS */
@media only screen and (max-device-width : 768px) {
#topcontainer{
height: auto;
}
p{
font-size:16px;
}
}