Question

所以我有一个目前接受的queries.css

@media only screen and (max-width: 1140px){
  .row,
  .hero-img{
    width: 100%;
  }
}

@media only screen and (max-width: 930px){
  /* code */ 
}

但是当浏览器（chrome）的宽度为1023时，它会注册max-width：930px媒体查询的代码。

有谁知道这里的问题是什么。我看到其他帖子相关，他们曾说过使用min-width和meta标签，我做了两件事，但仍然会导致同样的问题。

当我尝试将代码写入我的1140px max-width媒体查询时，930px的媒体查询将覆盖该代码。

Answer 1

试试这个

<h:form id="form">
        <p:dataGrid id="prices" var="orderBooks" value="#{stocksView.latestPricesResults}" columns="3" rows="12">
                <f:facet name="header">
                    WST 100
                </f:facet>
                <p:column>
                <p:panel header="#{orderBooks.bidOrderId.member.memberId}">
            <h:panelGrid columns="1">
            <h:outputText value="#{orderBooks.price}" />
            <h:outputText value="#{orderBooks.bidOrderId.member.party}" />
            <h:outputText value="#{orderBooks.lastUpdate}" />
            <p:commandLink update=":form:buyDetail" oncomplete="PF('buyDialog').show()" title="View Detail">
                <h:outputText value="Buy"/>
                <f:setPropertyActionListener value="#{orderBooks}" target="#{stocksView.selectedStock}" />
            </p:commandLink>
            <p:commandLink update=":form:sellDetail" oncomplete="PF('sellDialog').show()" title="View Detail" rendered="#{stocksView.hasPortfolios[orderBooks.bidOrderId.member.memberId]}">
                <h:outputText value="Sell"/>
                <f:setPropertyActionListener value="#{orderBooks}" target="#{stocksView.selectedStock}" />
            </p:commandLink>
            </h:panelGrid>
            </p:panel>
            </p:column>
            </p:dataGrid>
 </h:form>

最大宽度媒体查询的宽度错误

1 个答案: