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

Question

[Alex ALex]

Хочу сделать такую кнопку при нажатии сайт изменялся знаю что так легко это на js а вот не знаю под каких пикселей надо написать код и если есть примеры буду рад если скините ссылку спасибо заранее)

Comments

[Сергей delphinpro]

[Сергей delphinpro]

вот они — четыре брикпойнта (зеленые вертикальные линии), про которые вам написал в ответе Роман

Answer 1

[Роман]

Можно сделать по аналогии с bootstrap
<576px
≥576px
≥768px
≥992px
≥1200px

Comments

[Alex ALex]

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

[Роман]

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

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

}

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

[Марти Макфлай]

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

[Сергей delphinpro]

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

[Alex ALex]

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

[Alex ALex]

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

[Марти Макфлай]

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

[Марти Макфлай]

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

[Марти Макфлай]

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

[Сергей delphinpro]

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

[Марти Макфлай]

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

[Alex ALex]

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