Оценок пока нет CSS — правила для создания адаптивной страницы

Ниже представлен снипет кода или скелетон адаптивности CSS, для основных экранов. Как правило, это все делается при помощи ключевого слова @media, с указанием правила изменения свойств для охватываемого экрана, входящего в предел между min-width и max-width

@media (min-width: 360px) and (max-width: 374px) {
    /**Galaxy S*/
}
@media (min-width: 375px) and (max-width: 411px) {
    /**iPhone 7,iPhone 8, iPhone X*/ 
}
@media (min-width: 412px) and (max-width: 767px) {
    /**iPhone 7 Plus,iPhone 8 Plus, Nexus 5X, Nexus 6P*/
}
@media (min-width: 768px) and (max-width: 1023) {
    /**iPad*/
}
@media (min-width: 1024px) and (max-width: 1279) {
    /**iPad Pro*/
}
@media (min-width: 1280px) and (max-width: 1365) {
    /**-*/
}
@media (min-width: 1366px) and (max-width: 1599) {
    /**-*/
}
@media (min-width: 1600px) and (max-width: 1920) {
    /**-*/
}

 

Усовершенствованный и упрощенный код

Данный код усовершенствован в плане устройств и размеров на 2018 год

/*--------------------------------------------------------------
## Notebook
--------------------------------------------------------------*/
@media only screen and (max-width: 1280px) {
  html {
    font-size: 95%;
  }
}

@media screen and (max-width: 1199px) {
  .navbar-dark .dropdown-item {
    color: #fff;
  }
}
/*--------------------------------------------------------------
## Netbook
--------------------------------------------------------------*/
@media only screen and (max-width: 1024px) {
  html {
    font-size: 90%;
  }
}
/*--------------------------------------------------------------
## iPad
--------------------------------------------------------------*/
@media only screen and (max-width: 960px) {
    html {
      font-size: 85%;
    }
}
/*--------------------------------------------------------------
## iPad
--------------------------------------------------------------*/
@media only screen and (max-width: 768px) {
    html {
      font-size: 80%;
    }
}
/*--------------------------------------------------------------
## iPhone
--------------------------------------------------------------*/
@media only screen and (max-width: 480px) {
    html {
      font-size: 75%;
    }
}