Question

我的html文件中有8个方框，在桌面上查看时，一切看起来都不错，在移动设备上访问，并且柱子的位置远远超出应有的位置，它应该在中心，而不是在右侧，我该怎么做才能让它变得敏感？ Preview

我的列代码。

.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;
  }

非常感谢。

Answer 1

您已将left和margin属性应用于article个元素。您需要为以下内容添加media查询：

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

Answer 2

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

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

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

Answer 3

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

ImagePullBackoff

为图像设置CSS宽度属性设置为100％，图像将响应并向上和向下缩放。并且还使用max-width属性。

要获得更好的响应式设计，请使用媒体查询。

Failed to pull image "iroolapp": rpc error: code = Unknown desc = Error response from daemon: pull access denied for iroolapp, repository does not exist or may require 'docker login'

Refer here

让我的盒子在css中响应

3 个答案: