列表视图的响应式设计代码

Question

我想设计一个响应式的网页，列出项目的链接和描述，如在dzone时事通讯视图https://dzone.com/pages/daily-example的网页，预计将与网络和移动设备兼容。

我可以使用什么技术？我能用css和html做到这一点吗？

Answer 1

您可以使用HTML和CSS、使用框架或从头开始进行类似的布局。关于动态设计，你应该研究和理解CSS中的相对单位和绝对单位，以及关于每种单位用法的最佳实践。

Answer 2

如前所述，bootstrap非常适合(参见网格部分)

http://getbootstrap.com/

您还可以使用一些css来根据屏幕的大小创建断点。下面是使用sass (http://sass-lang.com/)完成的一项操作：

@mixin breakpoint($class) {
  @if $class == xs {
    @media (max-width: 767px) { @content; }
  }
  @else if $class == sm {
    @media (min-width: 768px) { @content; }
  }
  @else if $class == md {
    @media (min-width: 992px) { @content; }
  }
  @else if $class == lg {
    @media (min-width: 1200px) { @content; }
  }
  @else if $class == xlg {
    @media (min-width: 1367px) { @content; }
  }
  @else {
    @warn "Breakpoint mixin supports: xs, sm, md, lg";
  }
}

然后您可以这样使用它：

div {
   width: 100px; // on mobile
   @include breakpoint(sm) { // tablet an bigger
      width: 200px; 
   }

}