x
<html><head><meta name="viewport" content="width=device-width, initial-scale=1.0"><style>* { box-sizing:border-box;}.left { background-color:#2196F3; padding:20px; float:left; width:20%; /* Ширина 20%, по умолчанию */}.main { background-color:#f1f1f1; padding:20px; float:left; width:60%; /* Ширина 60%, по умолчанию */}.right { background-color:#4CAF50; padding:20px; float:left; width:20%; /* Ширина 20%, по умолчанию */}/* Используйте медиа-запрос, чтобы добавить break point на 800px: */@media screen and (max-width:800px) { .left, .main, .right { width:100%; /* Ширина 100%, когда область просмотра 800px или меньше */ }}</style></head><body><h2>Медиа запросы</h2><p>Изменить размер окна браузера.</p><p>При изменении размера этого фрейма убедитесь, что вы достигли break point на 800 пикселей.</p><div class="left"> <p>Меню слева</p></div><div class="main"> <p>Основное содержание</p></div><div class="right"> <p>Контент справа</p></div></body></html>