외부 CSS의 미디어 쿼리 음소거

ul 목록을 사용하여 페이지에 W3CSS 스타일 시트를 사용하고 있습니다. 잘 작동하지만 필요에 따라 너무 빨리 최소 스타일로 전환됩니다. 나는 그것이 350px로 전환하려는하지만 난 좋겠외부 CSS의 미디어 쿼리 음소거

@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}}

라인 뷰포트의 크기가 같거나 600PX보다 작은 경우 변경 158, 159 및 160이에 관여하는 3 개 미디어 쿼리가 있습니다 다른 페이지에서도 파일을 사용하고 있기 때문에 w3.css 파일을 편집 할 필요가 없도록 수정하고 싶습니다. 기본 동작이 필요합니다.

내 CSS에서 w3.css 미디어 쿼리를 음소거 할 수있는 방법이 있습니까? Javascript 기반 솔루션이 허용되지만 가능한 경우 이러한 문제를 피하고자합니다.

사전

편집

내가 내 요청에 충분히 분명 확실하지 않다 당신에게 대단히 감사합니다, 그래서 여기를 재정의하려고합니다.

w3.css 파일에서 해당 미디어 쿼리를 무시하고 싶습니다. 최대 허용 너비 : 600px 대신 350px를 사용하여 CSS 파일에서 무시할 수 있습니다.

출처

2016-10-31 T3STY

할 수있는 일은 custom.css 스타일 시트를 만들고 헤더 영역에 마지막으로로드하는 것입니다. 이렇게하면 CSS 스타일 시트가 재정의로로드됩니다.

출처

2016-10-31 02:34:01

이미이 작업을 시도했습니다. 그러나 w3.css 스타일 시트 이전 또는 이후의 모든 스타일 시트에 최대 너비 : 350px 미디어 쿼리를 배치하면 350px와 600px 사이의 동작을 무시하지 않으므로 아무 효과가 없습니다. 따라서 600px의 검색어가 살아있는 한 무엇을하더라도 600px로 계속 전환됩니다. – T3STY

게시 할 수있는 코드가 있습니까? 어쩌면 jfiddle .. 이런 식으로 우리는 당신이 가지고있는 것을 볼 수 있으며, 아마 그 항목에 대한 새로운 클래스를 만들고 그 클래스 나 ID에 기반한 미디어를 작성할 수 있습니다. –

예를 들어 CSS에서 .w3-topnav 클래스를 복사 한 다음 .w3-topnav1과 같은 이름으로 바꾼 다음 해당 클래스의 @media를 만들 수 있습니다. –

요소에 적용된 다양한 스타일을 살펴본 후 .w3-navbar 클래스 관련 스타일링을 분리 한 후 원래 w3.css 스타일 시트를 수정하지 않고도 필요에 맞게 동작을 수정할 수있었습니다.

첫째, 600 픽셀의 미디어 쿼리에 대한 스타일을 복귀 한 : 나는 350px에서 미디어 쿼리 원래 w3.css 스타일을 추가 한

@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} 
}

@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

답변

관련 문제