Mashable.com은 Css를 통해 요소를 표시하거나 숨 깁니다.

mashable.com이 페이지 오른쪽 상단에 나타나는 메뉴 버튼을 숨겨서 페이지가 특정 너비를 초과하면 페이지가 특정 너비보다 낮을 때 어떻게 사라지는 지 궁금합니다. 특정 CSS 규칙 :Mashable.com은 Css를 통해 요소를 표시하거나 숨 깁니다.

가

.navbar .nav > li 
{ 
    display:block; 
    float: left; 
}

하지만 난 그게 자바 스크립트가 어떤 병에 효과와 전혀 발생하지 않습니다 보인다 불가능하기 때문에 그 일을 어떻게 볼 수 없습니다 :

html.no-touch .main-menu li.menu 
{ 
    display: none; 
}

아이콘을 표시하는 규칙보다 우선합니다 상위 요소에 적용된 CSS 클래스 중 일부가 변경된 것으로 보입니다.

html.no-touch .main-menu li.menu 
{ 
    display: none; 
}

항상 우선해야하지만, 분명 어떻게 든이 전적으로 CSS로 수행 된 것으로 표시되지와 않고 나는 방법을 알고 궁금 해요 : 것 같다.

이것을 설명하는 그래픽은 here입니다.

2013-01-02 Yumbelie

다른 해상도로 다른 요소를 표시하거나 숨기려면 CSS @media queries을 사용하고 있습니다.

2013-01-02 21:57:52 corymathews

환상적입니다. 감사합니다. – Yumbelie

Mashable.com은 아주 좋은 resposive 웹 사이트 디자인 프레임 워크 인 Skeleton을 사용합니다. 뷰포트 크기에 따라 div를 숨기거나 표시하기 위해 @media 쿼리를 잘 정의했습니다.

2013-03-08 13:09:04

Mashable은 기존의 반응 형 프레임 워크를 사용하지 않습니다. 우리가 반응하는 모든 것들은 사내에서 고유합니다. –

스켈레톤 프레임 워크와 비슷하게 스타일을 지정하고 @media 쿼리를 어떻게 사용했는지 알았습니다. 네, 특정 수정이 있습니다. –

나는 그것을 썼다. 우리는 프레임 워크를 사용하지 않았습니다. :) –

답변