SASS/CSS : 깨는 경향이있는 미디어 쿼리

Question

내 사이트를 반응 적으로 만들기 위해 미디어 쿼리를 작성하는 데 문제가 있습니다. 모든 것을 내가 별도의 파일 (mobile.css.scss)에 기록 된 모바일 스타일을 정돈과 같이 유지하려면 :

@media (min-width: 340px) and (max-width: 767px){ 

    /* hide desktop only code and display mobile elements */ 

    .menu{display: none;} 
    .banner-desktop{display: none;} 
    .banner-mobile{ 
     display: block !important; 
     img{width: 99%;} 
    } 

    /* general styling */ 

    .page-body{ 
     width: 99% !important; 
    } 
} 

을 내 바탕 화면 스타일은 application.css.scss에 있습니다

body{ 

    /* Hide mobile only stuff */ 
    .banner-mobile{display:none;} 

    /* General Styling */ 

    .page-body{ 
     width: 1167px; 
     margin: 0 auto; 
     padding: 0;  
    } 
} 

문제는 위와 같이 중요하지 않으면 모바일 스타일 중 일부가 읽히지 않는다는 것입니다. 나는 100 % css/sass에 익숙하지 않고 익숙하지만 나는 이런 종류의 접근 방식이 사물에 관한 길은 아니라고 합리적으로 확신합니다. 나는 결국 스타일 시트 전체를 중요시 할 수 있었다.

저는 어떤 일을 잘못하고 있는지 잘 모르겠습니다. 그래서 어떤 도움이든 대단히 감사 할 것입니다. 우리는 responsive interface work before을 완료, 당신은의 많은 일을 일을 얻을 수 !important을 사용해야합니다 발견했습니다

중요한

! -

Answer 1

!important은 항상 최후의 수단이어야하며 거의 항상 문제를 해결합니다. 미디어 쿼리는 선택 자의 특수성을 변경하지 않습니다. 선택기의 특이성이 동일하면 마지막 일치하는 선택기가 우선합니다. 당신이있을 때

는 :

.foo { 
    color: red; 
} 

.foo { 
    color: blue; 
} 

그럼, 당신이 실제로 찾고있는 것은 무언가이다 :보다 큰 30em 넓은 장치의 경우

@media (min-width: 30em) { 
    .foo { 
     color: red; 
    } 
} 

.foo { 
    color: blue; 
} 

, 그것은이 동일하다 like :

// styles that apply to *all* devices go here (see: mobile first methodology) 
// repeatedly setting/unsetting styles is inefficient and should be 
// avoided whenever it is reasonable to do so 

@media (max-width: 767px) { // narrow viewport only 
    .menu, .banner-desktop { 
     display: none; 
    } 
} 

@media (min-width: 767px) { // bigger than the narrow viewport 
    .banner-mobile { 
     display: none; 
    } 
} 

은 개별 CSS 파일을 사용하는 데 별다른 이점이 없습니다. 미디어 검색과 일치하지 않는 경우에도 모두 기기에서 다운로드합니다.

Answer 2

그것은 일반적인 문제

입니다 집단.

나는 문제가 @media 쿼리가 기본적으로 그냥이 특정 값을 대체하려면 의미

(가지 작동 방식 인라인 스타일처럼) 당신의 요소에 스타일의 새로운 세트를 추가 생각 (내가 기억하는 것과 , width, 당신은 사용해야합니다) 이들 중 하나였다 !important

-

결론은 내가 !important를 호출하여 당신이 "잘못"아무것도 생각하지 않는다 - 당신은 단지해야 구조화 된 코드를 유지할 수있다. & 클린