1

ページが特定の幅を超えると、右上隅に表示されるメニューボタンを mashable.com が非表示にし、ページが特定の幅を下回ると消える方法を知りたいです。特定の CSS ルール:

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

アイコンを表示するルールよりも優先されます。

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

しかし、JavaScript を無効にしても悪影響はないように見え、親要素に適用された Css クラスはどれも変更されないように見えるため、それがどのように行われているかはわかりません。のようだ：

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

常に優先する必要がありますが、明らかにそうではなく、どういうわけかこれは CSS だけで達成されたようで、その方法を知りたいです。

これを説明する図はこちらです。

4

2 に答える 2

2

彼らは css @media クエリを使用して、さまざまな解像度でさまざまな要素を表示および非表示にしています。

于 2013-01-02T21:57:52.613 に答える
0

Mashable.com は、非常に優れたレスポンシブ Web サイト デザイン フレームワークである Skeleton を使用しています。ビューポートのサイズに応じて div を非表示または表示する @media クエリが明確に定義されています。

于 2013-03-08T13:09:04.087 に答える