創建完美的可伸縮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）

回答

相關問題