Добрый день, я с таким вопросом, сделал резиновую верстку, и некоторые моменты нужно поправить с помощью медиазапросов, но увы у меня не получается, и читаю, и стараюсь на практике что-то делать, но не выходит. Может кто-то подскажет какой-то хороший совет по данной теме, может у кого-то есть шпоргалка работающая по ним, или учебник в котором нету воды, а именно " возьми это, вставь сюда, с объяснениями зачем это делаем". А то у меня совсем опускаются руки уже
Начать с понимания того, какого результата вы хотите добиться. Как должны вести себя блоки при изменениях размера окна. Ну а дальше просто перевести это с русского на CSS.
Тут https://jsfiddle.net/8kypp6b6/ показано изменение ширины вашего блока .chield с 40% на 90% при уменьшении окна до 600 точек и меньше.
Если вы покажете и нормально опишете что именно у вас не получается, возможно, ответ будет более развернутым.
Сложно подсказывать не видя ничего. Что именно не получается? Как указываешь медиа правила?
Может быть проблема в том, что медиазапросы идут не верно, должны от большего к меньшему идти. Т.е. в начале описываешь общие стили, потом медиа под 1200 и ниже, потом под 1024, - 768 и тд.. если наоборот, то будут переопределяться стили не верно.
В общем покажи что не получается -)
Моей задачей было корректно отобразить див с классом "chield" при изменении ширины, поиграться со шрифтами, при том же уменьшении, но у меня это не получилось, если задаешь минимальную ширину, он до определенного момента неприятно ( визуально) статичен, а после рывком растягивается, но не так как бы хотелось.... явно я что-то делаю не так
<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" type="text/css" href="c2.css">
<link rel="stylesheet" type="text/css" href="normalize.css">
<meta charset="utf-8">
<title>Iphone</title>
</head>
<body>
<!-- fixed_bar_start-->
<div class="inline_meny">
<ul>
<li><a href="addd">MAC</a></li>
<li><a href="addd">iPhone</a></li>
<li><a href="addd">iPad</a></li>
<li><a href="addd">Watch</a></li>
<li><a href="addd">TV</a></li>
<li><a href="addd">Аксессуары</a></li>
<li><a href="addd">Ремонт</a></li>
</ul>
</div>
<!-- fixed_bar_end-->
<!-- a_cap_start-->
<div class="qwe">
<div class="chield" >
<h1 class="text">Вас приветствует<br>iHome</h1>
<div class="text_box">
<p>Компания iHome специализируется на оптовой и розничной торговле оригинальной продукции Apple. С нами вы будуте уверены в том, что покупаете по-настоящему качественный товар- предоставляем гарантию, сертификаты и сервисное обслеживание.</p>
<p>Мы не просто продаём технику, мы всегда готовы помочь вам с выбором, дать подробности по каждому товару. Не знаете, какой гаджет подойдет ли вам лучше всего? Обращайтесь - подберем для вас устройство, которое будет на все 100% отвечать вашим запросам. </p>
</div>
</div>
</div>
<!-- a_cap_end-->
Т.е. в начале описываешь общие стили, потом медиа под 1200 и ниже, потом под 1024, - 768 и тд.. если наоборот, то будут переопределяться стили не верно.
Уберите, пожалуйста, эту ерунду или перепишите правильно.
Для max-width условия должны идти по нисходящей, для min-width (mobile-first) в обратном порядке.
Простой
Средний
