Question

我正在努力学习如何创建响应式设计，并且实际上有一些问题。首先，我可以在BLOCK4下以samller分辨率移动BLOCK2吗？（我的媒体查询最大宽度为{3}}

这是css：

let rightSwipe = UISwipeGestureRecognizer(target: self, action: Selector("swiped:"))
rightSwipe.direction = .Right
self.segmentController.addGestureRecognizer(rightSwipe)

这是html：

    div.block1 {
  float: left;
  width: 200px;
  text-align: center;
  ;
  background-color: #004e52
}
div.right {
  margin-left: 200px;
  overflow: hidden
}
div.block2 {
  margin-top: 10px;
  float: right;
  width: 200px;
  text-align: center;
  background-color: #004e52
}
div.center {
  margin-right: 200px
}
div.block3 {
  margin: 10px;
  text-align: center;
  background-color: #004e52
}
div.block4 {
  margin: 10px;
  text-align: center;
  background-color: #004e52
}

谢谢！

Answer 1

试试这个https://jsfiddle.net/2Lzo9vfc/87/

<强> HTML

<header>
    This is header
</header>
<div class="main">
    <div class="block block-1">
        <p>This is box 1</p>
    </div>
    <div class="block block-2">
        <p>This is box 2</p>
    </div>
    <div class="row">
        <div class="block block-3">
            <p>This is box 3</p>
        </div>
        <div class="block block-4">
            <p>This is box 4</p>
        </div>
    </div>
</div>

<强> CSS

.main {
    display: flex;
    flex-wrap: wrap;
}

.block {
    background: #004E52;
    color: white;
    margin: 5px;
}

.block-1, .block-2 {
    padding: 100px 20px;
    flex: 0 0 auto;
}

.block-1 {
    order: 1;
}

.row {
    order: 2;
}

.block-2 {
    order: 4;
}

.row {
    flex: 1 1 0;
}

.block-3, .block-4 {
    padding: 35px 100px;
}

Answer 2

我认为最好的方法是重新排序和重新组合一些元素。

<header>
</header>
<div id="block1"></div>
<div id="main container">
<div id="block3"></div>
<div id="block4"></div>
</div>
<div id="block2"></div>

然后漂浮在大屏幕上并移除小屏幕上的浮动

body > div{
    float:left;
}

@media screen and (max-width:738px){
    body > div{
        float:none;
    }
}

响应式设计

2 个答案: