响应模式

常见响应模式

• 大体流动模型(mostly fluid)
• 掉落列模型(column drop)
• 活动布局模型(layout shifter)
• 画布溢出模型(off canvas)

掉落列模型

  

  

  



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

.box {
  width: 100%;
}

@media screen and (min-width: 450px) {
  .dark-blue {
    width: 25%;
  }

  .light-blue {
    width: 75%;
  }
}

@media screen and (min-width: 550px) {
  .dark-blue,
  .green {
    width: 25%;
  }

  .light-blue {
    width: 50%;
  }
}

大体流动模型

  

  

  

  

  



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

.box {
  width: 100%;
}

@media screen and (min-width: 450px) {
  .light-blue,
  .green {
    width: 50%;
  }
}

@media screen and (min-width: 550px) {
  .dark-blue,
  .light-blue {
    width: 50%;
  }

  .red,
  .green,
  .orange {
    width: 33.333333%;
  }
}

@media screen and (min-width: 700px) {
  .container {
    width: 700px;
    margin-left: auto;
    margin-right: auto;
  }
}

活动布局模型

  

  

    

    

  
  



.container {
  width: 100%;  /* .ddd */
  display: flex;
  flex-wrap: wrap;
}

.box {
  width: 100%;
}

@media screen and (min-width: 500px) {
  .dark-blue {
    width: 50%;
  } 
  #container2 {
    width: 50%;
  }
}

@media screen and (min-width: 600px) {
  .dark-blue {
    width: 25%;
    order: 1;
  } 
  #container2 {
    width: 50%;
  }
  .red {
    width: 25%;
    order: -1;
  } 
}

画布溢出模型

    
    
    
    
    
  
  
    

      
Off Canvas
      
Click outside the drawer to close
    

    

      
        
      
      
Click on the menu icon to open the drawer
    

    

@import url(https://fonts.googleapis.com/css?family=Roboto);

html, body {
  margin: 0;
  padding: 0;
}

body {
  font-family: 'Roboto', sans-serif;
}

.title {
  font-size: 2.5em;
  text-align: center;
}

.box {
  min-height: 150px;
}

.dark_blue {
  background-color: #2A457A;
  color: #efefef;
}

.light_blue {
  background-color: #099DD9;
}

.green {
  background-color: #0C8542;
}

.lime {
  background-color: rgb(179, 210, 52);
}

.seafoam {
  background-color: rgb(77, 190, 161);
}

.red {
  background-color: #EC1D3B;
}

.orange {
  background-color: #F79420;
}