Question

我目前正在设计我的网站，我希望能够调整网页的大小/缩放，而不会弄乱网站元素的流程。我知道正确使用％符号可以解决大部分流量问题，而且除了文本外，它似乎都能解决。如果我有一个简单的菜单，如下面的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/

Answer 1

您可以采取两种方法：

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

两种版本的自适应设计：

根据设备的大小更改页面布局（列数和内容在页面上的流动方式），并可选择缩放某些内容。一个很好的例子是The Boston Globe。
保持布局不变，统一缩放所有内容。 @rlemon为此提到了一个很好的link。我通过阅读Ethan Marcotte的电子书Responsive Web Design来学习它（不幸的是电子书不是免费的）。这种方法相对困难，限制了您的选择。

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

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

对于上面列出的第二种响应式设计，针对不同设备大小的一系列媒体查询以％为单位设置正文标记的基本字体大小，内容的所有大小单位均以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%;}

创建一个完美的可扩展div（jsFiddle）

1 个答案: