使用筆記本電腦和手機的不同元素？

Question

構架：Meteor

我正在使用Handlebars向客戶端發送信息。

我有這樣的佈局定義了一個名爲post.html：

<div class="card"> 
     <div class="card-image waves-effect waves-block waves-light"> 
      <img class="activator" src="{{image}}"> 
     </div> 
     <div class="card-content"> 
      <span class="card-title activator grey-text text-darken-4"><a href="/{{slug}}">{{title}}</a><i class="mdi-navigation-more-vert right"></i></span> 

     <div class="card-reveal"> 
      <span class="card-title grey-text text-darken-4">{{title}}<i class="mdi-navigation-close right"></i></span> 
      <p class="tobeappeded">{{body}}</p> 
     </div> 
    </div> 

通知的Card佈局。

現在這是響應和工作，我沒有問題，如何使其響應？有用。

我想徹底改變這種佈局，並在佈局中使用其他元素。

我知道這可以通過使用JS通過操縱DOM，並附加HTML，但可以實現沒有JS？

也許就像中，JS是用來發現屏幕尺寸，什麼only，如果是，它呈現的佈局數量1，否則，它呈現的佈局數量2。

[把它看成是媒體查詢，但對於HTML/JS]

你也可以考慮一下如何在Android Fragments工作。

Answer 1

您可以使用window.matchMedia()這樣做，這基本上是JavaScript中的媒體查詢。如果它符合你的條件，相應地加載你的模板。

https://developer.mozilla.org/en-US/docs/Web/API/Window/matchMedia