【发布时间】：2014-01-29 13:00:51
【问题描述】：
因此，当我缩小它时，我的图像和框会响应浏览器窗口的大小，但文本不会。我尝试了很多不同的东西：百分比、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>
【问题讨论】：
-
对于可访问性，文本（字体大小）不会响应任何大小调整，您不能仅使用 CSS 来做到这一点。有一些 javascript/jquery 脚本。请在提出问题时仅发布相关代码
-
如果您的文本以与图像相同的方式调整大小，那么任何使用小分辨率的人都会得到完全难以辨认的文本，因为它太小了。但是，您可以使用 css 媒体查询来控制字体大小，这样您就可以在较小的分辨率上将字体减小到合理的大小。
-
@Adam 哦耶，关于媒体查询和字体大小的好主意，但你有什么例子吗？那么是否应该使用许多媒体查询？
-
大多数响应式网站仅调整布局元素或绘图 (canvas/svg) 的大小，而不是实际内容。无论屏幕有多大，人们通常仍希望内容具有相同的绝对大小（移动设备主要为您处理内容缩放）。这就是为什么真的没有内置内容调整大小的框架以及为什么 css 并不直接支持这一点的原因。由于这个原因，您可能会重新考虑您正在尝试做的事情。当您使用 px 或 em 调整大小时，重点是您要指定它应该有多大，而不管视口如何。
-
我通常会先为手机/小型设备编写我所有的 css（在 320px 视口）。然后使用
@media (min-width: 40.5em)覆盖移动样式，让桌面上的一切看起来都很好。然后根据您的要求，您可能需要为中间的位添加额外的查询。
标签： javascript jquery html css iframe