如何使 div 响应并使用固定大小？答案

【问题标题】：How to make a div responsive and use a fixed size?如何使 div 响应并使用固定大小？
【发布时间】：2020-07-05 20:20:33
【问题描述】：

我在标签中有一个 div，它有固定的宽度、高度和边距。

<center>
  <div id="360container" style="width:1252px; height:805px; margin-right:50px; margin-left:50px">This is div
  </div>
</center>

当这个 div 不再适合浏览器时，我想减小宽度，当浏览器宽度小于 1252+50+50px 时，我希望高度减小但仍保持相同的比例（1252x805）。

如何做到这一点？

【问题讨论】：

有人提到max-width: 1252px 和width: 100% 吗？

标签： html responsive-design

【解决方案1】：

当你想应用特定样式时，例如屏幕尺寸宽度在 320px 和 480px 之间，你可以使用（@media 查询）来检测屏幕尺寸。：

@media only screen 
  and (min-device-width: 320px) 
  and (max-device-width: 480px)
   {
/* your style here */
}

【讨论】：

【解决方案2】：

您可以添加以下 CSS：

 #360container {
  width: 100%;
  padding-bottom: 64.2%; /* 805 is 64.2% of 1252 */
}

【讨论】：

【解决方案3】：

试试这个代码，让我知道它是否让你满意。

<!DOCTYPE html>
    <html lang="en-US">
    <head>
    <style>
    .city {
        float: left;
        margin: 5px;
        padding: 15px;
        width: 300px;
        height: 300px;
        border: 1px solid black;
    }
    </style>
    </head>
    <body>

    <h1>W3Schools Demo</h1>
    <h2>Resize this responsive page!</h2>

    <div class="city">
      <h2>London</h2>
      <p>London is the capital city of England.</p>
      <p>It is the most populous city in the United Kingdom, with a metropolitan area of over 13 million inhabitants.</p>
    </div>

    <div class="city">
      <h2>Paris</h2>
      <p>Paris is the capital and most populous city of France.</p>
    </div>

    <div class="city">
      <h2>Tokyo</h2>
      <p>Tokyo is the capital of Japan, the center of the Greater Tokyo Area, and the most populous metropolitan area in the world.</p>
    </div>

    </body>
    </html>

【讨论】：

【解决方案4】：

这里有一些可能有用的东西，纯 CSS

<div id="360container" style="position: relative; height: 0; margin:0 auto;
    overflow: hidden;width:60%; max-width:500px; padding-bottom:25%;  border:1px solid #000;">

        <div style="position:absolute; top:0;width:100%;height:100%;max-height:200px;background:#ccc;"></div>

    </div>

看看小提琴

https://jsfiddle.net/je3g4evs/1/

【讨论】：

【解决方案5】：

试试这个：

.aDiv {
  width: 100%;
  max-width: 480px;
  height: 100px;
}

https://jsfiddle.net/mrz240sa/7/

【讨论】：

【解决方案6】：

如果您希望您的网站具有响应性，请使用百分比宽度而不是像素...... 例如。

<style>
    .city {
        float: left;
        margin: 5px;
        padding: 15px;
        width: 100%;
        height: 300px;
        border: 1px solid black;
    }
</style>
    <h1>W3Schools Demo</h1>
    <h2>Resize this responsive page!</h2>

    <div class="city">
      <h2>London</h2>
      <p>London is the capital city of England.</p>
      <p>It is the most populous city in the United Kingdom, with a metropolitan area of over 13 million inhabitants.</p>
    </div>

【讨论】：