Question

因此，如您所见，一切在我的桌面浏览器上都可以正常运行，它可以正确调整大小，并且div每行的高度都相同，但是当我在手机上查看网站时，标题中缺少添加主题，并且div的高度不同。我使用了CSS网格和autoprefixer，但仍无法解决此问题。关于如何解决此问题的任何想法？

我的html

<form id="topicForm">
      <div class="emoji">
        <div>?</div>
        <div>?</div>
      </div>
      <label for="topicInput" id="topicInputs">Add A Topic</label>
      <div class="emoji">
        <div>?</div>
        <div>?</div>
      </div>
      <input type="text" id="topicInput">
      <!-- add <br> if you want to add button on new line instead of next to 
      <!-- Button= new topic to be added -->
      <input id="addButton" type="submit" value="PLEASE ME?">
    </form>
    <div id="gifContainer>
       <div id="gifDiv">
          <p id="rating">Rating: G</p>
          <p id="title">Title: COMICS CHALLENGE GIF</p>
          <img id="topicGif" 
          src="https://media2.giphy.com/media/bc0BzosZLBUVG/200_s.gif">
       </div>
   </div>

我的div /图像容器CSS

#topicInput, #topicInputs {
    background-image: url(../assets/images/shapez.gif);
    color: black;
    font-weight: bolder;
    font-size: 40px;
    width: 100%;
    flex-wrap: wrap;
    display: flex;
    place-content: center;
}
label, .p {
    font-family: sans-serif;
    text-transform: uppercase;
    letter-spacing: 4px;
    background: linear-gradient(
    90deg,
    rgb(255, 2, 2),rgb(248, 164, 7), gold, rgb(32, 255, 2), rgb(23, 7, 248), 
    rgb(255, 6, 255));
    background-size: 100%; 
    -webkit-background-clip: text;
    -webkit-text-fill-color: rgba(255, 255, 255, 0)
}
#gifContainer {
  display: grid;
  grid-gap: 10px;
  grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
}
#gifDiv {
  margin: 10px;
  background-image: url(../assets/images/pinkStarz.gif);
  flex: 1;
  display: flex;
  flex-direction: column;
  flex: 1 1 calc(33% - 30px);
  box-sizing: border-box;
  text-align: center;
}

img {
  transition: transform 0.2s;
  width: 100%;
  height: 100%;
  border-radius: 5px;
  background-position: 50% 50%;
  background-repeat: no-repeat;
  background-size: cover;
}

为什么我的网站无法在移动浏览器上正确显示？

0 个答案: