Заставка

Программирование на старых и современных языках, а так-же дизайн

Информация о пользователе

Привет, Гость! Войдите или зарегистрируйтесь.

Адаптивный веб дизайн

Страница: 1

Сообщений 1 страница 2 из 2

1

  • Автор: lexx821
  • Модератор
  • lexx821
  • Приглашений: 0
  • Сообщений: 785
  • Уважение: [+1/-0]
  • Позитив: [+8/-11]
  • Пол: Мужской
  • Последний визит:
    Сегодня 05:18:30

Для адаптивного веб дизайна использую media query:
Пример кода:

Код:
<!DOCTYPE html>
<html>
  <head>
  <style>
    @media only screen and (min-width:0px) and (max-width:640px) {
      body { background-color:green; }
    }
    @media only screen and (min-width:640px) and (max-width:800px) {
      body { background-color:red; }
    }
    @media only screen and (min-width:800px) {
      body { background-color:yellow; }
    }
  </style>
  </head>
  <body>

  </body>
  </html>

0

2

  • Автор: lexx821
  • Модератор
  • lexx821
  • Приглашений: 0
  • Сообщений: 785
  • Уважение: [+1/-0]
  • Позитив: [+8/-11]
  • Пол: Мужской
  • Последний визит:
    Сегодня 05:18:30

Поясняю, для того чтобы сделать адаптивный дизайн нужно использовать @media в теге style, only screen - только если экран, and - и, min-width - минимальная ширина браузера, max-width максимальная ширина браузера экрана браузера, max-width максимальная ширина экрана браузера. Данный пример работает так, если экран браузера меньше 640 пикселей, вы увидите зелёный фон, если ширина экрана больше 640 пикселей, и меньше 800 пикселей вы увидите красный фон, если ширина браузера от 800 пикселей то жёлтый фон.

0

Страница: 1