CSS 网格边框无响应

Question

下面的 CSS 在显示器上运行良好，但在手机上查看时网格周围没有边框，尽管布局很好但边框已经消失。不确定是什么问题。

为元素列表寻找容器 - 我只是认为这是与列表相反的最佳方式。

我在@media 中放置了边框

    /*-------------GRID------------*/
    
    *,
    *:before,
    *:after {
      box-sizing: border-box;
        border-radius: 25px;
        background-color: dfe1ee;
    }
    
    body {
      margin: 40px;
      background-color: #dfe1ee;
      color: #444;
    }
    
    img {
      max-width: 100%;
    }
    
    h1,
    p {
      margin: 0 0 1em 0;
    }
    
    .media {
      margin-bottom: 2em;
      border: 5px solid #dfe1ee;
      padding: 10px;
    }
    
    .media > .title { grid-area: title; }
    .media > .img { grid-area: img; }
    .media > .content { grid-area: bd; }
    .media > .footer { grid-area: ft; }
    
    .media {
      display: grid;
      grid-column-gap: 20px;
      grid-template-areas:
        "title"
        "img"
        "bd"
        "ft";
    }
    
    
    @media (min-width: 600px) {
    
      /* clearfix*/
      .media:after {
        content: "";
          border: 15px solid #dfe1ee;
        display: block;
        clear: both;
         border-radius: 25px;
        background-color: dfe1ee;
          box-sizing: border-box;
      }
    
      .media > .media {
        margin-left: 160px;
        clear: both;
          border: 5px solid #dfe1ee;
      }
    
      .media .img {
        float: left;
        margin: 0 10px 0 0;
        width: 150px;
      }
      
      .media .footer {
        background-color: #eee;
        padding: 10px;
      }
    
      .media.media-flip .img {
        float: right;
        margin: 0 0 0 10px;
      }
    
      .media > * {
        margin: 0 0 0 160px;
      }
    
      .media.media-flip > * {
        margin: 0 160px 0 0;
      }
    
      @supports(display: grid ) {
        /* override */
        .media > *,
        .media.media-flip > * {
          margin: 0;
        }
        .media .img,
        .media.media-flip .img {
          width: auto;
          margin: 0;
        }
        .media:after {
          content: none;
        }
    
        .media {
          display: grid;
          grid-column-gap: 20px;
          grid-template-columns: 150px 3fr;
          grid-template-rows: auto 1fr auto;
          grid-template-areas:
            "img title"
            "img bd"
            "ft ft";
        }
    
        .media.media-flip {
          grid-template-columns: 3fr 150px ;
          grid-template-areas:
            "title img"
            "bd img"
            "ft ft";
        }
    
        .media.img-flexie {
          grid-template-columns: minmax(150px, 1fr) 3fr;
        }
    
        .media.media-flip.img-flexie {
          grid-template-columns: 3fr minmax(150px, 1fr);
        }
    
        /* nested */
        .media > .media {
          grid-column: 2 / -1 ;
          margin: 0; /* override */
          margin-top: 1em;
        }
      }
    
    
    }
    
    /*-------------GRID------------*/

<div class='media'>
  <div class='img'>
    <img src='https://via.placeholder.com/100' width=100>
  </div>
  <div class='content'>
    <p align='right'> STUFF </p>
  </div>
  <div class='footer'> OTHER STUFF </div>
</div>

确实需要一个弧形框来勾勒内容。

Answer 1

不确定你的情况，但我在任何视口(viewport)尺寸上都看到了边框？

/*-------------GRID------------*/
    
    *,
    *:before,
    *:after {
      box-sizing: border-box;
    	border-radius: 25px;
    	background-color: dfe1ee;
    }
    
    body {
      margin: 40px;
      background-color: #dfe1ee;
      color: #444;
    }
    
    img {
      max-width: 100%;
    }
    
    h1,
    p {
      margin: 0 0 1em 0;
    }
    
    .media {
      margin-bottom: 2em;
      border: 5px solid red;
      padding: 10px;
    }
    
    .media > .title { grid-area: title; }
    .media > .img { grid-area: img; }
    .media > .content { grid-area: bd; }
    .media > .footer { grid-area: ft; }
    
    .media {
      display: grid;
      grid-column-gap: 20px;
      grid-template-areas:
        "title"
        "img"
        "bd"
        "ft";
    }
    
    
    @media (min-width: 600px) {
    
      /* clearfix*/
      .media:after {
        content: "";
    	  border: 15px solid #dfe1ee;
        display: block;
        clear: both;
    	  border-radius: 25px;
    	  background-color: dfe1ee;
    	  box-sizing: border-box;
      }
    
      .media > .media {
        margin-left: 160px;
        clear: both;
    	  border: 5px solid #dfe1ee;
      }
    
      .media .img {
        float: left;
        margin: 0 10px 0 0;
        width: 150px;
      }
      
      .media .footer {
        background-color: #eee;
        padding: 10px;
      }
    
      .media.media-flip .img {
        float: right;
        margin: 0 0 0 10px;
      }
    
      .media > * {
        margin: 0 0 0 160px;
      }
    
      .media.media-flip > * {
        margin: 0 160px 0 0;
      }
    
      @supports(display: grid ) {
        /* override */
        .media > *,
        .media.media-flip > * {
          margin: 0;
        }
        .media .img,
        .media.media-flip .img {
          width: auto;
          margin: 0;
        }
        .media:after {
          content: none;
        }
    
        .media {
          display: grid;
          grid-column-gap: 20px;
          grid-template-columns: 150px 3fr;
          grid-template-rows: auto 1fr auto;
          grid-template-areas:
            "img title"
            "img bd"
            "ft ft";
        }
    
        .media.media-flip {
          grid-template-columns: 3fr 150px ;
          grid-template-areas:
            "title img"
            "bd img"
            "ft ft";
        }
    
        .media.img-flexie {
          grid-template-columns: minmax(150px, 1fr) 3fr;
        }
    
        .media.media-flip.img-flexie {
          grid-template-columns: 3fr minmax(150px, 1fr);
        }
    
        /* nested */
        .media > .media {
          grid-column: 2 / -1 ;
          margin: 0; /* override */
          margin-top: 1em;
        }
      }
    
    
    }
    
    /*-------------GRID------------*/

<div class='media'>
  <div class='img'>
    <img src='https://via.placeholder.com/100' width=100>
  </div>
  <div class='content'>
    <p align='right'> STUFF </p>
  </div>
  <div class='footer'> OTHER STUFF </div>
</div>