Вам не нужно реализовывать мультимедийный экран для каждого предмета. хитрость заключается в том, чтобы сделать его отзывчивым с нуля, а затем просто внести небольшие изменения в макет, так как он уменьшается, если это все еще необходимо. Например, возьмите этот раздел div news_area. Он расположен в центре его родительского контейнера - news_contents. Но не используйте фиксированные поля для центрирования, вы хотите добавить CSS, чтобы он оставался в центре, даже когда он сжимается.
пример:
.news_contents {
width: 100%;
margin: 0;
padding: 0;
}
#news_area {
width: 90%;
background: #d9d9d9;
margin: 30px auto!important;
}
[примечание: тег! Важный здесь нужен только для того, чтобы переопределить некоторые из ваших существующих CSS. Также это лишь грубый пример, показывающий макет.]
С добавлением этого к вашему css, news_area всегда будет центрироваться в родительском div и всегда будет иметь место с обеих сторон. Это то, что я подразумеваю под кодированием с адаптивным дизайном с самого начала. Этот раздел теперь не нуждается в мультимедийном экране, чтобы изменить его снова, поскольку он работает на всех размерах устройства с его оригинальным CSS.