创建完美的可伸缩div（jsFiddle）

我目前正在设计我的网站，我希望能够调整/缩放网页而不会搞乱网站元素的流动。我意识到，％符号的正确使用可以解决大部分流程问题，并且它似乎适用于除文本之外的所有内容。如果我在下面的jsfiddle中有一个简单的菜单。菜单div的宽度可以说是％30。我希望菜单容器中的文本可以按比例缩放，而不会缠绕或者输入一个新的行，这是我无法避免的。以下段落中仍存在同样的问题。有没有办法做到这一点？创建完美的可伸缩div（jsFiddle）

<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/

来源

2012-06-11 AnchovyLegend

您需要在SVG中执行此操作。 – RGB

你想恳求使用[媒体查询]（http://mediaqueri.es/“我只是一个网站的例子”） – rlemon

[Here]（http://www.alistapart.com/articles/responsive-网页设计/）也是一篇文章，解释什么以及如何使用响应式设计。我不知道@RGB与SVG有什么关系？也许你可以详细说明？ – rlemon

两种方法可以采取：

使用视meta标签缩放页面的设备的宽度（的范围内，浏览器支持）
响应式设计：使用一系列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%;}

来源

2012-06-11 21:22:25

创建完美的可伸缩div（jsFiddle）

回答

相关问题