让我的盒子在css中响应

我的html文件中有8个框，当在桌面上查看时，一切看起来都正常，在移动设备上访问过，列远远超出了应有的范围，它应该位于中间，而不是右侧，我该如何做才能使其响应？

我的列代码

.articles {
    margin: 100px;
    background-color: #F5F5F5;
    }

 .article {
    margin: 5px;
    display: inline-block;
    width: 340px;
    position: relative;
    float:left;
    left: 155px;
    box-shadow: 0 2px 16px rgba(0, 0, 0, 0.12);
  }

  .article-image {
    width: 100%;
  }
  .article-text-wrapper {
    padding: 20px;
  }

  .article-title {
    font-family: 'Roboto', sans-serif;
    font-size: 20px;
    font-weight: 700;
  }
 .article-description {
    font-family: 'Roboto', sans-serif;
    line-height: 16px; 
    font-size: 16px;
    color: rgba(0,0,0,0.7);
    font-weight: 300;
  }

  .article-time {
    font-family: 'Roboto', sans-serif;
    font-size: 12px;
    color: rgba(0,0,0,0.4);
    font-weight: 300;
  }

---

非常感谢。

您的

文章

元素应用了

左侧

和

边距

属性。您需要为以下内容添加

媒体

查询：

@media only screen and (max-width:700px) {
   .articles {
    margin: 50px 0;
   }
   .article {
    left: 0;
    width:100%;
   }
}

---

问题是你的文章有固定的宽度，浮动，并且显示为内联块。 尝试添加以下媒体查询：

@media only screen  and (max-width : 768px) {

 .article {
    margin: 0 auto;
    display: block;
    width: 100%;
    max-width: 340px;
    float: none;
    left: auto;
  }
}

---

制作响应性网页时，请在所有网页中添加以下元素：

<meta name="viewport" content="width=device-width, initial-scale=1.0">

---

您还可以添加一个html结构的示例吗？这样，mobile view看起来非常完美。桌面视图现在乱七八糟，有什么解决办法吗？您是将代码添加为媒体查询还是更改了现有代码？@Andrewyed这不会影响您的桌面视图。媒体查询仅在屏幕大小小于700px@Andrewyed如果您像我写的那样添加了这段代码，它应该对您的桌面视图没有任何影响。您是否更改了其他内容？很抱歉，将代码插入错误的位置，现已修复。谢谢

@media screen and (max-width: 800px) {
  .class-name {
    width: 100%; /* The width is 100%, when the viewport is 800px or smaller */
  }
}