Question

我不是网络开发者，我这么做是为了好玩，所以我有一个问题......

当我降低屏幕分辨率时，如何将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。

＆＃13;

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

＆＃13;

<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>

＆＃13;

Answer 2

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

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

或

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

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

Answer 3

如果您正在使用px，那么很难对其进行响应。所以要么按百分比计算。如果您需要使用px本身，那么您可以使用媒体查询并使用各种大小的媒体查询提及相应的px。

请参阅此http://www.w3schools.com/css/css_rwd_mediaqueries.asp

Answer 4

您可以使用media query。

@media规则用于为不同的媒体类型/设备定义不同的样式规则。

＆＃13;

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

＆＃13;

<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>

＆＃13;

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

创建宽度为900px的响应Div？

5 个答案: