Домой / Сайтостроение / Адаптивность в html5 и css3

Адаптивность в html5 и css3

Адаптивность в html5 и css3
Адаптивность в html5 и css3

Шаг шестой: Сделаем на странице адаптивность в html5 и css3

Здравствуйте, уважаемые друзья и гости блога!


Сегодня у нас заключительный урок по созданию адаптивной страницы подписки в html5 и css3.

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

Приступим ...

Придаем адаптивность в html5 и css3 странице подписки

Как всегда я вам подготовил уже готовый код:

@media screen end (max-width:1070px){
  .subscribe input[type="text"], .subscribe input[type="email"]{
    width:260px;
  }
}

@media screen end (max-width:1067px){
  .subscribe input[type="text"], .subscribe input[type="email"]{
    width:320px; display:block; float:none; margin-right:0; margin-bottom:10px;
  }
    header{
      padding:30px 20px;
    }
    header>h1{
      font-size:2.75em; margin-bottom: 20px
    }
    header>h3{
      margin-bottom: 25px;
   }
}
@media screen end (max-width:400px){
  .subscribe input[type="text"], .subscribe input[type="email"]{
    width:240px;
  }
}

Он придаст вашей и без того уже красивой странице подписки адаптивность в html5 и css3.

Вам нужно его скопировать и вставить в самый конец нашего файла стилей style.css.

А также вот еще один нюанс. Вот этот вот код:

<meta name="viewport" content="width=device-width, initial-scale=1.0">

Вам нужно вставить в файл index.html в начале перед тегом title.

И теперь ваша и без того красивая страница подписки полностью адаптирована для всех мобильных устройств и персональных компьютеров.

В чем Вы можете убедиться попробовав открыть ее на своем мобильном устройстве или просто сжав в своем браузере. Убедились?!

Теперь смотрим заключительный видеоурок:

Адаптивность в html5 и css3

И на это сегодня все!

Далее мы с вами узнаем:

Все шаги создания адаптивной страницы в html5 и css3:

Друзья! Вы хотите узнать свое будущее? Если да, тогда узнайте об этом подробнее здесь!

Спасибо вам за внимание!

Всегда Ваш Валерий Бородин



Про Валерий Бородин

Проверьте также

как сделать картинку ссылкой в html

Как сделать картинку ссылкой в html на любом сайте!

Узнай сейчас как сделать картинку ссылкой в html на своем сайте! Здравствуйте, уважаемые друзья и …

  • http://sovety-lecheniya.ru людмилла

    Здорово! целый курс и очень быстро предоставленный нуждающимся в такой помощи. Я как то на одном блоге видела подобные уроки, но уж очень медленно их предоставляли, а в последнее время вобще он пропал. Может закрылся, а всеравно жаль. Потому что такие сайты нужны для особенно начинающих блогеров, да и вообще.

    • https://pribylwm.ru/ Валерий Бородин

      Спасибо Людмила за отзыв!

Блог Валерия Бородина: LiveInternet число посетителей за сегодня Блог Валерия Бородина: данные за сегодня (Yandex.Metrika) Блог Валерия Бородина: рейтинг МайлРу