因此，当我缩小浏览器窗口大小时，我的图像和框会响应浏览器窗口大小，但文本不会响应。我尝试过很多不同的东西:百分比、ems 和媒体查询，但似乎都不起作用。也许我把它们放错了？
这是 CSS 代码:
body {
font-family: "Lucida Grande", "Lucida Sans Unicode", "Lucida Sans", Geneva, Verdana, sans-serif;
font-size:12px;
background: #394BA0;
color:#C180E4;
border-color:#88C6ED;
}
#wrapper {
width:62.7%;
margin:0px auto;
border:1px solid #bbb;
padding:10px;
height: 1199px;
}
#header {
border:1px solid #bbb;
height:100px;
padding:10px;
}
#content-left {
width: 21%;
height: 61.4%;
border:1px solid #bbb;
float: left;
margin-top: 0.4%;
}
#content-main {
float: center;
width: 77%;
height: 61.3%;
border:1px solid #bbb;
margin-top: 0.5%;
margin-left:23%;
word-wrap: break-word;
}
#content-box1 {
width: 49%;
height: 26%;
margin-top: 1%;
float: left;
}
#content-box2 {
width: 49%;
height: 26%;
border:0px solid #bbb;
margin-top: 2%;
margin-left:51%;
float: center;
}
这是我的主页的代码:
<html>
<head>
<link rel="stylesheet" type="text/css" href="Responsive Web design CSS.css">
<style>
a:link {color:#C180E4; font-style: normal;} /* unvisited link */
h2 {text-align:center}
h3 {text-align:center}
h3 {margin-top:50%}
</style>
</head>
<body>
<div id="wrapper">
<div id="header">
<h2><font size="6">Locked Down Data</font></h2>
</div>
<div id="content-box1">
<p><img src="download.jpg" width="99%" height="94%" border="1px" alt="picture1"></p>
</div>
<div id="content-box2">
<p><img src="foto-locked-down-iphone.jpg" width="99%" height="94%" border="1px" alt="picture2"></p>
</div>
<div id="content-left">
<h1><font size="5"> Menu</font></h1>
<p><font size="4"><a href="Home Page.html"> -Home</a></font></p>
<p><font size="4"><a href="Page 2 - Threats.html"> -Threats</a></font></p>
<p><font size="4"><a href="Page 3 - Protection.html"> -Protection</a></font></p>
<p><font size="4"><a href="Page 4 - Pracitcal Application.html"> -Practical Application</a></font></p>
<p><font size="4"><a href="Page 5 - Contact.html"> -Contact</a></font></p>
<h3><img src="it-security.png" width="79%" height="30%" alt="picture2" /></h3>
</div>
<div id="content-main">
Aenean ac turpis lectus. Vestibulum vel nulla eget libero tristique egestas venenatis id est. Mauris dictum ac nulla ullamcorper accumsan. Donec ipsum metus, molestie sit amet pretium a, adipiscing ac tellus. Nulla eu ullamcorper enim. Aliquam adipiscing facilisis erat ultrices aliquam. Nam eu libero est. Mauris semper urna rutrum, suscipit erat ut, varius lectus. Aenean ut orci lobortis ante ultricies facilisis. Curabitur tempus orci et eleifend fermentum. Etiam pharetra mauris sed consequat commodo. Quisque at lacus non massa consequat consequat mattis sit amet elit. Aliquam in tellus faucibus, aliquet mi at, faucibus neque.
<p><iframe width="56%" height="31%" src="http://www.youtube.com/embed/W90gNMoeY6c" frameborder="0" allowfullscreen></iframe></p>
</div>
</body>
</html>
最佳答案
FlowType 库 ( http://simplefocus.com/flowtype/ ) 可能就是您正在寻找的。
关于javascript - 如何使 HTML 中的文本响应式？，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/21046283/