Question

我已经尝试了一切使这个设计响应但我没有任何东西

寻求一些帮助或建议会很棒..

谢谢

 <div class="box-section">
    <div class="box-container">
        <div class="box-inner">
            <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Dicta sapiente, est, inventore maiores accusantium laudantium ratione. Veritatis sunt quidem earum corporis molestiae, soluta libero asperiores modi ipsam debitis alias eveniet.est, inventore maiores accusantium laudantium ratione. Veritatis sunt quidem earum corporis molestiae, soluta libero asperiores modi ipsam debitis alias eveniet. est, inventore maiores accusantium laudantium ratione. Veritatis sunt quidem earum corporis molestiae, soluta libero asperiores modi ipsam debitis alias eveniet.</p>
        </div>
    </div>
    <div class="box-container">
        <div class="box-inner">
            <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Dicta sapiente, est, inventore maiores accusantium laudantium ratione. Veritatis sunt quidem earum corporis molestiae, soluta libero asperiores modi ipsam debitis alias eveniet.</p>
        </div>
    </div>
    <div class="box-container">
        <div class="box-inner">
            <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Dicta sapiente, est, inventore maiores accusantium laudantium ratione. Veritatis sunt quidem earum corporis molestiae, soluta libero asperiores modi ipsam debitis alias eveniet.est, inventore maiores accusantium laudantium ratione. Veritatis sunt quidem earum corporis molestiae, soluta libero asperiores modi ipsam debitis alias eveniet. est, inventore maiores accusantium laudantium ratione. Veritatis sunt quidem earum corporis molestiae, soluta libero asperiores modi ipsam debitis alias eveniet.</p>
        </div>
    </div>
    <div class="box-container">
        <div class="box-inner">
            <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Dicta sapiente, est, inventore maiores accusantium laudantium ratione. Veritatis sunt quidem earum corporis molestiae, soluta libero asperiores modi ipsam debitis alias eveniet.</p>
        </div>
    </div>
</div>

Answer 1

您可以使用media-queries。

以下是如何在设计中使用媒体查询的示例：

JSFiddle demo

@media (max-width: 600px) {
  .box-container {
    width: 100%;
  }
  .box-inner {
    padding: 25px;
  }
}

(max-width: 600px)表示当屏幕/浏览器尺寸的宽度为600px 或更少时，将应用或覆盖以下CSS规则。因此，如果您的.box-container宽度为50％，然后在媒体查询中为100％，则.box-container的宽度为50％，直到您的屏幕/浏览器大小达到600px，然后将改为宽度100％。

Answer 2

试试这个CSS。如果你想让它们全部在同一行上，则宽度为：25％然后根据您的需要调整最小宽度。以下是如何使用flex进行响应式设计的链接。

https://css-tricks.com/snippets/css/a-guide-to-flexbox/

.box-section {
    display:flex;
    flex-wrap:wrap;
}

.box-container {
    position: relative;
    top: 0;
    width: 50%;
    min-width:450px;
    box-sizing: border-box;

    float: left;
    padding: 15px;
}

.box-inner {
    background-color: #f5f5f5;
    padding: 50px;
}

如何使网格（设计）响应？

2 个答案: