Где разместить CSS3 Media Queries для масштабируемого веб-приложения?

В настоящее время я создал файл с именем .media-queries.css для размещения всех моих медиа-запросов и множества точек останова на моем сайте (5 точек останова); однако это оказывается болью в задней части. Мне нужно дублировать структуру моего сайта в этих медиа-запросах ради специфики CSS. Этот подход не кажется масштабируемым. Я лучше выпекаю в медиа-запросе прямо в фактический CSS, где живет этот конкретный селектор?Где разместить CSS3 Media Queries для масштабируемого веб-приложения?

Каковы альтернативные методы и образцы дизайна?

источник

2013-04-20 Matt

Вы можете следовать за лидерами великих умов за такими, как Bootstrap и Foundation, и объединить все в один и тот же файл. Техническое обслуживание будет проще, и у вас будет некоторое улучшение производительности сайта. Полностью вне темы, но я обнаружил, что использование http://lesscss.org действительно помогло сохранить CSS.

Удачи вам!

источник

2013-04-21 00:16:23

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

Основываясь на моем опыте, Сохранение связанных стилей вместе работает лучше всего.

Вот практический пример:

/** Header's styles and media queries */ 
.header { 
    ... 
} 
@media screen and (max-width: 1024px) { 
    .header { ... } 
} 
@media screen and (max-width: 720px) { 
    .header { ... } 
} 

/** Nav's styles and media queries */ 
.nav { 
    ... 
} 
@media screen and (max-width: 1024px) { 
    .nav { ... } 
} 
@media screen and (max-width: 720px) { 
    .nav { ... } 
} 

/** ... and so on */

Вот another similar StackOverflow thread, которые могли бы дать вам некоторые идеи.

Если вы заинтересованы в более подробной информации, вы можете также read on my blog post, где я делюсь своим опытом, вещи, я боролся с и некоторые идеи, которые я знаю :-)

источник

2017-04-12 16:22:08

Где разместить CSS3 Media Queries для масштабируемого веб-приложения?

ответ

Смежные вопросы