SCSS에서 mixins로 설정된 공통 중단 점이있는 반응 형 사이트가 있습니다. 전체 사이트에서 단 하나의 페이지 만 데스크톱 뷰포트에서 모바일 브레이크 포인트 (축소 된 탐색)를 실행하고 싶습니다.중단 점 편집없이 데스크탑보기 포트에서 모바일 탐색 중단 점 사용
내 첫 번째 본능은 기존 navbar 클래스를 강제로 모바일 클래스로 확장하여 해당 페이지의 기존 navbar 클래스에 추가하고 강제 클래스에 다른 중단 점 mixin을 포함하여 모든 화면 크기가 = 1024 픽셀 이상이되도록했습니다 축소 된 모바일 메뉴가 표시됩니다.
이 상황에 가장 적합한 방법이겠습니까? 아니면 해당 페이지에 대해서만 축소 된 모바일 탐색 바를 표시하는 더 간단하고 더 건조한 기술이 있습니까?
보통 나는 문제의 페이지의 body 태그에 클래스를 추가 한 다음이 새로운 클래스를 사용하여 해당 한 페이지에서만 navbar를 타겟팅합니다.
기존의 navbar 클래스를 확장하는 것에 대해 설명하고있는 것을 그림으로 표현할 수 없으므로 제안 사항이 개선되었는지 확실하지 않습니다.
업데이트
은 내가 생각되었다이었다
이 일반적인 탐색의 스타일링에이 부분
// _nav.scss
// SCSS partial with common nav styling
그런 가져 오기를 _nav.scss 부분 파일을 작성하여 기본 SCSS 파일, 필요에 따라 미디어 쿼리
// default nav on most pages, adjust breakpoint as req'd
@media screen and (max-width: 800px) {
.current-nav{
@import 'nav';
}
}
// nav on .forced-mobile page only
@media screen and (min-width: 1025px) {
.forced-mobile .current-nav{
@import 'nav';
}
}
HTML 구조를 새로운 몸 클래스는 단지 새로운 브레이크 포인트를 필요로하고 네비게이션 바의 모든 모바일 중단 점 속성을 명시겠습니까
<body>
<!-- default for most pages -->
...
<div.current-nav>
...
</div>
</body>
<body class="forced-mobile">
<!-- forced-mobile page -->
...
<div.current-nav>
...
</div>
</body>
? 내 navbar 확장 아이디어는 현재 navbar 클래스가 extendee이고 내 새로운 forced-mobile nav 클래스가 현재 모바일 속성을 사용하지만 데스크탑 크기 이상에서만 작동하는 것과 비슷합니다. 그럼 난 그냥 강제로 모바일 nav 클래스를 적용 할 것입니다, 그래서
Hey @ H.E.Pennypacker 같은 위의 업데이트를 참조하십시오. 내 제안이 귀하의 접근 방식에 대한 개선인지 여부를 판단 할 수 없습니다. 건배! –
이것은 훨씬 적은 수정으로 공격 계획보다 훨씬 부드럽게 작동했습니다. 고마워, 데이빗! –