レスポンシブ Web デザインを構築しようとしていますが、ほぼ完成しています。唯一の問題は、ナビゲーション メニューです。デスクトップ用とモバイル用の 2 つのバージョンのナビゲーション メニューを作成しました。モバイル版ナビのCSSのデスクトップセクションで「display:none」をやってみたのですが、そうするとモバイル版ではメニューが一切表示されません。この問題を解決するための解決策は何ですか? ここでサイトを見ることができます: http://rachelchaikof.com/testing/
5 に答える
HTML 5 と CSS のボイラー プレート (後方互換性) をメディア クエリで使用すると、display:none; を取得できました。モズで働く。FireFox でも Safari や Chrome で動作させることができず、IE でも試すつもりはありません! レスポンシブ = モバイル ファーストのメディア クエリを使用する必要があります。モバイル ナビゲーション プロパティを display: block; に設定する必要があります。またはインラインブロック。次に、画面のスナップ ポイントに到達したら、プロパティを display:none; に設定します。これはFirefoxで動作します。他の人への提案...教えてください..
通常、必要な効果を得るには、モバイル ビューの CSS スタイルシートでメディア クエリを作成し、そのセクションで、nav
デスクトップ ビューの同じ要素を別の方法でスタイルします。
今晩 iPad からあなたのサイトを見ただけだったので、あなたのコードを掘り下げませんでした。それが過度に明白であった場合は申し訳ありません。
サイトのコンテンツが充実!uChicago に、異文化間のインプラントの社会的側面について多くの研究を行っている友人がいます。アメリカではほとんど耳にしないことに驚く。
min-width:700px (またはモバイル ブレークポイントが何であれ) を持つメディア クエリを作成できず、このメディア クエリ内で display:none !重要な #mobile-nav?