Question

因此，当我将其缩小时，我的图像和框会响应浏览器窗口大小，但文本却没有。我尝试了很多不同的东西：百分比，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>

Answer 1

您可能正在寻找FlowType库（http://simplefocus.com/flowtype/）。

如何让我的HTML文本响应？

1 个答案: