Question

我把电线交叉在这里。我无法弄清楚如何开始：
根据屏幕尺寸，我的布局应该有一定数量的列。列数变化的位置应该有一些断点：例如：

低于1200像素的4列
低于1024 px的3列
低于900 px的2列
低于640像素的1列

在这些断点之间，列应为100％宽度，以便始终填充屏幕（响应）。

有什么想法吗？谢谢！

问候
塞巴斯蒂安

Answer 1

我认为CSS媒体查询正是您所寻找的：

@media (max-width: 640px) {
  element#id {
    property: value;
  }
}
@media (max-width: 900px) {
  element#id {
    property: value;
  }
}
@media (max-width: 1024px) {
  element#id {
    property: value;
  }
}
@media (max-width: 1200px) {
  element#id {
    property: value;
  }
}

希望这有帮助。

Answer 2

您可以使用css media queries根据屏幕尺寸更改布局..例如：

HTML

<div class='box'></div>

CSS

.box{
  display:inline-block;
  width:24%;
  height:100px;
  background:purple;
}
@media screen and(max-width:1024px){
  .box{
    width:32%;
  }
}
@media screen and(max-width:900px){
  .box{
    width:49%;
  }
}
@media screen and(max-width:640px){
  .box{
    width:100%;
  }
}

JSFiddle

更多阅读：

Answer 3

试试这些javascript方法Window Screen

根据屏幕尺寸的列数 - 具有流体列宽

3 个答案: