2

Решил добавить к себе в портфолио "резиновую верстку", начинаю делать и понимаю, что вот вот и адаптивная щас будет. То есть пару часов и уже адаптив. Вопрос: время резины прошло что ли? для чего сейчас применяют такой вид верстки?(возможно - это экономия, то есть резина нужна для больших экранов/планшетов(ну примерно такой диапазон: max-width: 1920px; min-width: 768px), а для мобильников нам не нужно(ведь по сути для мобильников, свой минималистичный дизайн и т.п.) и экономнее сделать именно резину?).

3 ответа 3

2

я бы использовал flex'ы. Самый удачный и правильный подход, по моему неавторитетному мнению. И резинит, и адаптирует. Ссылка на пример

.flex-block {
  display: flex;
  flex-flow: row wrap;
}

.one {
  background: #583C5A;
  padding: 20px;
  margin: 5px;
}
.half {
  flex: 45%;
}
.third {
  flex: 30%;
}
.four {
  flex: 20%
}
@media only screen and (max-width: 600px) {
  .third {
    flex: 1 100%
  }
}

@media only screen and (max-width: 480px) {
  .flex-block {
    flex-flow: column;
  }

}
1

Возможно, это не совсем ответ на Ваш вопрос, однако, например Яндекс намекнул, что в выдаче будет опускать НЕмобильные страницы. Если Ваш сайт не предоставляет адаптивную вёрстку под таблетки/мобильники, он будет ниже в Яндексовской выдаче, чем сайты с такой же тематикой, но которые предоставляют такую вёрстку.

Вполне себе тренд для работы верстальщиков.

Лично мой подход таков: если max-device-width/height превышает размеры таблетки/мобильника, то подключать резиновую верстку. Если же нет - использовать адаптивную под таблеточные/телефонные разрешения.

Ну и конечно все зависит от задачи. Если это какая-то внутренняя система с кучей элементов и ею по определению удобнее пользоваться в браузере на широкоформатном дисплее, то это одно. А если приложение предназначено для широких масс, которые могут заходить на ресурс с чего угодно - это совсем другое

0
/ * Небольшие устройства (телефоны, меньше, чем 768px) * /
/ * То что по умолчанию в Bootstrap * /

/ * Небольшие устройства (таблетки, 768px и выше) * /
media (min-width: 768px) {...}

/ * Средний устройства (настольные, 992px и выше) * /
media (min-width: 992px) {...}

/ * Большие устройства (крупные настольные, 1200px и выше) * /
media (min-width: 1200px) {...}

///// Это пример из bootstrap 3 в том случаи если верстать как mobile first////

///// Или если desctop first //////
@media (max-width: 768px) { ... }

@media (min-width: 768px) and (max-width: 992px) { ... }

@media (min-width: 992px) and (max-width: 1200px) { ... }

@media (min-width: 1200px) { ... } 

Ваш ответ

By clicking “Отправить ответ”, you agree to our terms of service and acknowledge you have read our privacy policy.

Всё ещё ищете ответ? Посмотрите другие вопросы с метками или задайте свой вопрос.