创建一个宽度为 900 像素的响应式 Div？

Question

我不是 Web 开发人员，我这样做是为了好玩，所以我有一个问题...

当我降低屏幕分辨率时，如何将 900px 的 div 变成响应式？

这是我的代码（我是编码新手）：

.container
{
  width: 900px;
  background-color: #fda2a2;
}

.headline
{
  padding: 5px 30px;
  font-size: 20px;
  font-family: Helvetica;
}
.text
{
  padding: 5px 30px;
  font-size: 15px;
  font-family: Helvetica;
}

<div class="container">
  <h3 class="headline">Column title</h3> 
  <p class="text">Cras justo odio, dapibus ac facilisis in, egestas eget quam. Donec id elit non mi porta gravida at eget metus. Nullam id dolor id nibh ultricies vehicula ut id elit.</p> 
</div>

我不想在宽度处设置百分比 (.container)...有人知道该怎么做吗？ :)

Answer 1

您应该使用 max-width 而不是 width。

.container {
    max-width: 900px;
    margin: 0 auto;
    background-color: #fda2a2;
}

.headline {
    padding: 5px 30px;
    font-size: 20px;
    font-family: Helvetica;
}
.text {
    padding: 5px 30px;
    font-size: 15px;
    font-family: Helvetica;
}

<div class="container">
    <h3 class="headline">Column title</h3> 
    <p class="text">Cras justo odio, dapibus ac facilisis in, egestas eget quam. Donec id elit non mi porta gravida at eget metus. Nullam id dolor id nibh ultricies vehicula ut id elit.</p> 
</div>

Answer 2

如果您使用的是 px，则很难在响应式中对其进行管理。所以要么选择百分比。如果您需要使用 px 本身，那么您可以使用媒体查询并使用各种尺寸的媒体查询提及相应的 px。

参考这个，http://www.w3schools.com/css/css_rwd_mediaqueries.asp

Answer 3

您可以使用 media query.

The @media rule is used to define different style rules for different media types/devices.

.container
{
  width: 900px;
  background-color: #fda2a2;
}

.headline
{
  padding: 5px 30px;
  font-size: 20px;
  font-family: Helvetica;
}
.text
{
  padding: 5px 30px;
  font-size: 15px;
  font-family: Helvetica;
}

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

<div class="container">
  <h3 class="headline">Column title</h3> 
  <p class="text">Cras justo odio, dapibus ac facilisis in, egestas eget quam. Donec id elit non mi porta gravida at eget metus. Nullam id dolor id nibh ultricies vehicula ut id elit.</p> 
</div>

Answer 4

您应该使用 width 和 max-width 的组合。不需要媒体查询

.container {
  max-width: 100%;
  width: 900px;
  background-color: #fda2a2;
}

或

.container {
  max-width: 900px;
  width: 100%;
  background-color: #fda2a2;
}

这样 .container 永远不会大于屏幕宽度，也不会大于 900px

Answer 5

You can accomplish this by using media queries for like

/* Make sure your standard css is always on top of media queries */

    .container
    {
      width: 900px;
      background-color: #fda2a2;
    }

    .headline
    {
      padding: 5px 30px;
      font-size: 20px;
      font-family: Helvetica;
    }
    .text
    {
      padding: 5px 30px;
      font-size: 15px;
      font-family: Helvetica;
    }

    Then below you need to set the style for each screen size and behaviour e.g

    /* Portrait and Landscape */
    @media only screen 
      and (min-device-width: 320px) 
      and (max-device-width: 480px)
      and (-webkit-min-device-pixel-ratio: 2) {
      .container{
        background-color:red;
    }

    /* Portrait */
    @media only screen 
      and (min-device-width: 320px) 
      and (max-device-width: 480px)
      and (-webkit-min-device-pixel-ratio: 2)
      and (orientation: portrait) {
.container{
        background-color:yellow;
    }
    }

    /* Landscape */
    @media only screen 
      and (min-device-width: 320px) 
      and (max-device-width: 480px)
      and (-webkit-min-device-pixel-ratio: 2)
      and (orientation: landscape) {
    .container{
        background-color:black;
    }
    }

对于支持不同设备的不同类型的媒体查询，请在此处查看CSS-tricks

创建一个宽度为 900 像素的响应式 Div？

Create a Responsive Div with 900px width?

html

css

responsive