1

我目前正在设计我的网站，我希望能够在不打乱网站元素流程的情况下调整/缩放网页的大小。我知道正确使用 % 符号可以解决大部分的流程问题，而且它似乎适用于除文本之外的所有内容。如果我有一个简单的菜单，比如下面的 jsfiddle。菜单 div 的宽度可以说是 %30。我希望菜单容器中的文本可以缩放到大小，而不需要环绕或输入新行，这似乎是我无法避免的。下面的段落中仍然存在同样的问题。有没有办法做到这一点？

<html>
<head>
<title>Scalable</title>
</head>
<body>

<div style="height:800px; border:1px solid green; width:900px; margin-left:auto; margin-right:auto; " >
    <img src="http://files.prof-web-diego.webnode.pt/200000028-04da905d3d/Oxford_Silhouette_Web_Banner.jpg" style="width:50%; height:auto;"/>
    <div style="float:right; width:30%;  border:2px solid blue; font-size:11px;">
        <a href="#">Home<a> |
        <a href="#">Store<a> |
        <a href="#">Contact<a> |
        <a href="#">About<a> |
        <a href="#">Pictures<a> |
        <a href="#">Entertainment<a> |
    </div>

    <div style="border:1px solid #ddd; width:65%;">
    <p>
    Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vivamus vehicula velit in lectus dapibus porta. Sed pulvinar ultrices ipsum vitae gravida. Vestibulum at metus dolor. Nunc pulvinar nisl nec libero sodales faucibus. Quisque tincidunt risus vitae risus tempor viverra. Vestibulum interdum eros in tellus blandit vulputate. Suspendisse eget ante purus, sit amet semper purus. Nam lacinia magna a mi euismod sit amet rhoncus dolor congue. Mauris pharetra laoreet accumsan. Ut quis velit ac nisl rutrum varius nec nec orci.

Vestibulum quis tellus neque, a scelerisque est. In varius ante eget purus fringilla in aliquet massa convallis. Vestibulum in scelerisque ligula. Nulla a neque nibh. Maecenas tristique, odio nec scelerisque tincidunt, sem orci tempus nulla, eu tincidunt dolor sapien ut lorem. Donec aliquet, eros nec blandit adipiscing, leo est malesuada nulla, vel adipiscing sem risus quis ante. Proin rutrum ultrices dolor, quis auctor sem feugiat sit amet. Morbi in tellus nisl, et iaculis turpis. Cras ligula velit, pharetra vitae imperdiet nec, commodo quis erat. Aenean iaculis nunc nec nunc dignissim aliquam. In venenatis, orci vitae pretium elementum, lorem lorem sagittis est, a consectetur est lacus accumsan elit. Vestibulum iaculis hendrerit elit, nec vulputate nunc ornare sit amet. Fusce nisi risus, auctor vitae pellentesque ut, pulvinar nec nisi. Aenean nec nunc augue, non imperdiet arcu. Integer interdum orci non diam tristique ut tristique risus adipiscing. Vestibulum tellus orci, lobortis vel sollicitudin vel, gravida sed dui.

Vestibulum eu dui ni
    </p>

    </div>

</div>

</body>
</html>​

jsFiddle

http://jsfiddle.net/6UyYa/

4

1 回答 1

0

您可以采取两种方法：

  1. 使用视口元标记将页面缩放到设备的宽度（在浏览器支持的范围内）
  2. 响应式设计：使用一系列 CSS 媒体查询来根据设备的大小调整内容。

响应式设计的两个版本：

  1. 根据设备的大小更改页面布局（列数和页面上内容的流动方式），并可选择缩放某些内容。波士顿环球报就是一个很好的例子。
  2. 保持布局不变并统一缩放所有内容。@rlemon 提到了一个很好的链接。我是通过阅读 Ethan Marcotte 的电子书Responsive Web Design了解到的（不幸的是，这本电子书不是免费的）。这种方法相对困难，并且限制了您的选择。

在响应式设计的两个版本中，对内容的更改完全由 CSS 媒体查询（而不是 JavaScript）触发。并且 HTML 不会改变。只有 HTML 的样式会发生变化。

第一种类型的响应式设计似乎比第二种类型使用得更广泛。

对于上面列出的第二种响应式设计，针对不同设备尺寸的一系列媒体查询以 % 为 body 标签设置了基本字体大小，并且内容的所有尺寸单位都以 em 或 % 而不是 px 指定（使用绝对不使用 px 作为内容本身）。所有内容都根据使用的媒体查询进行缩放。

此外，在第二种类型的响应式设计中，很少或根本不使用背景图像（至少，根据我的经验）。img 标签用于几乎所有图像，通过 CSS 按比例缩放 img 标签的特殊技巧。以下代码按比例将图像缩放到其父容器的全宽：

<img class="my-image" src="image.png"/>   <!-- No width or height attribute -->

.my-image {max-width:100%; width:100%;}
于 2012-06-11T21:22:25.290 回答