Что делать про в css при адаптиве без @media?

Question

[holfizz]

В общем я новичок и мне нужна помощь разобраться.
Что нужно сделать при адаптиве чтобы не задавать вечно media чтобы у них был отступ от края экрана
Например я при адаптиве сделал меню бургер и мне нужно его перемещать чтобы он был с краю и сделать так чтобы не давать ему каждый раз media и возможно ли это или только вариант с media, знаю обеснил ужасно но если вы поняли о чем я то помогите.
Заранее спасибо
вот код если нужен

<div class="section">
            <a href="#" class="menu-btn">
                <span></span>
            </a>
        </div>

@media (max-width: 768)
	.menu-btn{
		display: -ms-flexbox;
		width: 50px;
		height: 50px;
		position: relative;
		left: 650px;
		top: 30px;
		justify-content: space-evenly;
	}
	.menu-btn::before,
	.menu-btn::after,
	.menu-btn span{
		position: absolute;
		top: 50%; margin-top: -1px;
		left: 50%; margin-left: -10px;
		width: 25px;
		height: 2px;
		background: black;
	}
	.menu-btn::before,
	.menu-btn::after{
		content: '';
		transition: all 0.7s;
	}
	.menu-btn::before{
		transform: translateY(-5px);

	}
	.menu-btn::after{
		transform: translateY(5px);
	}

	.menu-btn.active span{
		transform: scale(0);
	}
	.menu-btn.active::after{
		transform: rotate(45deg);
		transition: all 0.7s;

	}
	.menu-btn.active::before{
		transform: rotate(-45deg);
		transition: all 0.7s;

	}
}

Answer 1

[Андрей Галкин]

Если я тебя правильно понял, ты пытаешься реализовать navbar на сайте с использованием css.
Есть вариант пойти через фелксбоксы и реализовать это следующим образом:
Код

Сделал на скорую руку, но это работает.

Медиа запросы используются в адаптивной верстке, есть несколько вариаций использования медиа:
1. Внутри css документа.
2. Задать конкретному css документу атрибут с шириной экрана в разных диапазонах.

Первый пункт я использую во вложенном документе стилей, который уже имеет атрибут media, только в частных случаях. Обычно мне по крайней мере достаточно 3 документов для реализации 3-х типов версток:
1. Desktop.
2. Tablet.
3. Mobile.

Если хочешь реально прокачаться в адаптивной верстке, есть ресурс, который помог мне в свое время: ссылка на ресурс
Он абсолютно бесплатный, там есть все для уверенного старта и прокачки уже имеющихся навыков.