液体布局与可调整大小的火花线图 [英] Liquid layout with resizable sparkline graphs
问题描述
我需要在网页中包含一些简单的（火花线样式）图形
，它将具有流畅的布局。一些观众将更改字体
尺寸以适合他们的显示器（尺寸范围从320到2560像素）。我希望
图表改变大小与字体放大观众成比例
使用。
我做过这种事情一次之前在
http://cyclonestudios.com.au/aboutus/ projects.html
其中每个项目下的小色块显示处理了哪个设计和
建筑阶段，以及大致的项目成本。这是
刚刚使用em进行大小调整。
例如
< dt> 1997普罗瑟派医院< / dt>
< dd>与Peddle Thorp合作的重大重建。
<！ -
$ 750万
所有阶段
- >
< div style =" width：7.5em;边框式：坚固; border-width：0 0 0.3em
0; border-color：＃444＃444＃d6ba1c＃444;">< / div>
< div style =" width：7.5em;边框式：坚固; border-width：0 0 0.3em
0; border-color：＃444＃444＃75fb78＃444;">< / div>
< div style =" width：7.5em;边框式：坚固; border-width：0 0 0.3em
0; border-color：＃444＃444＃faba75＃444;">< / div>
< div style =" width：7.5em;边框式：坚固; border-width：0 0 0.3em
0; border-color：＃444＃444＃54a4db＃444;">< / div>
< div style =" width：7.5em;边框式：坚固; border-width：0 0 0.3em
0; border-color：＃444＃444＃6cf0de＃444;">< / div>
< / dd>
是否有人熟悉使用更好的方法来处理简单的可调整大小的图形
而不仅仅是使用em
大小来设置div（或者可能在新图表中）？
-
http://www.ericlindsay.com
I need to include some simple (sparkline style) graphs in a web page
that will have a liquid layout. Some viewers will be changing the font
size to suit their display (sizes range from 320 to 2560 pixels). I want
the graphs to change size proportional to the font enlargement viewers
use.
I did this sort of thing once before at
http://cyclonestudios.com.au/aboutus/projects.html
where the little colour patches under each project show which design and
building stages were handled, and the approximate project cost. This was
just done with divs sized using em.
e.g.
<dt>1997 Proserpine Hospital</dt>
<dd>Major Redevelopment in association with Peddle Thorp.
<!--
$7.5m
All stages
-->
<div style="width: 7.5em; border-style: solid; border-width: 0 0 0.3em
0; border-color: #444 #444 #d6ba1c #444;"></div>
<div style="width: 7.5em; border-style: solid; border-width: 0 0 0.3em
0; border-color: #444 #444 #75fb78 #444;"></div>
<div style="width: 7.5em; border-style: solid; border-width: 0 0 0.3em
0; border-color: #444 #444 #faba75 #444;"></div>
<div style="width: 7.5em; border-style: solid; border-width: 0 0 0.3em
0; border-color: #444 #444 #54a4db #444;"></div>
<div style="width: 7.5em; border-style: solid; border-width: 0 0 0.3em
0; border-color: #444 #444 #6cf0de #444;"></div>
</dd>
Is anyone familiar with a better approach to simple resizable graphs
than just styling divs (or spans probably in the new graphs) with em
sizes?
--
http://www.ericlindsay.com
推荐答案
7.5m
所有阶段
- >
< div style =" width：7.5em;边框式：坚固; border-width：0 0 0.3em
0; border-color：＃444＃444＃d6ba1c＃444;">< / div>
< div style =" width：7.5em;边框式：坚固; border-width：0 0 0.3em
0; border-color：＃444＃444＃75fb78＃444;">< / div>
< div style =" width：7.5em;边框式：坚固; border-width：0 0 0.3em
0; border-color：＃444＃444＃faba75＃444;">< / div>
< div style =" width：7.5em;边框式：坚固; border-width：0 0 0.3em
0; border-color：＃444＃444＃54a4db＃444;">< / div>
< div style =" width：7.5em;边框式：坚固; border-width：0 0 0.3em
0; border-color：＃444＃444＃6cf0de＃444;">< / div>
< / dd>
是否有人熟悉使用更好的方法来处理简单的可调整大小的图形
而不仅仅是使用em
大小来设置div（或者可能在新图表中）？
-
http://www.ericlindsay.com
7.5m
All stages
-->
<div style="width: 7.5em; border-style: solid; border-width: 0 0 0.3em
0; border-color: #444 #444 #d6ba1c #444;"></div>
<div style="width: 7.5em; border-style: solid; border-width: 0 0 0.3em
0; border-color: #444 #444 #75fb78 #444;"></div>
<div style="width: 7.5em; border-style: solid; border-width: 0 0 0.3em
0; border-color: #444 #444 #faba75 #444;"></div>
<div style="width: 7.5em; border-style: solid; border-width: 0 0 0.3em
0; border-color: #444 #444 #54a4db #444;"></div>
<div style="width: 7.5em; border-style: solid; border-width: 0 0 0.3em
0; border-color: #444 #444 #6cf0de #444;"></div>
</dd>
Is anyone familiar with a better approach to simple resizable graphs
than just styling divs (or spans probably in the new graphs) with em
sizes?
--
http://www.ericlindsay.com
Eric Lindsay写道：
Eric Lindsay wrote:
我需要在网页中包含一些简单的（火花线样式）图表/>
将采用流畅的布局。一些观众将更改字体
尺寸以适合他们的显示器（尺寸范围从320到2560像素）。我希望
图表改变大小与字体放大观众成比例
使用。
我做过这种事情一次之前在
http://cyclonestudios.com.au/aboutus/ projects.html
其中每个项目下的小色块显示处理了哪个设计和
建筑阶段，以及大致的项目成本。这是
刚刚使用em进行大小调整。
例如
< dt> 1997普罗瑟派医院< / dt>
< dd>与Peddle Thorp合作的重大重建。
<！ -
I need to include some simple (sparkline style) graphs in a web page
that will have a liquid layout. Some viewers will be changing the font
size to suit their display (sizes range from 320 to 2560 pixels). I want
the graphs to change size proportional to the font enlargement viewers
use.
I did this sort of thing once before at
http://cyclonestudios.com.au/aboutus/projects.html
where the little colour patches under each project show which design and
building stages were handled, and the approximate project cost. This was
just done with divs sized using em.
e.g.
<dt>1997 Proserpine Hospital</dt>
<dd>Major Redevelopment in association with Peddle Thorp.
<!--
7.5m
所有阶段
- >
< div style =" width：7.5em;边框式：坚固; border-width：0 0 0.3em
0; border-color：＃444＃444＃d6ba1c＃444;">< / div>
< div style =" width：7.5em;边框式：坚固; border-width：0 0 0.3em
0; border-color：＃444＃444＃75fb78＃444;">< / div>
< div style =" width：7.5em;边框式：坚固; border-width：0 0 0.3em
0; border-color：＃444＃444＃faba75＃444;">< / div>
< div style =" width：7.5em;边框式：坚固; border-width：0 0 0.3em
0; border-color：＃444＃444＃54a4db＃444;">< / div>
< div style =" width：7.5em;边框式：坚固; border-width：0 0 0.3em
0; border-color：＃444＃444＃6cf0de＃444;">< / div>
< / dd>
是否有人熟悉使用更好的方法来处理简单的可调整大小的图形
而不仅仅是使用em
尺寸来设置div（或者可能在新图表中）？
7.5m
All stages
-->
<div style="width: 7.5em; border-style: solid; border-width: 0 0 0.3em
0; border-color: #444 #444 #d6ba1c #444;"></div>
<div style="width: 7.5em; border-style: solid; border-width: 0 0 0.3em
0; border-color: #444 #444 #75fb78 #444;"></div>
<div style="width: 7.5em; border-style: solid; border-width: 0 0 0.3em
0; border-color: #444 #444 #faba75 #444;"></div>
<div style="width: 7.5em; border-style: solid; border-width: 0 0 0.3em
0; border-color: #444 #444 #54a4db #444;"></div>
<div style="width: 7.5em; border-style: solid; border-width: 0 0 0.3em
0; border-color: #444 #444 #6cf0de #444;"></div>
</dd>
Is anyone familiar with a better approach to simple resizable graphs
than just styling divs (or spans probably in the new graphs) with em
sizes?
我会使用单色图像，可以伸展到你需要的任何东西
< img src =" bar.gif"高度= QUOT; 10"宽度= QUOT; 50" alt =" 50％">
< img src =" bar.gif"高度= QUOT; 10"宽度= QUOT; 23" alt =" 23％"> ...
-
保重，
Jonathan
-------------------
LITTLE WORKS STUDIO
http://www.LittleWorksStudio.com
这篇关于液体布局与可调整大小的火花线图的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
