我使用网格布局，但最终结果没有响应答案

【问题标题】：I use grid layout but the final result is not responsive我使用网格布局，但最终结果没有响应
【发布时间】：2021-03-29 17:12:52
【问题描述】：

我在使用的网格布局时遇到了问题。

HTML：

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet" href="style2.css">
<title>Grid training</title>
</head>
<body>
<div class="container">
    <div class="text">
        <h1>This is the title</h1>
        <h3>This is the</br>lorem ispum doler sis amet</h3>
        <input type="submit" value="Submit" class="cta">
    </div>
    <div class="image"></div>
</div>

CSS：

@import url('https://fonts.googleapis.com/css2?family=Rubik:wght@300;400;700;900&display=swap');

*{
box-sizing: border-box;
margin: 0;
padding: 0;
font-family: 'Rubik', sans-serif;
}

.container{
padding-top: 50px;
width: 95%;
display: grid;
grid-template-columns: 1fr 1fr;
grid-template-rows: 1fr;
grid-gap: 15px;
}


 .container > div{
height: 90vh;
}

.image{
background-image: url("img1.jpg");
background-size: cover;
}

.text{
display: flex;
flex-direction: column;
width: 65%;
margin-left: 50px;

}

.text h1{
margin: 50px 0;
font-weight: 900;
font-size: 85px;
}

.text h3{
font-weight: 300;
font-size: 35px;
}

.cat{
border-radius: 25px;
border-style: none;
font-size: 28px;
width: 150px;
height: 40px;
margin-top: 95px;
}

@media (max-width: 600px)
{
.container{
    grid-template-columns: 1fr;
    width: 95%;
}

.image{
    width: 95%;
    margin-left: auto;
    margin-top: 25px;
}
}

但是，当我最小化浏览器时，右侧的图像没有响应。出于这个原因，我使用了媒体查询。这种技术是正确的还是有更简单的方法？关于代码还有什么我应该考虑的并使其响应的吗？

【问题讨论】：

标签： html css responsive-design css-grid

【解决方案1】：

您的想法是正确的，但我建议您首先设计移动设备尺寸，然后为您的台式机尺寸和平板电脑尺寸等创建媒体查询。但是，查看您的手机尺寸媒体查询您不需要声明一个宽度大小，你需要确保包括 display:grid;在那个班级也是如此。您不需要类文本和类图像，当您声明主类容器并通过编写 grid-template-comlumns 将其设置为 1fr 1fr 时说它有两列，那么里面的任何新 div 都将是新列并且它你添加的 div 越多，我就会添加更多的行。

 <!DOCTYPE html>
    <html lang="en">
    <head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link rel="stylesheet" href="style2.css">
    <title>Grid training</title>
    </head>
    <body>
    <div class="container">
        <!-- if you choose to have this class text the class itself would only be for things like padding other than that it is not necessary--> 
        <div>
            <h1>This is the title</h1>
            <h3>This is the</br>lorem ispum doler sis amet</h3>
            <input type="submit" value="Submit" class="cta">
        </div>
        <img src ="" />
        <!-- as you can see the first div you have with h1 and h3 will be one piece in column 1 and then the img section will be another piece in column 2--> 
    </div>

css:

    *{
    box-sizing: border-box;
    margin: 0;
    padding: 0;
    font-family: 'Rubik', sans-serif;
    }
    
    /* i would make it first mobile */
    .container{
    padding-top: 50px;
    display: grid;
    grid-template-columns: 1fr;
    grid-row-gap: 3px; 
    }
    
     .container > div{
    height: 90vh;
    }
    
    img{ 
    width: 90%
    }

    .image{
    background-image: url("img1.jpg");
    background-size: cover;
    }
   
    .text h1{
    margin: 50px 0;
    font-weight: 900;
    font-size: 85px;
    }
    
    .text h3{
    font-weight: 300;
    font-size: 35px;
    }
    
    /* i think you mean cta */
    .cat{
    border-radius: 25px;
    border-style: none;
    font-size: 28px;
    width: 150px;
    height: 40px;
    margin-top: 95px;
    }
    
    @media (min-width: 900px)
    {
    .container{
        display: grid;
        grid-template-columns: 1fr 1fr;
        grid-column-gap: 15px;

    }
    
    .image{
        width: 95%;
        margin-left: auto;
        margin-top: 25px;
    }
    }

