场景

你是否会遇到根据不同临界宽度，展示不同dom，并且同时需要保证某个部分始终展示的需求呢？

展示效果如图

image.png

考察基础点

1 媒体查询
2 flex布局

代码

codepen地址：https://codepen.io/robinson90/pen/KKdxMGR

  1. <div class="container">
  2.   <li class="item">
  3.     1
  4.   </li>  
  5.    <li class="item">
  6.     2
  7.   </li>
  8.    <li class="item">
  9.     3
  10.   </li>
  11. </div>
  1. *{
  2.   border:none;
  3.  margin:0;
  4.   padding:0;
  5. }
  6. li{
  7.   list-style:none;
  8. }
  9. .container{
  10.   display:flex;
  11.   .item{
  12.     flex:1;
  13.     border:1px solid red;
  14.     text-align:center;
  15.   }
  16. }
  17. @media only screen and (min-width:800px){
  19. }
  20. @media only screen and (min-width:400px) and (max-width:799px){
  21.   .item:nth-child(3n){
  22.     display:none;
  23.   }
  24. }
  25. @media only screen and (max-width:399px ){
  26.   .item:nth-child(3n+1){
  27.     display:none;
  28.   }
  29.    .item:nth-child(3n){
  30.     display:none;
  31.   }
  32. }

原测试题地址