mute media query from external CSS

Я использую таблицу стилей W3CSS на странице, чтобы отобразить меню с использованием списков ul. Он отлично работает, но для моих нужд он переключается на минимальный стиль.mute media query from external CSS

Есть 3 медиа запросов, участвующих в этом в строках 158, 159 и 160, которые изменяются, когда размер окна просмотра равен или меньше, чем 600px:

@media screen and (max-width:600px){.w3-topnav a{display:block}.w3-navbar li:not(.w3-opennav){float:none;width:100%!important}.w3-navbar li.w3-right{float:none!important}} 
@media screen and (max-width:600px){.w3-topnav .w3-dropdown-hover .w3-dropdown-content,.w3-navbar .w3-dropdown-click .w3-dropdown-content,.w3-navbar .w3-dropdown-hover .w3-dropdown-content{position:relative}}  
@media screen and (max-width:600px){.w3-topnav,.w3-navbar{text-align:center}}

Я хочу, чтобы переключиться на 350px, но я бы чтобы избежать редактирования файла w3.css каждый раз, когда мне нужно применить какие-либо изменения, также потому, что я использую этот файл и на других страницах, и мне нужно поведение по умолчанию там.

Есть ли способ отключить медиа-запросы w3.css от любого моего CSS? Решения на основе Javascript принимаются, но, если возможно, я хочу их избежать.

Большое спасибо заранее

EDIT

Я не уверен, что я был достаточно ясно, в моей просьбе, так что я постараюсь пересмотреть его здесь.

Я хочу отключить эти медиа-запросы из файла w3.css, поэтому я могу переопределить их в своих файлах CSS, используя max-width: 350px вместо 600px.

источник

2016-10-31 T3STY

Что вы можете сделать, это создать таблицу стилей custom.css и загрузить последнюю в области заголовка. Это, в свою очередь, загрузит вашу таблицу стилей CSS как переопределение.

источник

2016-10-31 02:34:01

Уже пробовал это сделать. Однако размещение медиа-запроса max-width: 350px в любой таблице стилей до или после таблицы стилей w3.css не имеет никакого эффекта, поскольку оно не отменяет поведения между 350px и 600px. Так что пока запросы 600px будут живы, они будут продолжать переключение на 600px, несмотря ни на что. – T3STY

У вас есть код, который вы можете отправить? Может быть, jfiddle. Таким образом, мы можем видеть, что у вас есть, и, возможно, просто создать новый класс для указанного элемента и написать медиа на основе этого класса или идентификатора. –

Например, вы можете скопировать класс .w3-topnav в ваш css, а затем переименовать его на что-то вроде .w3-topnav1, а затем создать @media для этого класса. –

После поиска в различных стилях, применяемых к элементам, и изоляции класса, связанного с классом .w3-navbar, я смог изменить поведение в соответствии с моими потребностями без изменения оригинальной таблицы стилей w3.css.

Во-первых, я вернулся стили для запроса средств массовой информации на 600px:

@media screen and (max-width:600px){ 
    /* reverting the effects of the original @media query */ 

    .w3-navbar li:not(.w3-opennav){float:left; width: initial!important} 
    .w3-navbar li.w3-right{float: right !important;} 
    .w3-navbar .w3-dropdown-click .w3-dropdown-content, 
    .w3-navbar .w3-dropdown-hover .w3-dropdown-content{position:static} 
    .w3-navbar{text-align:initial} 
}

Затем я добавил оригинальные стили w3.css на запрос СМИ на 350px:

@media screen and (max-width:350px){ 
    /* these styles are the same as the ones in the original w3.css stylesheet, 
     in @media screen and (max-width: 600px), lines 158 to 160 */ 

    .w3-navbar li:not(.w3-opennav){float: none; width: 100%!important} 
    .w3-navbar li.w3-right{float: none !important;} 
    .w3-navbar .w3-dropdown-click .w3-dropdown-content, 
    .w3-navbar .w3-dropdown-hover .w3-dropdown-content{position:relative} 
    .w3-navbar{text-align:center} 
}

стиль выше должен быть помещен в пользовательскую таблицу стилей, загруженную after таблицу стилей w3.css.

Это не быстрое решение, вовлекающее много исследований в оригинальную таблицу стилей. В моем случае было 200 строк или около того, и это была почти простая задача.

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

источник

2016-10-31 18:52:32 T3STY

ответ

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