【讨论】：

【解决方案2】：

“响应式” 可能有不同的含义，您需要准确说明您想要什么。

对于.image div，您使用的是background-image，这意味着使用的图像未设置<div> 的大小。如果你想让内容（图片）设置<div>的大小和比例，最简单的解决方案是使用<img>标签而不是background-image：

@import url('https://fonts.googleapis.com/css2?family=Rubik:wght@300;400;700;900&display=swap');
* {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
  font-family: 'Rubik', sans-serif;
}

.container {
  padding: 50px;
  display: grid;
  grid-template-columns: 1fr 1fr;
  grid-template-rows: 1fr;
  grid-gap: 15px;
  min-height: 100vh;
}

.image img {
  display: block;
  width: 100%;
  height: auto;
}

.text {
  border: 50px solid #ccc;
  padding: 50px 35% 50px 50px;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
}

.text h1 {
  margin: 0;
  font-weight: 900;
  font-size: 85px;
}

.text h3 {
  font-weight: 300;
  font-size: 35px;
}

.cat {
  border-radius: 25px;
  border-style: none;
  font-size: 28px;
  width: 150px;
  height: 40px;
  margin-top: 95px;
}

@media (max-width: 1200px) {
  .container {
    grid-template-columns: 1fr;
    grid-template-areas: 'image' 'text';
  }
  .image {
    margin: 0;
    grid-area: image;
  }
  .text {
    grid-area: text;
  }
}
@media (max-width: 768px) {
  .text {
    padding-right: 50px;
  }
}

<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <link rel="stylesheet" href="style2.css">
  <title>Grid training</title>
</head>

<body>
  <div class="container">
    <div class="text">
      <h1>This is the title</h1>
      <h3>This is the<br>lorem ispum dolor sit amet</h3>
      <input type="submit" value="Submit" class="cta">
    </div>
    <div class="image">
      <img src="https://picsum.photos/600/400">
    </div>
  </div>
</body>

</html>

相反，如果您希望图像填充其容器并在任一方向进行裁剪（取决于容器是横向还是纵向），您可以保留background-image 并使用background-size: cover，同时居中它在 div 中（以确保它被平均裁剪）：

@import url('https://fonts.googleapis.com/css2?family=Rubik:wght@300;400;700;900&display=swap');
* {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
  font-family: 'Rubik', sans-serif;
}

.container {
  padding: 50px;
  display: grid;
  grid-template-columns: 1fr 1fr;
  grid-template-rows: 1fr;
  grid-gap: 15px;
  min-height: 100vh
}

.image {
  background: url(https://picsum.photos/600/400) center /cover;
}

.text {
  border: 50px solid #ccc;
  padding: 50px;
  padding-right: 35%;
  padding-right: 20%;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
}

.text h1 {
  margin: 0;
  font-weight: 900;
  font-size: 85px;
}

.text h3 {
  font-weight: 300;
  font-size: 35px;
}

.cat {
  border-radius: 25px;
  border-style: none;
  font-size: 28px;
  width: 150px;
  height: 40px;
  margin-top: 95px;
}

@media (max-width: 1200px) {
  .container {
    grid-template-columns: 1fr;
    grid-template-areas: 'image' 'text';
  }
  .image {
    margin: 0;
    grid-area: image;
    padding-bottom: 75%;
  }
  .text {
    grid-area: text;
  }
}

@media (max-width: 768px) {
  .text {
    padding-right: 50px;
  }
}

<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <link rel="stylesheet" href="style2.css">
  <title>Grid training</title>
</head>

<body>
  <div class="container">
    <div class="text">
      <h1>This is the title</h1>
      <h3>This is the<br>lorem ispum dolor sit amet</h3>
      <input type="submit" value="Submit" class="cta">
    </div>
    <div class="image"></div>
  </div>
</body>

</html>

旁注（我要死了）：这是“dolor sitamet”，而不是“doler sis”。

【讨论】：