包含桌面视图的Framework7网格布局

Question

我知道framework7是为手机和平板电脑设计的，但是有什么方法可以包括或以某种方式调整css以使其与桌面兼容吗?我的场景是我有两个div元素，我想在桌面上并排查看。

  <div class="row">
      <div class="col-50">panel-1</div>
      <div class="col-50">panel-2</div>
    </div>  

但是在tablet/phone视图中，我希望两者都可以100%地查看。

 <div class="row">
      <div class="tablet-100">panel-1</div>
      <div class="tablet-100">panel-2</div>
    </div> 

我在下面尝试过，但是文档说tablet类是用于窗口宽度>= 768 on的，所以即使在桌面视图中，宽度也是100%。

<div class="row">
      <div class="col-50 tablet-100">panel-1</div>
      <div class="col-50 tablet-100">panel-2</div>
    </div> 

我正在考虑添加像桌面-XX这样的自定义css，但是如何添加它并覆盖当前的网格系统呢？事先提出任何建议都是非常感谢的！

Answer 1

@media (min-width:768px){
.col-50{
width:50%;
}
}

这应该能行