Под какие основыные размеры настраивать CSS @media screen?
Всегда использую эти( это старые брэйкпоинты bootstrap по умолчанию ):
/* Large desktops and laptops */
media (min-width: 1200px) {
}
/* Portrait tablets and medium desktops */
media (min-width: 992px) and (max-width: 1199px) {
}
/* Portrait tablets and small desktops */
media (min-width: 768px) and (max-width: 991px) {
}
/* Landscape phones and portrait tablets */
media (max-width: 767px) {
}
/* Landscape phones and smaller */
media (max-width: 480px) {
}
По надобности дописую промежуточные разрешения, если вдруг по дизайну что то падает на 650px, тогда дописую:
media (max-width: 650) {
}
Многое зависит от типа вашего сайта. Если речь идет о каком-нибудь контентном сайте (новости/блог/что-то еще с разношерстной структурой) то тут не обойтись без нескольких мобильных диапазонов (мелкие мобильники, лопаты, планшеты). Если же речь идет о каком-нибудь простом лэндинге, где вся информация представлена "линейно" в вертикальном потоке, то без особых проблем можно взять за основу один брейкпоинт max-width: 921px и делать адаптив под него. + если вы хотите сделать не абы что, вам понадобится дизайнер, который вам нарисует хотя бы мокап мобильной версии.