Где можно прочитать или кто скажет как сделать адаптивку с медиа запросами и на каких пикселей надо сверстать?

А поподробнее 576 для какого устройство? а что значит знаки > и <??

Alex ALex, > - больше, < меньше. Например

@media (min-width: 576px) and (max-width: 768px) {

}

576px Extra small для мобильных

Я бы плюсанул ещё 375, 360 и 320

Марти Макфлай, сначала заказчик должен плюсануть к бюджету =)) а так, по дефолту, четыре бутстраповских брикпойнта хватит.

Сейчас актуально все пишут медиа запросы?

Марти Макфлай, Не фига себя я везде буду код скопировать или есть легкие решения?)

Alex ALex, не понял, что вы собираетесь копировать?

Сергей delphinpro, просто тот же заказчик скорее всего будет смотреть с какого-нибудь айфона, у которого скорее всего будет 375. Другие можно просто не делать ;)

Alex ALex, я на самом деле делаю вообще под все разрешения. Просто постепенно уменьшаю (ну или увеличиваю, если mobilefirst) экран браузера и, если что-то где-то на каком-то разрешении мне не нравится, я правлю медиазапросами.
Если вёрстка качественная и заранее продумывать "А как мне так сверстать, чтобы при уменьшении экрана ничего не сломалось?", то мобильных стилей получается совсем немного.

Марти Макфлай, 375 прекрасно вписывается в условие max-width:575px
особенно учитывая ваши же слова: "Если вёрстка качественная и заранее продумывать"

Сергей delphinpro, верно, но я бы всё таки отдельно потом ещё посмотрел на 375

Марти Макфлай, Ну за все эти пиксели я должен сверстать по отдельности станицу блин(((