Question

我正在用CSS网格构建一个页面，在超小屏幕上，我希望用户能够从左到右以及从上到下滚动内容。

200vh（50行x 4 vh）可以正常工作，但是当我将宽度设置为200vw（50列x 4 vw）时，内容会缩放，但是容器仍然保持不变，并且背景渐变不会缩放。

我想念什么？为什么右边没有背景渐变？

HTML：

<!DOCTYPE html>
<html>
  <head>
    <link rel="stylesheet" type="text/css" href="css/style.css">
   <link href="https://fonts.googleapis.com/css?family=Lato:300,400,700" rel="stylesheet">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
  </head>
  <body>
    <div id="container">
      <div id="content">
        <div id="label"><p>AUTHOR</p>
        </div>
     <div id="heading"><p>John Steinbeck</p></div>
        <div id="text"><p>John Ernst Steinbeck Jr. (/ˈstaɪnbɛk/; February 27, 1902 – December 20, 1968) was an American author. He won the 1962 Nobel Prize in Literature "for his realistic and imaginative writings, combining as they do sympathetic humour and keen social perception." He has been called "a giant of American letters," and many of his works are considered classics of Western literature.</p> <p>During his writing career, he authored 27 books, including 16 novels, six non-fiction books, and two collections of short stories.</p>

        </div>
        <div id="button"><a href="https://en.wikipedia.org/wiki/John_Steinbeck" target="_blank">FULL BIO</a></div>
        <div id="prize"><img src=""></div>
        <div id="medium_image">
         <img src="https://previews.dropbox.com/p/thumb/AAXuNe699IRkbuL2sd99ZkPk0-MJIS26RTVbd9kEhD5stftIo2iR2DhpUEWqytvAdhPL03GByDU4k0oMo8FmWf7RTo6ejHs9owPhconWAxk4ScCnkwZ8_94Xke15o1dVWbRMhDmg_KdmdUZFZxdJqCwoU6QM2NVG1p2LWoDEvoMKWwNtftXUVArVmBe8Nym1UsghIHTd8NTfPIWtEPs6qqP7TPbjKAxj4YawUvxeyGbHYw/p.jpeg?size_mode=5">
      </div>
      </div>
       <div id="image">
         <img src="">
      </div>
    </div>
  </body>
</html>

CSS：

body {
  background-image: linear-gradient(-90deg, #00ADB5, #9FDCDE);
  background-repeat: no-repeat;
  background-attachment: fixed;
  margin: 0 auto;
}

p {
  margin: 0;
  padding: 0;
}

@media all and (max-width: 319px) {
    #container {
  display: grid;
  grid-template-columns: repeat(50, minmax(4vw, auto));
  grid-template-rows: repeat(50, minmax(4vh, auto));
}  

     #content {
  grid-column: 5/47;
  grid-row: 3/49;
    }

  #label {
  color: white;
  grid-column: 11/41;
  grid-row: 3/4;
  }

  #label p {
  background-color: black;
  font-size: 14px;
  padding: 8px 16px;
  display: inline-block;
  font-weight: 300;

}

  #heading {
  grid-column: 11/41;
  grid-row: 5/6;
  font-size: 32px;

}

  #medium_image {
  display: block;
  grid-column:5/46;
  grid-row:6/42;
  text-align: center;
}

  #medium_image img { 
  max-height: 100%;
  max-width: 100%;
}

  #text {
  color: #222831;
  grid-column: 6/47;
  grid-row: 43/45;
  font-size: 12px;
  font-weight: 300;
  letter-spacing: 1px;

}

  #button {
  color: #91DCDF;
  grid-column: 11/41;
  grid-row: 46/48;
  text-align: center;
  font-weight: 400;
}

  #button a {
  border: solid 2px;
  padding: 10px 20px;
  border-radius: 20px;
  text-decoration: none;
  color: #91DCDF;
  font-size: 14px;

  }

  #prize {
  display: none;
} 

  }

div宽度不会随200 vw调整大小

0 个答案: