Ответные образы и медиа-запросы

Question

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

Итак, мой план состоял в том, чтобы создать мобильную версию без изображения, которое должно быть расширено медиа-запросами. В моем Html я создал относительно расположенную DIV в том числе изображения и относительной позиционируется DIV для заголовка и навигации:

<div class="relative"> 
    <img id="landingimg" class="bigimg" src="http://placekitten.com/g/1200/800"> 
    <div id="header"> 
     <h1 class="center headline">HEADLINE</h1> 
     <nav> 
      <a class="navigation" href="">Link</a> 
      <a class="navigation" href="">Link</a> 
      <a class="navigation" href="">Link</a> 
      <a class="navigation" href="">Link</a> 
     </nav> 
    </div> 
</div> 

Изображение было установлено значение display:none;. С размером экрана более 400px Я хочу, чтобы отобразить изображение (#landingimg) и переставить навигации DIV (#header) внутри контейнера по этому запросу:

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

    .headline { 
     font-size: 200% !important; 
    } 

    #landingimg { 
     display: inline !important; 
    } 

    #header { 
     position: absolute !important; 
     top: 30% !important; 
    } 
} 

Такой подход, к сожалению, не работал и привело к следующие проблемы:

1. Медиа-запрос не вставляет изображение при изменении размера экрана.
2. На очень маленьких экранах заголовок/меню накладывает содержимое или нижний колонтитул накладывает меню. Это происходит даже для обоих параметров: position:relative, display:block/inline и т. Д. Или на том же уровне z-индекса. Я пытался тысячу раз исправлять это разными подходами, но безуспешно. Я просто не знаю, как предотвратить этот эффект.
3. Мне пришлось использовать !important в моем запросе, чтобы заставить его работать, но не знаю почему. Я работаю с идентификатором элемента, чтобы предотвратить любые приоритетные конфликты, но это не работает ...

В следующей скрипке я использовал альтернативное решение с непрозрачностью (вместо display:none;) для изображения, чтобы дать вам идея, как это должно работать, но это не решает проблему, что меню накладывает содержимое, если экран становится очень маленьким, а это также означает, что мобильные устройства все еще загружают изображение. Вы найдете здесь: https://jsfiddle.net/9pj5ux3L/

Первоначальный подход с дисплеем ни хранится по этой ссылке: https://jsfiddle.net/h56nx35g/2/

Надежда кто-то может показать мне более профессиональное решение. Благодаря!

Answer 1

Я советую вам принять «мобильный первый» подход, начать с мобильного/маленького экрана, а затем поработать над планшетом, а затем на рабочем столе. Поверьте мне, это менее усложняет разработку, особенно для работы со средствами массовой информации: https://codemyviews.com/blog/mobilefirst

Answer 2

Да, кодирование мобильных устройств сначала облегчает проектирование гибких макетов для большинства людей. Вы должны переделать это с учетом этого, или, если вам нравится этот дизайн и вы хотите повысить уровень навыков вашего разработчика, возможно, вам поможет реализация небольшого javascript. С его помощью вы можете динамически вводить код в свой HTML на определенной точке останова.

В качестве альтернативы, если вы хотите сохранить его как можно более простым, вы можете просто установить свое изображение как background-image на свой заголовок div. Затем установите background-image:none в указанной точке останова с помощью медиа-запроса.

Удаление фрагментов контента из HTML затруднено только с помощью CSS - это ухудшает производительность (поскольку сайту все еще приходится загружать и кэшировать содержимое), а также уменьшает доступность (display: none; не будет скрывать ваш контент от читателей экрана, например). Добавляя изображение в качестве фонового элемента или добавляя его в Javascript, обойти эти проблемы.

P.S - Вам наверняка не нужны теги !important в ваших медиа-запросах.