如何使我的HTML文本響應？

因此，當我縮小它的文本時，我的圖像和框會響應瀏覽器窗口的大小。我嘗試了許多不同的東西：百分比，EMS和媒體查詢，但似乎沒有任何工作。也許我把他們錯了？如何使我的HTML文本響應？

下面是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>

來源

2014-01-10 user3182035

對於輔助功能，文本（字體大小）不響應任何調整大小，你不能這樣做只使用CSS。有一些JavaScript/jQuery腳本。請在提問時僅發帖**相關代碼 –

如果您的文字的大小與您的圖片的大小相同，那麼任何小分辨率的人都會得到完全無法辨認的文字，因爲它太小。但是，您可以使用CSS媒體查詢控制字體大小，以便在較小的分辨率下將字體縮小爲合理的大小。 –

@Adam哦雅，關於媒體查詢和字體大小的好主意，但你有任何這樣的例子？那麼應該使用許多媒體查詢？ –

的流動型庫（http://simplefocus.com/flowtype/）可能是你在找什麼。

來源

2014-01-10 14:08:39

@downvoter，請隨時發表評論 –

Upvoted甚至它 - 無需downvote，因爲這是一個很好的解決方案 – wickywills

如何使我的HTML文本響應？

回答

相關問題