Question

我写了一个小的网络应用程序，向用户显示图像和欢迎信息。根据设备的不同，文本应与图像并排，或者图像应以一行为中心，文本应以另一行为中心。代码在JSF（Bootsfaces）中，但也可以用纯HTML编写。

<b:row>
  <p:graphicImage styleClass="col-md-4 hidden-xs hidden-sm" url="/resources/images/header.png" style="max-height: 200px; max-width: 200px;" />
  <p:graphicImage styleClass="center-block visible-xs visible-sm " url="/resources/images/header.png" style="max-height: 200px; max-width: 200px;" />
  <!-- header -->
  <div class="col-md-8 hidden-xs hidden-sm">
    <h:outputText styleClass="h1" value="#{langRes['index.welcomeHeadline']}" escape="false" />
    <p>
      <h:outputText value="#{langRes['index.welcomeText']}" escape="false" />
    </p>
  </div>
  <div class="text-center visible-xs visible-sm">
    <h:outputText styleClass="h1" value="#{langRes['index.welcomeHeadline']}" escape="false" />
    <p>
      <h:outputText value="#{langRes['index.welcomeText']}" escape="false" />
    </p>
  </div>
</b:row>

根据客户的屏幕尺寸隐藏和显示div是否正确？因为DRY，我不喜欢图像和文本的重复。 ;）

Answer 1

如果我理解正确，那么它是CSS媒体查询的用例：

DEMO： http://jsfiddle.net/3k2r6m4b/（尝试在演示或浏览器窗口中调整视口大小，使其宽度小于/大于500px）

代码示例：

<img src="http://cdn.sstatic.net/stackoverflow/img/apple-touch-icon.png?v=41f6e13ade69" class="IMAGE"/>
<div class="TEXT">Text Text Text .......</div>

<强> CSS：

.IMAGE{
    display: inline-block;
    border: 1px solid #BB0000;
    margin-right: 5px;
    vertical-align: middle;
}
.TEXT{
    display: inline-block;
    border: 1px solid #0000BB;
}

@media screen and (max-width: 600px){
    .IMAGE{
        display: block;
        margin-right: 0px;
    }
    .TEXT{
        display: block;
    }
}

（重新）将元素与引导程序对齐

1 个答案: