Создать отзывчивый Div с шириной 900 пикселей?

html css responsive

600 просмотра

5 ответа

95 Репутация автора

Я не веб-разработчик, я делаю это для удовольствия, поэтому у меня есть вопрос ...

Как превратить div с 900px в адаптивный, когда я уменьшаю разрешение экрана?

Вот мой код (я новичок в кодировании):

.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) ... Кто-нибудь знает, как это сделать? :)

Автор: CodeAlb Источник Размещён: 18.07.2016 12:32

Ответы (5)


2 плюса

23934 Репутация автора

Вы должны использовать 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>

Автор: Mohammad Usman Размещён: 18.07.2016 12:34

1 плюс

594 Репутация автора

Если вы используете px, сложно управлять им быстро. Так что либо иди с процентом. Если вам нужно использовать сам пиксель, то вы можете использовать медиазапрос и упомянуть соответствующий пиксель, используя медиазапрос для разных размеров.

Порекомендуйте это, http://www.w3schools.com/css/css_rwd_mediaqueries.asp

Автор: Harish Chinju Размещён: 18.07.2016 12:35

1 плюс

17903 Репутация автора

Решение

Вы можете использовать media query.

Правило @media используется для определения разных стилевых правил для разных типов медиа / устройств.

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

Автор: Mosh Feu Размещён: 18.07.2016 12:36

2 плюса

37881 Репутация автора

Вы должны использовать комбинацию widthи max-width. Нет необходимости в медиа-запросах

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

или же

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

Таким образом .container, никогда не будет больше, чем ширина экрана, и не может стать больше, чем900px

Автор: PierreDuc Размещён: 18.07.2016 12:36

1 плюс

384 Репутация автора

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-трюки

Автор: Terabyte Размещён: 18.07.2016 12:57
Вопросы из категории :
32x32