Интенсив "Адптивная верстка"

3 урока - Glo Academy 20-22.12.2019

by shurikation

HTML

<!-- Резиновая верстка -->
<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Document</title>
 <meta name="viewport" content="width=device-width, initial-scale=1">
</head>
<body>
  <div class='content'>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Incidunt nihil officiis ducimus minima suscipit nam rem doloremque fuga blanditiis, esse.</div>
<div class="sidebar">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Tempore accusantium voluptatum quas! Dolores cupiditate explicabo temporibus facilis, commodi eum nostrum possimus, minima, vel nesciunt officia enim? Quibusdam voluptatem obcaecati ducimus.</div>
</body>
</html>

CSS

/* Резиновая верстка */
/* .content, .sidebar {
  float: left;
  height: 400px;
}

.content {
  width: 70%;
  background-color: red;
}

.sidebar {
  width: 30%;
  background-color: orange;
} */


/* Адаптивная верстка  */
.content, .sidebar {
  float: left;
  height: 400px;
}

.content {
  width: 70%;
  background-color: red;
}

.sidebar {
  width: 30%;
  background-color: orange;
} 

/* Будет работать на эканах с макс. размером до 1200px */
/* На экранах больше 1200px будут работать стили выше */
@media(max-width: 1200px) {
  .content, .sidebar {
    width: 100%;
  }
}

/* Меньше 768px считаются мобильными устройствами */
/* На мобильных устройствах фон станет прозрачным */
@media(max-width: 768px) {
  .content, .sidebar {
    background-color: transparent;
    height: auto; /* Чтобы блоки схлопывались */
    margin-bottom: 10px; /* Чтобы блоки схлопывались */
  }
}

/*Комбинируем. Указываем ПРОМЕЖУТОК в котором только будут работать стили */
@media(min-width: 1200px) and (max-width: 1600px) {
   .content, .sidebar {
    width: 100%;
  }
}

JavaScript

/* 
* Text will be there *
*/

/*
1. Нельзя делать высоту и ширину headera фиксированной т.к. на разных мониторах может появится полоса прокрутки внизу - это плохо

***РЕЗИНОВАЯ ВЕРСТКА***
См. <!--   <meta name="viewport" content="width=device-width, initial-scale=1"> -->
Вставляем vieport в тэг head - и он отвечает за отображение контентА. В нем прописано что ширина окна браузера должна быть равна ширине вашего джевайся - ПК или смартфон. А 1initial scale - это мастабирование 1 к 1 - т.е. ширина будет приравнена к ширине девайся 1 к 1
Теперь при сужении экрана текст вылазит вниз. Но читать материал по одному слову на строку неудобно.
Поэтому резиновая верстка практически не используется. Только отдельные элементы могут быть резиновыми, но обязательно с адаптивом.

***Адптивначя верстка***
Допустим хочу чтобы на больших экранах контент был слева, а сайдбар справ, а на мобильных друг под другом.
Тогда поставим обоим ширину 100%
И пропишем медиа-запрос: мы говорим браузеру, давай при уменьшении экрана мы измением стили для отображения контента.
Медиа-запросы пишутся в самом конце документа CSS!!! особенно когда пользуемся препроцессорами ибо то, что в конце перебивает то, что написано в начале - это каскадный стиль ибо.
/* Меньше 768px считаются мобильными устройствами */
/* min-width - от минимальной ширине */


/*** Mobile-first верстка и desktop-first верстка **** 

Мобаил ферст - когда первым верстаем мобильную версию. А десктоп - наоборот.
Поэтому различается адаптив.
В мбоильном - вы адаптируете от мобильных устройств к десктопным, в десктопе - наоборот.
И все через медиа-запросы.
Для десктопной ферст верстки техники:
Помогут параметры МАКСИМАЛЬНОЙ ширины т.е. сначала пишем стандартные стил для больших экранов, а потом уже медиа-запросы для мобильных устройств.
например:

@media (max-width: 1191px) { 
}

потом

@media (max-width: 991px) { 
}

@media (max-width: 767px) { 
}

@media (max-width: 575px) { 
}

Примерно такстроится струткура меда-запросов.

****Для...