Домой / Сайтостроение / Адаптивность в 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:

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

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

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



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

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

создание лендинг

Создание Лендинг Пейдж или лучшие плагины WordPress!

Создание Лендинг Пейдж (Landing Page) какие плагины использовать на WordPress? Узнай сейчас! Здравствуйте, уважаемые друзья …

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

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

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

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

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