CSS:根据屏幕尺寸对齐元素

Question

所以我正在编写一个程序，需要根据观众的屏幕尺寸调整元素的大小。该程序在 jsp/sql/xhtml/css 中，我有几个问题。

有没有办法通过将屏幕宽度保存到 jsp 变量来选择 css 文件？

有没有办法将一个 div 对齐到另一个 div 下面并将上面的 div 用作它的一种容器？这个问题有点复杂

目标:使图像下方带有文本标签。问题:该 div 是父 div 的一部分，而该 div 提供的图像会根据屏幕尺寸发生变化。

这就是我正在做的事情。

<div id="container">
<div id="inner">
    <div class="1">--stuff</div>
    <div class="2"><img src="server:8080/project?minutes=720&width=<%= out.print(width) %> </div> <-- want to align under this
    <div class="3">--stuff</div>
</div>
<div id="label"> <--Want this div aligned underneath "2"
    <div class="1">2.0</div> <-- Want the text at 25% of the image (right)
    <div class="2">4.0</div> <-- Want the text at 50% of the image (right)
    <div class="3">6.0</div> <-- Want the text at 75% of the image (right)
    <div class="4">8.0</div> <-- Want the text at 100% of the image (right)
</div>
</div>

Answer 1

您想要做的 - 响应式设计 - 非常酷，但也变得相当复杂。这需要一点学习，但是 CodeSchool 有一个高质量的类(class)，叫做 Journey Into Mobile涵盖自适应屏幕尺寸，应该让您走上正确的轨道。