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 that you have read and understand our privacy policy and code of conduct.

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