HTML полный отзывчивый советы

Question

Ну, я применяю отзывчивость к своим маленьким проектам в учебных целях.

Я смотрел на некоторых сайтах, таких как: w3schools-mediaquery

Я нашел интересные вещи, но я хотел бы знать, как работать с различными разрешениями и какое средство больше всего рекомендуется для полноценного адаптивного веб-сайта.

У меня сейчас есть что-то вроде:

@media only screen and (min-width: 600px) {}
@media only screen and (min-width: 1200px) {}

в основном, чтобы начать с простой адаптации, без особой работы, я думал начать с:

@media only screen and (min-width: 600px) {}
@media only screen and (min-width: 650px) {}
@media only screen and (min-width: 700px) {}

Будет ли полезно кодирование интерфейса every 50px? 10 to 10, 20 to 20, 50 to 50 что было бы наиболее рекомендуемым? или есть другой более полезный способ сделать это?

Я хотел бы сделать все вручную, начальная загрузка - отдаленная альтернатива.

Приветствуются некоторые примеры, рекомендации и исправления!

Спасибо за внимание.

Answer 1

Я использую одну точку останова, в основном я обнаруживаю только телефоны. Что касается общего макета, я использую CSS Grid, так как он наиболее эффективен. Я считаю, что поддерживать несколько точек останова нереально, поэтому я больше не рассматриваю виды планшетов. Это либо вид телефона, либо не вид телефона.

@media screen and (max-width: 767px) {

}
@media screen and (min-width: 768px) {

}