ブラウザウィンドウの縮小 - ボタンアイコンの位置が上にならない

Question

ブラウザウィンドウのサイズを小さくすると、モバイルデバイスビューでは、上部のボタンがクライアント名の下に左にプッシュされ、最終的にMenuサブフォルダに終わる。 Webデザイナーではなく、私が覚えているのは難しいことですが、メニューのサブフォルダは、ボタンがクライアント名の下にくる前にもっと早く反応します。私が再設計しようとしているフリーテンプレートであるので、私はstyle.cssとresponsive.cssの下を見ましたが、私は何を探しているのか分かりません。この問題に関するいかなる助力も非常に高く評価されます。

http://landonmusicgroup.com/victoria_update_test/index.html

ありがとうございます！

Answer 1

私は一般的に、左とライドの側に少ないパディングで、より小さなアイコンを提案します。これにより、より近くにある小さなアイコンが作成されます。メディアクエリが767pxの単一のメニューボタンに壊れる前にアイコンがすべて収まるように、ブラウザを拡大する必要があります。

より効率的なオプションは、メディアクエリに応じてアイコンサイズとロゴサイズを調整することです。たとえば、980pxから1300pxまでのテンプレートのメディアクエリがあります。可能であれば、テンプレート内でロゴサイズとアイコンサイズを調整して、その範囲内ですべてが収まるようにします。

大きなアイコンが好きなら、それは大丈夫です。ウィンドウが1300px以上になるまで、大きなサイズのアイコンとロゴが有効にならないようにしてください。 980pxと1300pxの間のものは、改行を避けるために、アイコンのサイズを小さくしたり、ロゴタイプを小さくしたり、新しいアレンジメントを必要としたりします。

メディアクエリーはそのように使用されています

//This section affects anything bigger than 480px 
    @media screen and (min-width: 480px) { 
     body { 
      //insert width and height 
     } 
    } 

//This section affects anything bigger than 767px 
    @media screen and (min-width: 767px) { 
     li { 
      //insert width and height 
     } 
    } 

//This section affects anything bigger than 980px 
    @media screen and (min-width: 980px) { 
     li { 
      //insert width and height 
     } 
    } 

//This section affects anything bigger than 1300px 
    @media screen and (min-width: 1300px) { 
     li { 
      //insert width and height 
     } 
    }