1

我编写了一个小网络应用程序，它向用户显示图像和欢迎信息。根据设备的不同，文本应与图像并排，或者图像应居中在一行中，而文本应居中在另一行中。代码在 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，我不喜欢图像和文本的重复。;)

4

1 回答 1

2

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

DEMO： http: //jsfiddle.net/3k2r6m4b/（尝试将 Demo 或浏览器窗口中的视口调整为宽度小于/大于 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;
    }
}
于 2015-08-06T22:42:32.630 回答