Как правильно сделать адаптивный сайт?

Question

[megorit]

Я выбрал несколько разных вариантов ширины экрана:

• >=1980
  
• >=1650 && <1980
  
• >=1280 && <1650
  
• <1280
  

Правильно ли я сделал? Не очень понятно, потому что не знаю какие ширины экранов бывают у смартфонов и планшетов. И еще не совсем понятно, будет ли учитываться ширина экрана или ширина вьюпорта (без полосы прокрутки и всего остального, например, вертикальной панели задач как в убунту)?

Answer 1

[Кирилл]

mydevice.io/devices - обратите внимание на столбцы css width и css height
Под смартфоны две основных ширины сейчас - 320 и 360 пикселей.

Comments

[megorit]

В принципе, я подумал, что смартфоны это <900px, пускай так и будет. 3 варианта: обычный, компактный и для телефона/планшета (хотя не исключено, что на планшете или телефоне будет разрешение как на десктопе или даже больше, так что тут не подгодаешь.

[Кирилл]

Егор Марчук: пройдите по ссылке и посмотрите - у телефона не будет разрешения как на десктопе. Разрешение в CSS это другая вещь и у телефонов в портретной ориентации оно в основном 360 пикселей.

Answer 2

[whoisthere]

Как правильно расставить BREAKPOINTS

Answer 3

[WQP]

У меня в scss конфиге такие медиа. На всех устройствах нормально смотрится. Можно ещё xl добавить

$breakpoints: (
	'xs': 		('(max-width: 544px)'),
	'sm': 		('(max-width: 768px)'),
	'md': 		('(max-width: 992px)'),
	'lg': 		('(max-width: 1199px)'),
);

Answer 4

[Nixin777]

https://v4-alpha.getbootstrap.com/ - попробуй Bootstrap 4, заодно разобравшись в нем поймешь реализацию responsive дизайна, посмотри реализацию сетки в Bootstrap 4 - https://v4-alpha.getbootstrap.com/layout/grid/ в bootstrap.css

Comments

[megorit]

Понимаешь в чем дело, я не профессиональный разработчик веба. Можно бесконечно учить всякие фичи, а мне нужно сейчас сделать готовое решение. Без фреймворков, минимум JS, а лучше без него, ибо на мне итак еще куча всего.